[javascript] mouseover

**Youri v/d Bogert** · 19-05-2009, 08:24

Beste,

Ik zoek een script dat het volgende doet:

header1_out.gif
header1_over.gif

header2_out.gif
header2_over.gif

als ik dus over header1 ga moet header2 out aangaan (En andersom ook). Maar aangezien ik met PHP werk worden ze soms allebij "active" en dat wil ik niet. Is hier misschien een simpele oplossing voor ?

**Jesper van E.** · 19-05-2009, 08:56

Hierbij kun je gebruikmaken van JavaScript, en dan met name de onmouseover en onmouseout events. Wanneer je bijvoorbeeld over header1 gaat wil je twee dingen: de img.src van header1 moet header1_over.gif worden en de img.src van header2 moet header2_out.gif worden. Dan gebruik je dus bijvoorbeeld onmouseover="document.getElementById('header1').sr c='header1_over.gif'; document.getElementById('header2').src='header2_ou t.gif';". Probeer het ook even op te zoeken met google (onmouseover/onmouseout), er is zeer veel over te vinden.

**Youri v/d Bogert** · 19-05-2009, 10:02

Bedankt Jesper, hier heb ik zeker wat aan gehad!

**Peter W.** · 19-05-2009, 10:53

Dat moet tegenwoordig toch echt met CSS! Zoek maar eens via Google.

**Jeffrey Kroon** · 19-05-2009, 21:34

Als ik het goed begrijp gaat het hier over meerdere buttons o.i.d :

-------------------------------------------
Active | Deactive | Deactive | Deatvie |
-------------------------------------------

Jij wil dat wanneer je een mouseover pleegt op een deactive style, daar de hover tevoorschijn komt en bij de active verdwijnt ?

Indien dat het geval is zal je (helaas) wel gebruik moeten maken van javascript, indien dit niet het geval is kun je gewoon in CSS gebruik maken van de" :hover". Een voorbeeldje hiervan :

PHP Code:


HTML :
<a href="#" title="">Jou tekst & background</a>

CSS :
a {
     background: url('images/background1.png');
}
a:hover {
     background: url('images/background.png');
}

*Let er overigens wel op dat de :hover in ie6 alleen op de anchor (<a>) werkt, vandaar ook het anchor element in het bovenstaande voorbeeld.

Succes ermee!

**Jesper van E.** · 19-05-2009, 22:45

@ Peter W.
JavaScript werkt in dit geval beter, voornamelijk omdat het dan op elk soort element in elke browser werkt.

Daarbij komt nog dat wat je zegt eigenlijk niet klopt. Wanneer je in CSS een a:hover maakt, dan wordt die niet door CSS aangeroepen. De definitie van de hover toevoeging is dat hij wordt geactiveerd zodra er een JavaScript onmouseover plaatsvindt. Je werkt dan feitelijk met Javascript zonder dat je het zelf weet. Bij a elementen werkt het echter wel goed, aangezien de compatibiliteit daarvan beter is.

**Jeffrey Kroon** · 20-05-2009, 07:23

Origineel gepost door Jesper

JavaScript werkt in dit geval beter, voornamelijk omdat het dan op elk soort element in elke browser werkt.

Die klopt ook niet helemaal, er zijn genoeg mensen die javascript uit hebben staan. Dan kun je beter een CSS element met hover maken, en de gebruikers van IE6 hebben dan pech. Het aantal gebruikers die iets anders dan IE6 gebruikt is namelijk veel groter.

**Jesper van E.** · 20-05-2009, 09:40

Het hangt er inderdaad vanaf waar je focus op ligt (mensen met IE6 of mensen met JS uitgeschakeld).

**Jeffrey Kroon** · 20-05-2009, 20:40

Dat is inderdaad erg afhankelijk van de doelgroep waar jij je op wil gaan richten. Stel dat het om een gaming community etc. gaat kan je er van uitgaan dat vrijwel niemand meer IE6 gebruikt.

[javascript] mouseover