Toggle images met javascript

Javascript is niet meer weg te denken uit de moderne webdesign. In dit artikel een kleine tip om afbeeldingen te 'toggelen', dit is met een zelfde muisklik de alternerende afbeelding weer te geven.

1. Alternerende afbeeldingen gebruiken.

Afbeeldingen die in tweevoud voorkomen zijn bijvoorbeeld menuknoppen, aan/af knoppen, checkboxes, etc. Wanneer de pagina geladen wordt, kunnen we de eerste afbeelding laten zien, wanneer de gebruiker op deze afbeelding klikt, moet de tweede afbeelding te voorschijn komen.

2. Image toggle met innerHTML

We kunnen de afbeelding in een div of span tag steken en bij een klik de innerHTML functie van javascript laten uitvoeren om de HTML te veranderen opdat een andere afbeelding wordt weergegeven.

Een voorbeeld van deze HTML:

<div id="toon">
<p><img src="images/aan.png" onClick='toonuit(toon)' alt="de aan knop" />
</p>
</div>

Enkele dingen die misschien het vermelden waard zijn:

Volgens de W3C aanbevelingen bevat elke img tag een alt tag.
De img tag is zelfsluitend door /> op het eind te plaatsen.

Als je in het DIV tag de andere afbeelding wil doen verschijnen, schrijf je deze functie tussen de script tags in de head sectie:

function toonuit(id){
var inhoud = getElementById(id);
inhoud.innerHTML='<img src="images/uit.png" onClick=\'toonaan(toon)\' alt="de uit knop" />';
}

Op de plaats van je oude afbeelding komt een nieuwe afbeelding met een nieuwe javascript functie:

function toonaan(id){
var inhoud = getElementById(id);
inhoud.innerHTML='<img src="images/aan.png" onClick=\'toonuit(toon)\' alt="de aan knop" />';
}

En zo is de circel weer rond. Deze methode vereist wel het opnieuw laden van de afbeelding, elke keer er geklikt wordt. Zorg ervoor dat je afbeeldingen erg klein zijn als je deze methode wil toepassen.

3. Image toggle met de src attribuut

In plaats van de hele img tag te veranderen, kunnen we met javascript enkel de bron van de afbeelding veranderen. Dit kan door de src aan te spreken via de javascript functie. We nemen weer een HTML voorbeeld:

<img id="toon" src="images/aan.png" onClick='toggle(toon)' alt="de aan knop" />

We hoeven onze afbeelding niet meer in een div tag te steken, maar we moeten wel nog steeds een id toevoegen zodat we de javascript functie getElementById kunnen toepassen. Onze functie wordt dan:

function toggle(id){
var inhoud = getElementById(id);
inhoud.src='images/uit.png';
}

We hebben dus rechtstreeks de src veranderd van de afbeelding. Maar nu willen we dat javascript detecteerd welke afbeelding getoond wordt, om dan de andere te tonen. We doen dit door de src te vergelijken met een van de afbeeldingen. Komt dit overeen, wordt de andere getoond. Hierbij komt wel een extra moeilijkheid. Javascript ziet de src als het hele pad van de server. Deze informatie hebben we niet nodig, en daarom dat we die er zullen afkappen. Het hele handigheidje ziet er zo uit:

function toggle(id){
img = document.getElementById(id); 
var e = img.src
var d = e.lastIndexOf('.');
var f = e.substring(e.lastIndexOf('/') + 1, d < 0&#160;? e.length&#160;: d);
if (f=='aan')
{
img.src = "images/uit.png"
} else {
img.src = "images/aan.png"
}
}

De e variabele is de volledige bron van de afbeelding waarop werd geklikt. De d variabele neemt de extensie weg (in dit geval .png). De f variabele neemt alle tekst weg voor het laatste woord, de / inclusief. Is de afbeelding 'aan', dan veranderen we de bron in uit.png, is de afbeelding 'uit' dan tonen we aan.png.

4. Lees ook andere Javascript tips:

Javascript tip: Inklappende en Uitklappende Inhoud