Этот пост продемонстрирует процедуру изменения изображения при наведении курсора в JavaScript.
Как изменить изображение при наведении в JavaScript?
Для изменения изображения при наведении используйте кнопку « при наведении мыши ' мероприятие. Когда мышь/курсор перемещается через элемент HTML или один из его дочерних элементов, запускается событие onmouseover.
Пример 1: изменение изображения при наведении в JavaScript
В HTML-файле используйте тег , чтобы отобразить изображение на веб-странице. Прикрепите « при наведении мыши », которое будет вызывать функцию JavaScript при наведении указателя мыши на изображение:
< идентификатор изображения знак равно 'менюИмг' источник знак равно '1.jpg' при наведении мыши знак равно 'наведите (это);' />
В файле JavaScript определите функцию « парить ' с параметром ' изображение ». В определенной функции установите изображение, которое будет отображаться при наведении:
функция парить ( изображение )
{
изображение источник знак равно '2.jpg'
}
Как видите, в выводе, когда мы наводим курсор на текущее изображение, оно внезапно меняется:
Пример 2. Переключение изображения при наведении
В приведенном выше примере изображение меняется при наведении на него курсора мыши, и остается то же самое изображение. Теперь в этом примере первое изображение снова появится, когда мышь выйдет за пределы изображения. Этот эффект называется эффектом переключения. Для этого будем использовать « при наведении мыши ' а также ' onmouseout HTML-свойства:
< идентификатор изображения знак равно 'менюИмг' источник знак равно '1.jpg' при наведении мыши знак равно 'наведите (это);' onmouseout знак равно 'hoverOut(это)' />
“ при наведении мыши » называет « наведите () », в то время как « onmouseout ” событие вызывает функцию ” hoverOut() ”:
функция hoverOut ( изображение ) {изображение источник знак равно '1.jpg'
}
Вывод показывает, что изображение успешно изменено, когда мышь находится над изображением, и оно изменяется, когда мышь выходит за пределы изображения:
Это было все об изменении изображения при наведении.
Вывод
Для изменения изображения при наведении используйте кнопку « при наведении мыши ' мероприятие. Для эффекта переключения используйте « при наведении мыши ” атрибут с “ onmouseout ' мероприятие. Когда мышь/курсор перемещается через элемент или один из его дочерних элементов, запускается событие onmouseover, а когда мышь/указатель перемещается за пределы элемента, происходит событие onmouseout. В этом посте мы продемонстрировали процедуру изменения изображения при наведении в JavaScript.