Terug naar beginpagina Homepage-Maken.nl
Versio Webhosting   

Een Client-Side Image Map Maken

In dit artikel leer je hoe je een client-side image map kunt maken. Een image map is een plaatje dat bestaat uit meerdere delen die ieder een bepaalde functie uitvoeren wanneer erop geklikt wordt. Zo kun je bezoekers doorsturen naar een bepaalde pagina (bijvoorbeeld bij plaatjes van landkaarten), of je kunt een image map gebruiken voor de navigatie binnen je site. Image maps worden dan ook vaak gebruikt op het web.

De meeste moderne browsers ondersteunen image maps.
Hierdoor is het niet echt meer nodig om server-side image maps te maken, wat ingewikkelder is en waarbij je met CGI scripts moet werken.

Voorbeeld van een image map

Hieronder zie je een voorbeeld van een image map.
Ga met de muis maar eens over de verschillende landen op de kaart en kijk links onderin naar de statusbalk van je browser.
Je ziet dat de drie delen op de kaart naar verschillende websites op het web linken.
Aan het eind van dit artikel kun je zelf ook zulke image maps maken.

Plaatje

(Plaatje afkomstig van: 321Clipart.com

Schotland Engeland Wales Great Brittain

Wat je nodig hebt

Voor het maken van een client side image map heb je het volgende nodig:

Je hebt dus een programma nodig om de map te maken.
Het beste programma hiervoor vind ik: MapEdit.
Je kunt een gratis evaluatieversie downloaden die een beperkte tijd geldig is.
Download en installeer MapEdit voordat je verdergaat.

Het maken van de image map

Voordat je MapEdit opstart kun je het beste eerst het HTML bestand maken met daarin de code naar het plaatje waar je een image map van wilt maken. Sla daarna het HTML bestand op en geef het een naam.

Start nu MapEdit.
Er komt direct een scherm in beeld waarmee je een bestand kunt openen.
Open het HTML bestand dat je zojuist hebt gemaakt.
Dan word je gevraagd om het plaatje te selecteren waar je een image map van wilt maken.
Selecteer het plaatje uit het lijstje en klik op "OK".

Je plaatje verschijnt nu in beeld.
Nu moet je de verschillende delen aangeven die je aanklikbaar wilt maken.
Je kunt rechthoeken, circels en polygonen selecteren door op de corresponderende ikoontjes (groen, blauw, rood) bovenaan te klikken.
Dit wijst zich verder eigenlijk vanzelf.

Als je de selecties voor een bepaald deel hebt gedaan, verschijnt er een scherm waarin je de URL's en acties voor dat deel moet opgeven.
Je moet invullen:

Als je tevreden bent met de selecties voor dat deel van de image map dan klik je op "OK".
Het bovenstaande herhaal je vervolgens voor alle delen die je wilt maken.

Als je alle delen hebt gemaakt dan wordt het tijd om het HTML document op te slaan. De code voor de image map wordt dan automatisch toegevoegd aan de HTML code. Klik dus op de derde knop van links: "Save HTML Document".

Je image map is nu klaar! Nu kun je testen of het werkt door het HTML bestand te bekijken met je browser. Daarna moet je het bestand en het plaatje natuurlijk nog op het web zetten zodat ook de bezoekers van je site er gebruik van kunnen maken.

Er kan natuurlijk nog veel meer met het programma MapEdit. Ik heb hier alleen de basisfuncties uitgelegd. Voor een overzicht van de andere mogelijkheden kun je de helpfile (help->contents) van MapEdit raadplegen.

Slot

Je ziet: het is helemaal niet moeilijk om een client-side image map te maken! Met dit artikel en het programma MapEdit ben je al snel in staat om een fraaie image map voor je eigen site samen te stellen.

Wat vond je van dit aritkel?

Hits: | Aantal Stemmen: | Gemiddelde:
 

Homepage-Maken Tip

De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.

Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.

Klik hier om te starten met je Weebly website!

Zoekfunctie en Overige Info


Copyright © Homepage-Maken.nl 2000-2020 · Privacybeleid

Deze pagina voldoet aan de XHTML 1.0 richtlijnen     Deze pagina voldoet aan de CSS richtlijnen

[Naar boven]  [Home]