Tento příspěvek demonstruje postup změny obrázku při najetí myší v JavaScriptu.
Jak změnit obrázek na Hover v JavaScriptu?
Pro změnu obrázku při umístění kurzoru použijte „ onmouseover ' událost. Když se myš/kurzor přesune přes prvek HTML nebo některý z jeho potomků, spustí se událost onmouseover.
Příklad 1: Změna obrázku na Hover v JavaScriptu
V souboru HTML použijte značku k zobrazení obrázku na webové stránce. Připojte „ onmouseover ” událost, která zavolá funkci JavaScript, když najedete myší na obrázek:
< img id = 'menuImg' src = '1.jpg' onmouseover = 'hover(toto);' />
V souboru JavaScript definujte funkci „ vznášet se “ s parametrem “ img “. V definované funkci nastavte obrázek, který se zobrazí při najetí myší:
funkce vznášet se ( img )
{
img. src = '2.jpg'
}
Jak můžete vidět, ve výstupu, když najedeme na aktuální obrázek, náhle se změní:
Příklad 2: Přepněte obrázek při najetí myší
Ve výše uvedeném příkladu se obraz změní, když na něj najedete myší, a zůstane stejný obraz. Nyní, v tomto příkladu, se první obrázek znovu objeví, když se myš přesune z obrázku. Tento efekt se nazývá přepínací efekt. K tomuto účelu použijeme „ onmouseover ' a ' onmouseout Vlastnosti HTML:
< img id = 'menuImg' src = '1.jpg' onmouseover = 'hover(toto);' onmouseout = 'hoverOut (toto)' />
“ onmouseover “ volá „ vznášet se() funkce “, zatímco “ onmouseout 'událost volá funkci' hoverOut() “:
funkce vznášet se ( img ) {img. src = '1.jpg'
}
Výstup ukazuje, že obrázek je úspěšně změněn, když je myš nad obrázkem, a je změněn, když myš opouští obrázek:
To bylo vše o změně obrazu při vznášení.
Závěr
Pro změnu obrázku při najetí myší použijte „ onmouseover ' událost. Pro přepínání efektu použijte „ onmouseover “atribut s “ onmouseout ' událost. Když se myš/kurzor přesune přes prvek nebo jeden z jeho potomků, spustí se událost onmouseover, zatímco když se myš/ukazatel přesune mimo prvek, dojde k události onmouseout. V tomto příspěvku jsme demonstrovali postup pro změnu obrázku při najetí myší v JavaScriptu.