NIWO - nl.internet.www.ontwerpFAQ

Voorbeeld: een 'mouseover' met behulp van JavaScript

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.

Stap 1

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).

Stap 2

Plaats het volgende script in de HEAD (tussen <HEAD> en </HEAD>):

001  <script language="JavaScript" type="text/javascript">
002  
003  // 'document.images' geeft aan dat browser dit script aan kan
004  
005  if (document.images) {
006  
007    // de plaatjes pre-laden
008    afbeelding01Uit = new Image();
009    afbeelding01Uit.src = "afbeelding01_uit.jpg";
010    afbeelding01Aan = new Image();
011    afbeelding01Aan.src = "afbeelding01_aan.jpg";
012  
013    afbeelding02Uit = new Image();
014    afbeelding02Uit.src = "afbeelding02_uit.jpg";
015    afbeelding02Aan = new Image();
016    afbeelding02Aan.src = "afbeelding02_aan.jpg";
017  }
018  
019  
020  // de daadwerkelijke functies
021  function afbeeldingAan(Naam) {
022    if (document.images) {
023      tekstAanNaam = eval(Naam + "Aan.src");
024      document.images[Naam].src = tekstAanNaam;
025    }
026  }
027  
028  function afbeeldingUit(Naam) {
029    if (document.images) {
030      tekstUitNaam = eval(Naam + "Uit.src");
031      document.images[Naam].src = tekstUitNaam;
032    }
033  }
034  
035  </script>

Stap 3

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:

001  <body>
002  
003  <a href="http://come.to/niwo" onMouseover="afbeeldingAan('afbeelding01')"
004  onMouseout="afbeeldingUit('afbeelding01')">
005  <img src="afbeelding01_uit.jpg" border="0" name="afbeelding01"></a>
006  
007  <a href="http://come.to/niwo" onMouseover="afbeeldingAan('afbeelding02')"
008  onMouseout="afbeeldingUit('afbeelding02')">
009  <img src="afbeelding02_uit.jpg" border="0" name="afbeelding02"></a>
010  
011  </body>

afbeelding 1
afbeelding 2

NB: de meest gemaakte fout is het vergeten van het NAME attribuut voor het IMG element. Vergeet die dus niet.