Овај пост ће демонстрирати процедуру промене слике при лебдењу у ЈаваСцрипт-у.
Како променити слику при лебдењу у ЈаваСцрипт-у?
Да бисте променили слику при лебдењу, користите „ онмоусеовер ” догађај. Када се миш/курсор помери кроз ХТМЛ елемент или један од његових потомака, покреће се догађај онмоусеовер.
Пример 1: Промените слику при лебдењу у ЈаваСцрипт-у
У ХТМЛ датотеци користите ознаку <имг> да бисте приказали слику на веб страници. Приложите „ онмоусеовер ” догађај који ће позвати ЈаваСцрипт функцију када миш пређе преко слике:
< имг ид = 'менуИмг' срц = '1.јпг' онмоусеовер = 'лебди (ово);' />
У ЈаваСцрипт датотеци дефинишите функцију „ лебдети ” са параметром “ имг ”. У дефинисаној функцији, подесите слику која ће се приказати на курсору:
функција лебдети ( имг )
{
имг. срц = '2.јпг'
}
Као што видите, у излазу, када пређемо мишем преко тренутне слике, она се изненада мења:
Пример 2: Пребаците слику на лебдећи
У горњем примеру, слика се мења када миш пређе преко слике, а иста слика остаје. Сада, у овом примеру, прва слика ће се поново појавити када се миш помери са слике. Овај ефекат се назива ефекат преклапања. У ту сврху користићемо „ онмоусеовер ' и ' онмоусеоут ” ХТМЛ својства:
< имг ид = 'менуИмг' срц = '1.јпг' онмоусеовер = 'лебди (ово);' онмоусеоут = 'ховерОут (ово)' />
“ онмоусеовер “ назива “ лебдети() ” функција док, “ онмоусеоут ” догађај позива функцију “ ховерОут() ”:
функција ховерОут ( имг ) {имг. срц = '1.јпг'
}
Излаз показује да је слика успешно промењена када је миш изнад слике и да се мења када миш изађе из слике:
То је било све о промени слике при лебдењу.
Закључак
За промену слике при лебдењу, користите „ онмоусеовер ” догађај. За ефекат пребацивања користите „ онмоусеовер ” атрибут са “ онмоусеоут ” догађај. Када се миш/курсор помери кроз елемент или једно од његових потомака, покреће се догађај онмоусеовер, док када се миш/показивач помери из елемента, дешава се догађај онмоусеоут. У овом посту смо демонстрирали процедуру за промену слике при лебдењу у ЈаваСцрипт-у.