OnMouseOver

OnMouseOver on JavaScript tapahtuma mikä tekee sivustasi interaktiivisemman muuttamalla kuvan ulkonäköä, kun hiiri vie kuvan päälle.

Kärki

JavaScript OnMouseOver -tehoste voidaan saavuttaa myös käyttämällä CSS ilman, että kävijän tarvitsee olla JavaScript käytössä selaimessaan.



OnMouseOver-esimerkki

Alla olevassa esimerkissä näytetään, kuinka voit luoda yksinkertaisia ​​painikkeita, joilla on hiiren päällä vaikutus. Kun viet hiiren jonkin alla olevan painikkeen päälle, se muuttuu tummemmaksi, mikä osoittaa, että sitä voidaan napsauttaa.

HTML
Online apu
Tiedot viruksesta
Tietokonekieli
Internet-tiedot

OnMouseOver-esimerkkiohjeet

Alla on yleiskatsaus yllä olevan esimerkin luomiseen.



vuonnanettoalla olevat kuvatiedostot. Esimerkiksi om1.gif ja om11.gif ovat kaksi tiedostoa, joita käytetään päälle ja pois päältä. Tiedosto om1.gif näkyy, kun hiiri ei ole kuvan päällä, joten edellisessä esimerkissä se olisi vaaleanharmaa. Kun siirrät hiiren kuvan päälle, se muuttuu om11.gif tummempi harmaa. Voit seurata samaa muotoa kuvia luodessasi tai halutessasi muuttaa nimimuotoa.

sininen-osio on muuttuja tallentaa kunkin painikkeen päälle ja pois päältä sijainnit. Esimerkiksi, yksi on pois päältä ( f varten vinossa ) ja yksi on hiiri sijaintikuvassa. Yllä olevassa esimerkissä on viisi painiketta, joissa on kaksi kuvaa, joten yhteensä 10 kuvaa.

vuonnaOranssiosat ovat kuva linkkejä . Nämä linkit voivat osoittaa mihin tahansa sivuun, jolle haluat painikkeen ohjaavan kävijän verkkosivustollesi.



 

<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'>