OnMouseOver

OnMouseOver er en JavaScript begivenhet som gjør siden din mer interaktiv ved å endre et utseende på bildet når musen svever over bildet.

Tips

JavaScript OnMouseOver-effekten kan også oppnås ved hjelp av CSS uten at den besøkende trenger å ha JavaScript aktivert i nettleseren sin.

OnMouseOver eksempel

Eksemplet nedenfor viser deg hvordan du kan lage enkle knapper som har en onmouseover-effekt. Når du plasserer musen over en av knappene nedenfor, endres den til en mørkere farge, noe som indikerer at den kan klikkes.

HTML
Online-hjelp
Virus Informasjon
Datasjargong
Internett-info

OnMouseOver-instruksjoner

Nedenfor er en oversikt over hvordan eksemplet ovenfor ble opprettet.

Inettseksjonene nedenfor er bildefilene. For eksempel om1.gif og om11.gif er de to filene som brukes til av- ​​og på-posisjoner. Filen om1.gif vises når musen ikke er over bildet, så i eksemplet ovenfor vil det være lysegrått. Når du svever over bildet, vil det endres til om11.gif en mørkere grå. Du kan følge samme format når du oppretter bildene dine, eller hvis du ønsker det, kan du endre navneformatet.

Deblåseksjonen er variabel for å lagre av og på bildeplasseringen for hver knapp. For eksempel, onef er av-posisjonen ( f til av ) og oneo er musen på posisjonsbildet. I eksemplet vårt ovenfor er det fem knapper med et sett med to bilder, så totalt 10 bilder.

Ioransjeseksjoner er bildet lenker . Disse lenkene kan peke til hvilken som helst side du vil at knappen skal videresende den besøkende til på nettstedet ditt.

 



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