Einer meiner aktuellen Aufträge umfasste die Erstellung einer Image-Map für Berlin. Ziel ist es dabei die einzelnen Bezirke ansteuern zu können. Nachdem ich die Hotspots in Fireworks erstellt und in Dreamweaver importiert hatte, bin ich auf die Problematik gestoßen die einzelnen Bezirke mit einem Rollover Effekt zu versehen. Hier meine Vorgehensweise:
- Ich füge ich den einzelnen Hotspots den Hyperlink hinzu, indem ich im Tag <area> die Event-Handler onmouseover und onmouseout verwende
- Der Javascript Code , der in den <Head> eingefügt wird:
<script type="text/javascript">
<!-- rollover = newImage(); -->
</script>
- Im <Body> sollte dann zusammengefasst und exemplarisch folgendes stehen:
<img src="swiss-map.jpg" alt="map" usemap="map" id="map" />
<map name="swiss-map" id="rollover">
<area shape="rect" coords="37,112,453,341" href="kreuzberg.html"
onmouseover="map.src='kreuzberg.jpg';" onmouseout="map.src='swiss-map.jpg';" />
</map>
Deie fertige Imagemap aus dem Auftrag einsehen.
Ach, und wen ich dabei erwischen sollte, dass er diese Karte klaut.. der kann was erleben! Nee, quatsch über bitte vorher eine kurze Info an mich und ein Backlink wäre auch schön!;)
8. Januar 2012 um 15:01 Uhr
Hey, vielen vielen Dank! :D
Es hat zwar nicht auf Anhieb geklappt, aber als ich dann den Quelltext von dem Beispiel zur Hand genommen hab, ging es (ich glaub weil man “rollover” als map name eintragen muss, aber ich bin mir nicht sicher).
Wenn ich dran denk, poste ich noch das Ergebnis (wenn ich die Page je fertig bekomme …).
Grüßchen =]