U kunt door middel van het volgende stappenplan snel een MouseOver-script bouwen. De afbeeldingen worden uiteraard van te voren ingeladen, zodat ze al in de cache staan als de muis er over heen gaat. U dient wel wat verstand van HTML te hebben.
Als u het stappenplan nauwgezet volgt, heeft u binnen 5 minuten uw gewenste MouseOver-script.
Voor iedere MouseOver-afbeelding hebben we natuurlijk twee afbeeldingen nodig. Namelijk de standaard afbeelding en de (meestal oplichtende) afbeelding. We nemen hier voor het gemak: afbeelding01_aan.jpg, afbeelding01_uit.jpg, afbeelding02_aan.jpg en afbeelding02_uit.jpg (u kunt deze namen veranderen of meer afbeeldingen gebruiken, mits u het in het preload-gedeelte van het script ook aanpast).
Plaats het volgende script in de HEAD (tussen <HEAD> en </HEAD>):
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- // verberg voor oudere browsers
// 'document.images' geeft aan dat browser dit script aan kan
if (document.images)
{
// de plaatjes pre-laden
afbeelding01Uit = new Image();
afbeelding01Uit.src = "afbeelding01_uit.jpg";
afbeelding01Aan = new Image();
afbeelding01Aan.src = "afbeelding01_aan.jpg";
afbeelding02Uit = new Image();
afbeelding02Uit.src = "afbeelding02_uit.jpg";
afbeelding02Aan = new Image();
afbeelding02Aan.src = "afbeelding02_aan.jpg";
}
// de daadwerkelijke functies
function afbeeldingAan(Naam)
{ if (document.images)
{ tekstAanNaam = eval(Naam + "Aan.src");
document.images[Naam].src = tekstAanNaam;
}
}
function afbeeldingUit(Naam)
{ if (document.images)
{ tekstUitNaam = eval(Naam + "Uit.src");
document.images[Naam].src = tekstUitNaam;
}
}
// Klaar met verbergen -->
</SCRIPT>
Nu moet gaan we de scripts aanroepen vanuit de BODY. Eerst moeten we
natuurlijk de afbeeldingen laten verschijnen.
Het aansturen van de scripts gebeurt niet in de IMG-tag, omdat sommige
oude browsers dit niet ondersteunen. Deze dient namelijk in de A-tag te
worden gezet. Verder moeten we ook onze afbeeldingen namen geven anders
kan het script de afbeelding niet vinden. Het gedeelte tussen de haakjes
achter onMouseOver="afbeeldingAan/Uit is het doel, waar het script
naartoe moet, en tevens de naam van het oplichtende afbeelding.
De HTML/JavaScript code in de body wordt dan:
<BODY>
<A HREF="http://come.to/niwo" onMouseover="afbeeldingAan('afbeelding01')"
onMouseout="afbeeldingUit('afbeelding01')">
<IMG SRC="afbeelding01_uit.jpg" BORDER="0" NAME="afbeelding01"></A>
<A HREF="http://come.to/niwo" onMouseover="afbeeldingAan('afbeelding02')"
onMouseout="afbeeldingUit('afbeelding02')">
<IMG SRC="afbeelding02_uit.jpg" BORDER="0" NAME="afbeelding02"></A>
</BODY>
NB: de meest gemaakte fout is het vergeten van de NAME="denaam" in de IMG-tag. Vergeet die dus niet.