Image Maps
Met image maps kun je van een deel van een afbeelding een link maken. Bijvoorbeeld als je je layout met paint shop pro
maakt maar geen saai menu wilt maar
letters met een mooi effect (bijvoorbeeld een 3d effect).
Je kunt de tekst dan in de afbeelding zetten.Maar hoe maak je er een link van? Heel simpel.
Het enigste wat je nodig hebt is een speciale html code
die je verder op de pagina nog tegenkomt
en paint of animation shop (hoort bij paint shop pro).
Om even te verduidelijken wat ik
bedoel heb ik een proefafbeelding met werkende links gemaakt. Sla de afbeelding maar op om te
kijken wat ik bedoel. Het menu staat nog steeds in de afbeelding terwijl er geen html code is:
Deze html code heb je nodig:
<![CDATA[
<img src="imagemapsvb.jpg" border="0" alt="" usemap="#menu"><map name="menu">
<area shape="rect" coords="6,54,68,74" href="http://www.mtv.nl/" target="_blank">
<area shape="rect" coords="6,79,68,98" href="http://www.tmf.nl/" target="_blank">
<area shape="rect" coords="6,103,99,122" href="http://www.thebox.nl/" target="_blank">
</map>]]>
Dit is de code die ik in bovenstaande afbeelding gebruikt heb. Op de plaats van
imagemapsvb.jpg moet je je eigen afbeelding/layout neerzetten. Verder zie je in de code
veel getallen, dat zijn getallen die nodig zijn om de link op de juiste plek in de afbeelding te
krijgen. Voor die getallen heb je paint of animation shop nodig. Ik doe het voor in paint.
- Open je afbeelding in paint, zorg ervoor dat er een kopie is
- Om het bepalen van de co�rdinaten
handiger te maken is het beter dat je de link omlijnt:
Binnen het zwarte kadertje komt de link.
- Nu heb je de selectietool (
)nodig
- Ga met het kruisje naar de linkbovenhoek van de zwarte omlijning, zodat hij er precies op staat:
- Rechts onder in beeld komen twee getallen te staan gescheiden door een komma,
in dit geval 6,54. Dit zijn de eerste twee getallen in de getallenreeks.
- Dat is nog niet genoeg voor ��n
link. Je hebt ook nog de co�rdinaten van de rechteronderhoek van de zwarte omlijning nodig. Je doet dat op precies
dezelfde manier. Ter verduidelijking nog een voorbeeldje:
De getallen die je nu rechtsonder in beeld te zien krijgt zijn 68,74. Hieronder ze je de co�rdinaten in de code:
<![CDATA[<area shape="rect" coords="6,54,68,74" href="http://www.mtv.nl/" target="_blank">]]> Vul de urls en targets in en klaar is je code!
Bij het eerste punt zei ik dat je een kopie van de
afbeelding moet maken omdat je een omlijning gebruikt om het bepalen van de links handiger te maken. Als je het
per ongeluk opslaat heb je lijnen in je afbeelding.
Terug...