OnMouseOver



OnMouseOver ir JavaScript notikumu tas padara jūsu lapu interaktīvāku, mainot attēla izskatu, kad pele novieto kursoru virs attēla.



Padoms

JavaScript OnMouseOver efektu var sasniegt arī, izmantojot CSS bez apmeklētāja pārlūkprogrammas jāiespējo JavaScript.

OnMouseOver piemērs

Tālāk sniegtajā piemērā parādīts, kā jūs varētu izveidot vienkāršas pogas, kurām ir peles kursora efekts. Novietojot peli virs vienas no pogām zemāk, tā mainās uz tumšāku krāsu, norādot, ka uz tās var noklikšķināt.



HTML
Palīdzība tiešsaistē
Informācija par vīrusiem
Datoru žargons
Interneta informācija

OnMouseOver instrukciju piemērs

Tālāk ir sniegts pārskats par to, kā tika izveidots iepriekš minētais piemērs.



Iekštīklszemāk esošās sadaļas ir attēlu faili. Piemēram, om1.gif un om11.gif ir divi faili, kas tiek izmantoti ieslēgšanas un izslēgšanas pozīcijām. Fails om1.gif tiek parādīts, kad pele neatrodas virs attēla, tāpēc iepriekš minētajā piemērā tas būtu gaiši pelēks. Virzot kursoru virs attēla, tas mainīsies uz om11.gif tumšāk pelēks. Veidojot attēlus, varat ievērot šo pašu formātu vai, ja vēlaties, varat mainīt nosaukuma formātu.

Thezilssadaļa ir mainīgais lai katrai pogai saglabātu ieslēgtu un izslēgtu attēlu atrašanās vietas. Piemēram, onef ir izslēgta pozīcija ( f priekš izslēgts ) un oneo ir pele uz pozīcijas attēla. Mūsu iepriekš minētajā piemērā ir piecas pogas ar divu attēlu kopumu, tātad kopā 10 attēli.

Iekšapelsīnssadaļas ir attēls saites . Šīs saites var norādīt uz jebkuru lapu, kurai vēlaties, lai poga novirzītu apmeklētāju uz jūsu vietni.

 

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