Hoe kan ik zo'n map maken? Waarbij je bepaalde delen aan kun klikken en dat er een mouse-over effect is?

Question

http://www.elsmannmakelaars.nl/pages/de/immobilienangebot/suchen-auf-karte.php

Toegevoegd na 1 minuut:
In de bron zie ik coordinaten staan maar hoe worden die bepaald?

coords="693,168,691,171,690,173,686,175,682,177,678,173,674,170,667,162,665,158,662,159,659,157,660,151,655,152,651,148,611,165,609,169,605,170,603,168,570,178,545,196,544,192,542,191,539,189,539,194,535,192,528,199,518,206,510,207,501,214,498,215,500,219,495,224,488,227,484,230,480,229,474,232,467,232,459,218,457,217,449,223,446,222,441,226,438,224,439,218,434,214,429,214,425,210,424,213,421,211,417,212,412,210,406,206,406,214,404,219,404,222,408,223,417,232,422,233,423,238,418,241,418,243,417,246,421,256,418,257,423,267,417,269,413,265,410,265,405,260,396,259,391,261,389,272,389,276,383,292,376,305,371,317,369,324,368,331,365,336,362,339,355,347,355,350,357,355,366,362,377,369,387,371,397,369,409,366,421,368,428,371,431,376,433,382,432,387,428,394,423,400,420,405,420,409,420,412,424,422,434,427,457,432,464,436,468,442,470,448,472,457,474,467,476,478,483,485,491,491,505,493,514,490,534,496,541,496,560,494,568,495,575,500,581,505,584,514,584,520,581,525,575,531,569,538,568,543,570,549,572,554,614,554,633,554,653,554,668,554,678,555,700,554,710,554,710,545,710,535,710,525,710,516,710,500,710,490,710,181,710,175,711,169,711,152,707,153,708,158,704,162,700,163,695,164"/>

 · Answer

Om met een javascript mouseover een plaatje of button te laten verspringen heb je minimaal twee image bestanden nodig. Naast het oorspronkelijke image bestand dien je daarbij ook een tweede image bestand te 'preloaden'. Als je dit nalaat loopt je mouseover image swap te traag en lijkt het effect nergens naar.

Voor de volledige tutorial verwijs ik je naar onderstaande bron;

Voor de volledige tutorial verwijs ik je naar onderstaande bron;

gvrox · Answer

Voor een uitleg over de coordinaten, zie http://www.handleidinghtml.nl/html/afbeeldingen/afbeeldingen11.html .  Als je op "imagemap area coords" googlet dan vind je nog veel meer info.

 · Answer

Dit heet een imagemap.

Je hebt er een achtergrond afbeelding voor nodig, plus deel-afbeeldingen die geladen worden zodra je met de muis over dat deel van de afbeelding gaat.

Het script op de door jou gevonden pagina is nodeloos ingewikkeld. Dat wordt vaak gedaan om kopiëren  te voorkomen.

Op onderstaande link kun je het script laten genereren met de afbeeldingen die je zelf wilt gebruiken.
Je hoeft het dan alleen nog maar te kopieren van hen.
http://www.image-maps.com/

Veel plezier.

Toegevoegd na 2 minuten:
Die coördinaten zijn nodig om aan te wijzen waar exact, op de pagina, de mouseOver afbeelding geladen moet worden. 
De nulpunten van die coordinaten zijn links boven, tenzij het script anders bepaald (om het ingewikkeld te maken zodat je niet zomaar kunt kopiëren).

Toegevoegd na 21 uur:
De coördinaten worden automatisch gegenereerd in een programma als Dreamweaver wanneer je daar via de interface een imagemap aan maakt met de polygoon-tool geselecteerd.
Dreamweaver kiest inderdaad links-boven als nulpunt / oorsprong van de coördinaten.

Hoe kan ik zo'n map maken? Waarbij je bepaalde delen aan kun klikken en dat er een mouse-over effect is?

Antwoorden (3)

Weet jij het beter..?