Ben's Hobbyhoekje -- Meerdere links in een plaatje III: map met click-effect

Meerdere links in één plaatje III: <map> met click-effect

Op sommige sites zie je wel eens een (meestal vrij grote) plaat waarop je kunt klikken. Afhankelijk van wáár je klikt wordt een andere link aangeroepen. Je kunt alleen niet aan die plaat zien welke links je al hebt gehad en welke niet. Standaard HTML heeft daar geen voorzieningen voor. Je zult dus zelf wat moeten programmeren om dit voor elkaar te krijgen.

Op het .GIF-plaatje hieronder zie je diverse vormen. Elk ROOD gekleurd deel van het plaatje bevat een link waarmee je een pagina kunt oproepen op dezelfde manier zoals bij een <a href="..."> tag. Op deze pagina staat echter de aanroep van een JavaScript-function waardoor een alert wordt gegeven.
Als je met de muis op een rode plek klikt, komt er een witte rand omheen. Tegelijkertijd wordt de link geactiveerd. De witte rand verdwijnt weer als je op een ander 'rood' stukje klikt of als je de pagina ververst.

N.B.: Op een aanraakscherm werkt dit precies zoals beschreven in het item Meerdere links in ��n plaatje II: met muis-effect.

artwork.gif... Dit is kunst! © 2002 B. Boukes

Op deze bladzijde wordt beschreven hoe je dit kunt aanpakken. De code staat onderaan de bladzijde. Je kunt hem ook downloaden, inclusief de plaatjes.

Er worden twee items besproken:
1. De werking van de code.
2. Inbouwen in je eigen website.
De hier besproken code is een uitbreiding van de "standaard" in HTML beschikbare oplossing voor dit soort problemen. Het gaat hier om een aangepaste toepassing van het mouse-over effect, dat beschreven is in het item Plaatje laten veranderen als de muis er over gaat.
De aanpassing is dat het plaatje pas verandert als je met de muis klikt, in plaats van dat je alleen met de muis over het plaatje heen gaat.
De tags <map> en <area> worden hier niet uitgebreid besproken. Ze worden behandeld in het item Meerdere links in één plaatje: <map>.
Bij het openen van de pagina verschijnt een plaatje, artwork.gif, waarin met <map> en <area> een drietal links is aangebracht. Dat zijn de rode rechthoek, de rode cirkel en de rode driehoek.
Deze links brengen een alert op het scherm en zorgen ervoor dat de witte rand verschijnt, met behulp van de JavaScript function ToonHet().
Voor de communicatie met de JavaScript functions heeft artwork.gif het attribuut name="kunst".
Als de JavaScript function ToonHet() wordt aangeroepen, vervangt die artwork.gif door een ander plaatje, afhankelijk van de parameter str. Die plaatjes zijn gelijk aan het origineel, behalve dat er een witte rand om een rood stukje is gezet.
Er zijn drie links, dus zijn er drie verschillende 'extra' plaatjes: artw_rh.gif, artw_ch.gif en artw_dh.gif.
Opmerking:
De toepasbaarheid van deze benadering is beperkt. Het werkt alleen goed als de omvang (in bytes) van de plaatjes niet te groot is. Anders kan er vertraging ontstaan bij het wisselen van de plaatjes waardoor dat op een storende manier zichtbaar wordt.
Als je toch 'grote' plaatjes wilt/moet gebruiken kun je gebruik maken van de techniek die is beschreven in het item: Meerdere links in één plaatje IV: Figuur verdeeld in kleine stukjes.

Gebruik:

De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code ziet er als volgt uit:

(Zet dit in de <HEAD>).

<script>
function ToonHet(str) {
switch(str) {
case 'Rechthoek': document.images["kunst"].src = "../images/artw_rh.gif"; break;
case 'Cirkel': document.images["kunst"].src = "../images/artw_ch.gif"; break;
case 'Driehoek': document.images["kunst"].src = "../images/artw_dh.gif"; break;
default: document.images["kunst"].src = "../images/artwork.gif"; }
window.alert(str+' aangeklikt!');
}
</script>

(Zet dit in de <BODY>).

<div align="center">
<img src="artwork.gif" width="400" height="160" border="2" name="kunst" alt="artwork.gif... Dit is kunst! © 2002 B. Boukes" usemap="#EEN">
</div>

<map name="EEN">
<area shape="rect"alt="Rechthoek" coords="124,82,164,108"
href="JavaScript:ToonHet('Rechthoek')">
<area shape="circle" alt="Cirkel" coords="246,23,14"
href="JavaScript:ToonHet('Cirkel')">
<area shape="poly"alt="Driehoek" coords="243,105,326,105,288,130"
href="JavaScript:ToonHet('Driehoek')">
</map>

Downloaden:

Druk op de knop: File: voorb250.zip, 8925 bytes.

Opmerking:

Als je wilt dat de witte rand blijft staan als je een ander 'rood' stukje aanklikt, heb je een andere aanpak nodig. Zie daarvoor het item: Meerdere links in één plaatje IV: Figuur verdeeld in kleine stukjes.