Imagemap in Dreamweaver

imagemapMöchte man in Bildbereichen Links einbauen (zB eine Person in einem Bild markieren und einen Link darauf legen) löst man dies am einfachsten mit Imagemaps.

Dreamweaver bietet hier sehr gute Funktionen - durch Klick auf das gewünschte Bild erscheinen ganz links unten in der Eigenschaftsleiste die notwendigen Buttons und Felder.
Im Feld Map kann man den Namen der "Imagemap" eintragen - dies kennzeichnet die Zusammengehörigkeit zwischen Bild und Map-Code. Standardmäßig ist der Mauszeiger aktiv.

Das erste Tool - "Rechteckiger Hotspot" - ermöglicht das aufziehen eines einfachen Viereckes um den gewünschten Bereich zu definieren. Das zweite - "Ovaler Hotspot" - erzeugt einen Kreis bzw. ein Oval beim aufziehen. Interessanter ist das letzte Tool - "Mehreckiger Hotspot" - mit diesem Imagemap-Tool imagemap-dreamweaverkann man die Eckpunkte des Bereiches selbst definieren und so eigene Formen markieren und verlinken.

Tipp/Hinweis: Der Mehreckige Hotspot funktioniert nicht, wenn das Stylesheet umfangreicher und komplexer wird und das Bild zum Beispiel absolute positioniert ist.
Am einfachsten lässt sich das lösen, indem man das Bild in einer eigenen Datei nochmals öffnet und einfügt und dort die Imagemap erstellt und sich anschließend den entsprechenden Code in die eigentliche Datei kopiert.
{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* Links - content */
google_ad_slot = "6814663901";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}
Also folgender Code:

  • die id="#Map" vom img Tag: diesen Teil einfach wieder im eigentlichen Bild ans Ende des img Tags einfügen.Statt "Map" könnt Ihr dann natürlich einen eigenen Begriff wählen - diesen dann aber auf alle Fälle im img Tag und bei <map id="Map"> tauschen!
  • alles angefangen bei <map> bis </map> (diesen <map> Teil einfach vor </body> setzen)

Weiter empfehlen

E-Mail

Link auf diesen Beitrag setzen:
http://www.l-design.at/webdesign-tutorials/52-imagemap-in-dreamweaver.html