Meerdere links in één plaatje IV: Figuur verdeeld in stukjes

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 bijna niet aan die plaat zien welk deel werkt als link en welk deel inactief is. Je kunt ook niet 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 plaatje hier onder 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 over een rood stukje gaat, komt er een witte rand omheen. Die rand verdwijnt weer als je de muis verplaatst buiten het rode stukje. Als je er op klikt wordt de link geactiveerd en wordt het rode stukje wit van kleur. Dat blijft zo totdat je de pagina ververst.

Bij deze aanpak is de plaat in stukjes verdeeld. Alleen de stukjes van de plaat die moeten veranderen (met de rode figuurtjes) worden aangepast, de rest is 'statisch'.
Eigenlijk werkt hetzelfde als de 'gewone' <a>-tags met tekst. Een bezochte link heeft (meestal) een andere kleur als een link waar je nog niet bent geweest.

Op deze bladzijde wordt beschreven hoe je dit kunt aanpakken. De code is te complex om op deze pagina te publiceren. Je kunt hem wel downloaden, inclusief de plaatjes.

De hier beschreven benadering is speciaal geschikt als je een grote plaat wilt voorzien van links, waarbij zichtbaar moet blijven welke links je aangeklikt hebt.

Met kleinere plaatjes werkt dit natuurlijk ook prima, hoewel het met kleinere plaatjes niet echt nodig is om de plaat in stukjes te verdelen. Zie ook de items Meerdere links in één plaatje II: <MAP> met muis-effect en Meerdere links in één plaatje III: <MAP> met click-effect.

• Er worden twee items besproken:
  1. Het verdelen van het plaatje in stukjes.
  2. De werking van de code.
  3. Inbouwen in je eigen website.
   
• Om een plaat in stukjes te verdelen, moet je slim te werk gaan. Daarmee voorkom je dat je code zo ingewikkeld wordt dat het niet meer is te onderhouden.
• In dit geval is de plaat in een aantal rijen en kolommen verdeeld, zodanig dat de 'rode stukken' intact blijven. De verdeling van het plaatje is in de figuur hier onder aangegeven met stippellijnen.
  
   
  
   
• Hiermee is onderstaande verdeling in twaalf stukken gemaakt:
  
   
  
   
• Deze verdeling is geprogrammeerd in een achttal div-tags, die samen zeven kolommen vormen. De buitenste div fungeert als container, om de boel in het document te positioneren De overige zeven div's vormen elk een kolom.
  De rand rond het (bovenste) plaatje is gemaakt met het attribuut style="border: 2px solid black".
• Opmerking: Natuurlijk kun je de hoofdverdeling ook in rijen maken.
• Opmerking: In deze uitvoering is gebruik gemaakt van een set div's. Het kan echter ook met een <table>. In HTML 4 is dat de eenvoudigste oplossing. In HTML5 is het lastig om de plaatjes dan op de goede plaats te krijgen
• De code werkt, zonder in detail te treden, als volgt:
  
  • Als je met de muis over en rode plek ('hotspot') gaat, wordt het plaatje (tijdelijk) veranderd door de function MuisOver(). Deze wordt geactiveerd door de event handler onmouseover. Als je buiten de hotspot komt wordt het oorspronkelijke plaatje teruggezet door de function MuisOut(), die wordt geactiveerd door onmouseout.
  • Als je klikt op een hotspot wordt via onclick de function MuisClick() aangeroepen. Die vervangt het oorspronkelijke plaatje definitief door een ander. Tevens wordt de link geactiveerd.
  • Het mouse-over effect wordt beschreven in het item Plaatje laten veranderen als de muis er over gaat.
    De hotspots worden gemaakt met behulp van <map>-tags. Zie daarvoor het item Meerdere links in één plaatje: <map>.
   
• Het inbouwen in je eigen website gaat als volgt:
  • Maak eerst een tekening van de verdeling van de figuur. Gebruik deze om de losse stukken aan te maken.
  • Maak de JavaScript functions waarmee op de events mouseover, mouseout en mouseclick wordt gereageerd.
  • Van de stukken waar de de hotspots zich bevinden maak je nu een versie voor het mouseover effect. Maak ook een versie voor het mouseclick effect. Voorbeeld:
    De cirkelvormige hotspot in het voorbeeld is aw_04.gif. Het event mouseover vervangt deze door aw_04o.gif. Bij een muisklik wordt aw_04.gif vervangen door aw_04c.gif.
  • Maak nu de code voor de div's en de maps.
   
• Gebruik, indien mogelijk, een z.g. image slicer om de verdeling te maken. Dat is een stukje software die een plaat voor je in stukken knipt en de HTML-code schrijft. Goede grafische software met mogelijkheden voor web-design heeft dat standaard aan boord.

Gebruik:

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

De code ziet er als volgt uit: (Zie de downloadfile)
 
In de HEAD staat een JavaScript met de functions voor het veranderen van de plaatjes die een link bevatten en de code waarmee op de link wordt gereageerd.
In de BODY staat de code van de table waarmee het plaatje wordt opgebouwd alsmede van de map waarmee de links worden gemaakt.

Downloaden:
 
Druk op de knop:  File: voorb252.zip, 7061 bytes.