Plaatje laten veranderen als de muis er over gaat
Op veel plaatsen op deze site veranderen plaatjes van kleur als je er met de muis overheen gaat. Dat
lijkt moeilijker dan het is. Er worden namelijk geen kleuren veranderd, maar het hele plaatje wordt vervangen
door een gelijksoortig plaatje waarvan alleen de kleuren anders zijn. Op deze bladzijde wordt getoond hoe
dat in zijn werk gaat met 
, onderaan
deze pagina. Daarbij wordt ook aangegeven hoe je daarvan een knop kunt maken om een link te activeren.
De code staat aan het einde van deze bladzijde. Je kunt hem ook downloaden (inclusief de plaatjes).
Je ziet ook wel eens dat plaatjes veranderen als je er op klikt met de muis. Hoe dat moet staat beschreven in het item Plaatje laten veranderen als er op wordt geklikt.
- Er worden twee afzonderlijke plaatjes gebruikt: bbdnld1.gif en bbdnld2.gif.
Deze twee plaatjes zijn allebei even groot (100 x 12 beeldpunten). De tekst "Download" staat in allebei de plaatjes op precies dezelfde plaats. Alleen de kleuren zijn anders. De rand om het plaatje wordt gemaakt met behulp van border="1". - Eerst wordt een (object-)variabele gemaakt met:
DnLd1 = new Image(); - Vervolgens wordt het plaatje bbdnld1.gif in die variable gezet (dus in het geheugen van de computer geladen)
met behulp van de opdracht:
DnLd1.src = "bbdnld1.gif" - Op zelfde manier wordt het plaatje bbdnld2.gif in de variabele DnLd2 gezet.
- Daarna wordt een functie gedefinieerd: DnLdA. (De A betekent: Actief; zie verder). Deze functie zet het plaatje bbdnld2.gif in de plaats van bbdnld1.gif.
- Tenstlotte wordt een functie gedefinieerd: DnLdP. (De P betekent: Passief; zie verder). Deze functie zet het plaatje bbdnld1.gif terug op zijn plaats.
- Op de plaats waar het plaatje moet komen wordt de tag <IMG> neergezet. In die tag staat
het plaatje genoemd waar mee moet worden begonnen: src="bbdnld1.gif".
Daarbij wordt ook name="DownLoad" gebruikt. Dat is precies dezelfde naam als in de functies DnLdA en DnLdP is gebruikt. Door deze naam wordt de <IMG>-tag aan de twee functies gekoppeld. - De <IMG>-tag bevat ook onMouseOver="DnLdA()" en onMouseOut="DnLdP()".
Zodra de muis-aanwijzer zich op het plaatje bevindt wordt daar op gereageerd door onMouseOver. Die roept de functie DnLdA() aan, waardoor het tweede plaatje op het scherm verschijnt, op de plaats van het eerste plaatje. Het plaatje is als het ware Actief. Als de muis-aanwijzer weer van het plaatje af wordt bewogen, wordt dat opgemerkt door onMouseOut, waardoor de functie DnLd wordt aangeroepen. Het eerste plaatje komt terug op het scherm en is weer Passief.
Gebruik:
- De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.
- Elk plaatje dat je wilt laten veranderen heeft een eigen naam. Dat betekent ook dat er voor elk plaatje een <IMG>-tag en een stukje JavaScript nodig zijn, waarin de name=, en functies voor Actief en Passief worden vastgelegd.
(Zet dit JavaScriptje bij voorkeur in de <HEAD>)
<script>(Zet deze code op de plaats in de <BODY> waar het plaatje zich moet bevinden)
// Plaatje laten veranderen als de muis er over gaat
// Mag vrij worden gebruikt
DnLd1 = new Image(); DnLd1.src = "bbdnld1.gif"
DnLd2 = new Image(); DnLd2.src = "bbdnld2.gif"
function DnLdA() { document.images["DownLoad"].src = "bbdnld2.gif" }
function DnLdP() { document.images["DownLoad"].src = "bbdnld1.gif" }
</script>
<img name="DownLoad" src="bbdnld1.gif" border="1" alt="Download deze code" width="100" height="12" onMouseOver="DnLdA()" onMouseOut="DnLdP()" align="middle">
Downloaden:
Druk op de knop:
File: voorb003.zip, 1067 bytes.
Opmerking:
Je kunt dit natuurlijk ook gebruiken om een link mee te maken. De HTML-code is:
<a href="voorb003.zip"><img name="DownLoad" src="bbdnld1.gif"
border="1" alt="Download deze code" width="100"
height="12" onMouseOver="DnLdA()" onMouseOut="DnLdP()" align="middle"></a>
