Multiple Mouseovers

Het gebruik van mouseovers geeft je site meer interactie. Multiple mouseovers kunnen nog wat extra informatie verschaffen over de link waar je bezoeker op wil klikken. Bij het bovenstaande voorbeeld verschijnt de multiple mouseover naast de button, maar deze had overal op de pagina kunnen staan. Het is echter wel verstandig om deze in één gezichtveld te laten verschijnen, omdat het anders verwarring kan opleveren bij de gebruiker.
Voordat we kunnen beginnen hebben we eerst wat bronmateriaal nodig. Je kunt het bovenstaande voorbeeld gebruiken of natuurlijk je eigen buttons.
Download hier de bovenstaande buttons (inclusief het PSD-file van de glass-button, 106 Kb)
Voor elke link heb je dus drie plaatjes nodig, 1 voor de button zoals hij er normaal uitziet, een tweede (evengrote) die de button weergeeft zodra men er met de muis overheen beweegt en een derde voor de tweede mousover.

OK, nu de tweede stap. Mouseovers worden gegenereerd dmv. Javascript. Je kunt een javascript aanroepen vanuit je HTML-pagina, maar voor het gemak zetten we het javascript gewoon in de HTML-pagina zelf. Javascripts worden over het algemeen geplaatst tussen de <HEAD></HEAD> tag, wanneer ze worden aangeroepen in de HTML daar waar het nodig is. 

Hieronder zal ik het script stap voor stap uitleggen. Bedenk daarbij wel dat ik zelf ook geen programmeur ben, maar weet er wel genoeg van om een script te kunnen intrepreteren en dat is in de meeste gevallen genoeg. Er zijn veel sites online te vinden waar je allerlei voorbeeld scripts kunt vinden. Door deze script een beetje te veranderen en uit te testen kun je een hoop bereiken.
Goede Javascript-sites zijn oa. :
 - Hotscripts
- 24Fun
- Cut and Paste Javascript

Het script:

<script language="JavaScript"> Deze regel vertelt de browser dat hij nu een Javascript moet interpreteren.
<!-- Deze tekens zeggen tegen browser die geen Javascript kunnen interpreteren dat ze de volgende regels moeten negeren. (anders zouden ze de tekst letterlijk op het scherm neerzetten)
if (document.images) { Dit geeft elke navolgend plaatje een bepaalde naam zodat deze later in de HTML-code aangeroepen kan worden.
keuze1on = new Image(); 
keuze1on.src = "mouseover/keuze1_over.gif"; 
keuze2on = new Image();
keuze2on.src = "mouseover/keuze2_over.gif";
keuze3on = new Image();
keuze3on.src = "mouseover/keuze3_over.gif"; 		Dit zijn de plaatjes van de mouseover van de button zelf. Steeds geeft de eerste regel weer hoe dit plaatje heet en de tweede regel waar de browser dit plaatje kan vinden. De naamgeving eindigt steeds op on zodat het script het verderop kan interpreteren als zijnde een mouseover van de button.
keuze1off = new Image(); 
keuze1off.src = "mouseover/keuze1.gif"; 
keuze2off = new Image(); 
keuze2off.src = "mouseover/keuze2.gif";
keuze3off = new Image(); 
keuze3off.src = "mouseover/keuze3.gif"; 		Dit geeft de standaard-buttons een naam. Hierdoor keert de mouseover weer terug naar zijn originele staat als de muis van de button af wordt bewogen. Deze eindigen allen op off , zodat het script het verderop weer kan herkennen.
keuze1ad = new Image();
keuze1ad.src = "mouseover/keuze1_plaatje.jpg";
keuze2ad = new Image();
keuze2ad.src = "mouseover/keuze2_plaatje.jpg";
keuze3ad = new Image();
keuze3ad.src = "mouseover/keuze3_plaatje.jpg"; 		Hiermee geef je namen aan de plaatjes van de tweede mouseover. Deze eindigen allen op ad .
}
function imgOn(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "on").src;
document["common"].src = eval(imgName + "ad").src;
}
}

function imgOff(imgName) {
if (document.images) {
document[imgName].src = eval(imgName + "off").src;
document["common"].src = neutraal.src;
 		Dit is de functie die de browser verteld welk plaatje hij moet gebruiken als de muis over een button gaat en welk plaatje als hij weer van de button af gaat. (on.src, off.src en ad.src)
document["common"].src = "mouseover/plaatje_neutraal.gif";}
}		 Hier krijgt het standaard plaatje van de tweede mouseover een naam en ook weer waar de browser deze kan vinden.
// -->
 		Eindtag van bovenstaande tag die tegen oude browser zegt dat ze tot hier de code moeten negeren.
</script> Deze tag zegt tegen alle andere browsers dat het Javascript nu geeindigd is en dat ze de rest van de code weer als HTML moeten interpreteren.

 

En dan nu de derde en laatste stap : het aanroepen van het Javascript in de HTML. Als eerste zetten we alle standaard plaatjes op de plaats waar ze moeten komen te staan. Dan gaan we de links aan de buttons koppelen.
Een standaard link ziet er als volgt uit:

<a href="http://www.elke-site.nl">LINK</a> geeft : LINK
<a href="../photoshop/reflectie.htm">Reflectie</a> geeft : Reflectie
<a href="../photoshop/sneltoetsen.htm"><img src="../photoshop/images/quick.gif"></a> geeft :

Bij het gebruik van mouseovers zien ze er als volgt uit:
<a href="#" onMouseOver="imgOn('keuze1')" onMouseOut="imgOff('keuze1')">
<img border="0" src="mouseover/keuze1.gif" width="213" height="67" name="keuze1">
</a>

Het is hierbij van groot belang dat je het plaatje de naam geeft overeenkomstig met de naam die je aan deze button hebt gegeven in het Javascript (zonder on, off of ad).

Nu moeten we nog de tweede mouseover definiëren.

<img border="0" src="mouseover/plaatje_neutraal.gif" name="common" width="152" height="156">

Ook hier is de naamgeving weer van groot belang. Geef deze ook weer dezelfde naam die je aan de tweede mouseover in het Javascript hebt gegeven.

En daarmee is al het werk gedaan.
Hier kun je nog de standaard HTML en Javascript downloaden zodat je deze kunt vergelijken met jouw pagina mocht het geheel niet werken.

 Extra:
Als je dit script voor veel pagina's nodig hebt omdat bv. elke pagina dezelfde navigatie heeft kun je je Javascript beter opnemen als extern script die je dan in je pagina oproept. Dit scheelt een hoop code in je HTML en de gebruiker hoeft het script ook maar 1 keer te downloaden, ipv. bij elke pagina.

Copy - Paste het Javascript in een teksteditor zonder de <script></script>-tag en <!--    en   // -->
 Save dit dan als een .js file 

Zet in de <head> - tag van je HTML het volgende:

 <script language="JavaScript" src='mouseovers.js'>

Zorg er uiteraard wel voor dat de scr naar het goede pad verwijst.
Zodra de browser je pagina gaat interpreteren laad hij door je verwijzing in de <head> het Javascript in zijn geheugen.