Как изменить изображение при наведении в JavaScript

Kak Izmenit Izobrazenie Pri Navedenii V Javascript



На веб-страницах смена изображений при наведении — обычная задача. Конкретная задача переключения изображений при наведении в основном используется на веб-страницах. Для этого используйте атрибуты HTML « при наведении мыши ' а также ' onmouseout ” в JavaScript для запуска функций.

Этот пост продемонстрирует процедуру изменения изображения при наведении курсора в 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.