nl.internet.www.ontwerp

Voorbeeld: een 'mouseover' met behulp van JavaScript

Omdat in de NIWO-nieuwsgroep (nl.internet.www.ontwerp) veel mensen vragen hebben over een MouseOver-script, dacht ik dat het toch wel mogelijk zou moeten zijn om een universeel MouseOver-script te maken. Na wat te hebben nagedacht, heb ik een universeel JavaScript gebouwd.

U kunt door middel van het volgende stappenplan in mum van tijd het gewenste 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>):

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!-- // verberg voor oudere browsers

// eerst even controleren of de browser aan ons script aan kan

naamBrowser   = navigator.appName;
versieBrowser = parseInt(navigator.appVersion);

if ((naamBrowser == "Netscape" && versieBrowser >= 3) || (naamBrowser == "Opera" && versieBrowser >= 3) || (naamBrowser == "Microsoft Internet Explorer" && versieBrowser >=4))
   { gekeurdeBrowser = "yes";
   }
else
   { gekeurdeBrowser = "no";
   }
if (gekeurdeBrowser == "yes")
   {

     // 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 (gekeurdeBrowser == "yes")
       { tekstAanNaam = eval(Naam + "Aan.src");
         document.images[Naam].src = tekstAanNaam;
       }
  }

function afbeeldingUit(Naam)
  { if (gekeurdeBrowser == "yes")
       { tekstUitNaam = eval(Naam + "Uit.src");
         document.images[Naam].src = tekstUitNaam;
       } 
  }

// Klaar met verbergen -->
</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:

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

 

afbeelding 1
afbeelding 2

NB: de meest gemaakte fout (ook door mij) is het vergeten van de NAME="denaam" in de IMG-tag. Vergeet die dus niet.

Indien nog u vragen of opmerkingen heeft kunt u een berichtje posten in de nieuwsgroep nl.internet.www.ontwerp of contact opnemen met Frank Uittenbogaard via E-mail.

Bijdrage van Frank Uittenbogaard

Laatste wijziging: 15 december 2001

© 2001 Het NIWO-FAQ Team