9. Juni 2008
Imagemaps
Imagemaps sind clientseitige Bilder mit anklickbaren Regionen (’Hotspots’), die zu einer anderen HTML-Seite bzw. URL referenzieren.
Legen Sie dazu eine normale Bilddatei im Format jpg oder gif an, speichern diese in Ihrem lokalen Imageordner der Website. Anschließend verwenden Sie das HTML-Containerelement map, um die Image Map und die anklickbaren Regionen (area) zu definieren. Das map-Element hat die Aufgabe, einen Namen (Attribute name und id) zu definieren, auf den das Attribut usemap des IMG-Elementes verweist. So wird ein normales IMG in eine clientseitige Imagemap verwandelt.
Mit Dreamweaver: Zuerst ein Bild einfügen (> Einfügen > Bild). Dann der Map einen Namen geben, die Form des shape (Rechteck, Kreis, Polygon) auswählen und schließlich die Koordinaten auf der Image Map abstecken.
Das Ergebnis könnte im HTML-Code dann bespielsweise so aussehen:
<body>
....
<img src ="/images/webkarte.jpg" width="325" height="250"
border="0" alt="Navigationskarte" usemap ="#mymap" />
<map id ="mymap" name="mymap">
<area shape ="rect" coords ="70,60,110,131"
href ="neue-seite.html" alt="Vita - about me" />
<area shape ="poly" coords = "45,45,100,80,80,80,80,90,70"
href =http://www.hgb-leipzig.de alt="HGB" />
<area shape ="poly" coords ="125,80,125,100,200,90,215,70"
href ="arbeiten.html" alt="Arbeiten" />
</map>
...
Anwendungsbeispiele:
Zur ergänzenden, optionalen Website-Navigation, Länderauswahlkarten, technische Dokumentationen.
