image map

De uitleg staat in paragraaf 3.2.3 Een gedeelte van een afbeelding als hyperlink (map) van de HTML5 en Webdesign cursus van Instruct-online.
Hieronder staat een demonstratie van zo'n image map met Bart en bord en een gebruiksaanwijzing van hoe dit is gemaakt met Image Map Tool.

Je hebt op bord geklikt

Klik nu op Bart

Je hebt op Bart geklikt

Klik nu op het bord

Klik op Bart of bord

Gebruiksaanwijzing Image Map Tool

Je kunt zo'n image map voor Bart en bord maken met Dreamweaver, maar het is eenvoudiger om Image Map Tool te gebruiken.

  1. Klik op Browse For File.
  2. Selecteer het plaatje van Bart en bord.
  3. Wijzig C:\fakepath in het juiste path
  4. Klik op Start Mapping
  5. Klik op click to continue
  6. Klik met rechter muistoets
  7. Klik op Create Rect
  8. Selecteer het bord in het plaatje van Bart en bord
  9. Verplaats het window opzij
  10. Vul in bij Map URL: #bord
  11. Klik op Save
  12. Klik met rechter muistoets en klik weer op Create Rect
  13. Selecteer Bart in het plaatje van Bart en bord
  14. Vul in bij Map URL: #bart
  15. Klik weer op Save
  16. Klik met rechter muistoets en klik op Get Code
  17. Klik op tabblad HTML code
  18. Ga naar beneden in het window
  19. Kopieer de HTML-code
  20. Deze code moet je nog enigzins aanpassen in Dreamweaver of Notepad

De HTML-code voor het plaatje van Bart en bord

Dit is de code die op deze pagina staat. De geel gemaakte code zijn links naar een andere plek op deze pagina. Indien je een link naar JouwPagina wilt maken, moet je dat vervangen door JouwPagina.html

  <img src="images/BartSimpsonGoogle.jpg" width="285" height="177" alt="" usemap="#bordbart"/>
  <map name="bordbart">
    <area alt="" title="bord" href="#bord" shape="rect" coords="14,9,234,133" style="outline:none;" target="_self" />
    <area alt="" title="bart" href="#bart" shape="rect" coords="233,67,275,173" style="outline:none;" target="_self" />
  </map>