OnMouseOver



OnMouseOver egy JavaScript esemény ez interaktívabbá teszi az oldaladat a kép megjelenésének megváltoztatásával, amikor az egér a kép fölé viszi az egeret.



Tipp

A JavaScript OnMouseOver effektus a CSS anélkül, hogy a látogatónak engedélyeznie kellene a JavaScript használatát a böngészőjében.

OnMouseOver példa

Az alábbi példa bemutatja, hogyan hozhat létre egyszerű gombokat, amelyek egérmutató hatással bírnak. Amikor az egeret az alábbi gombok egyikére helyezi, sötétebb színűvé válik, jelezve, hogy rákattintani lehet.



HTML
Online segítség
Vírus információ
Számítógépes szakzsargon
Internet Info

OnMouseOver példa utasítások

Az alábbiakban áttekintjük a fenti példa létrehozásának módját.



Ban,-benhálóaz alábbi szakaszok a képfájlok. Például a om1.gif és om11.gif a be- és kikapcsolási pozíciókhoz használt két fájl. A fájl om1.gif akkor jelenik meg, ha az egér nincs a kép fölött, így a fenti példában a világosszürke lenne. Amikor a kép fölé viszi az egérmutatót, a képre változik om11.gif sötétebb szürke. A képek létrehozásakor ugyanezt a formátumot követheti, vagy ha kívánja, megváltoztathatja a névformátumot.

Akékszakasz a változó tárolja az egyes gombok be- és kikapcsolási helyét. Például, onef a kikapcsolt helyzet ( f mert ki ) és egy O az egér a helyzetképen. A fenti példánkban öt gomb található két kép halmazával, tehát összesen 10 kép.

Ban,-bennarancsszakaszok a kép linkek . Ezek a linkek bármely olyan oldalra rámutathatnak, amelyre a gomb továbbítja a látogatót az Ön weboldalán.

 

<a href='/html-web-design-help-9735' onMouseOver='act('one')' onMouseOut='inact('one')'> img/o-definitions/84/onmouseover.gif' name='one' alt='HTML'>
<a href='https://www.computerhope.com/oh.htm' onMouseOver='act('two')' onMouseOut='inact('two')'> img/o-definitions/84/onmouseover-2.gif' name='two' alt='Online help'>
<a href='/virus-9574' onMouseOver='act('three')' onMouseOut='inact('three')'> img/o-definitions/84/onmouseover-3.gif' name='three' alt='Virus information'>
<a href='/computer-terms-dictionary-7016' onMouseOver='act('four')' onMouseOut='inact('four')'> img/o-definitions/84/onmouseover-4.gif' name='four' alt='Computer jargon'>
<a href='/internet-8263' onMouseOver='act('five')' onMouseOut='inact('five')'> img/o-definitions/84/onmouseover-5.gif' name='five' alt='Internet Info'>