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)
Weiterlesen...
 

Webdesign, Photoshop, Joomla!, Templates

In Zukunft findet Ihr hier verschiedenste Tutorials und Hilfen in den Bereichen Webdesign (HTML, CSS, PHP, Templates, Joomla, uvm.) und Photoshop.
Einmal möchte ich euch über aktuelle Themen in diesen beiden Bereichen informieren und natürich will ich euch helfen eure Kenntnisse zu erweitern und zu verbessern.

Wie in anderen Blogs auch habt Ihr die Möglichkeit hier Kommentare zu den Einträgen zu schreiben. Auf Fragen antworte ich natürlich gerne.

Weiters biete ich auf meiner Seite auch kostenloste Templates an! Diese könnt Ihr euch downloaden und für eure Webpages verwenden. Hauptsächlich werdet Ihr hier kostenlose Templates für Joomla! finden, jedoch habe ich auch vor welche für simple Webseiten zu basteln (also ohne CMS).
Die kostenlosen Templates findet Ihr hier.

{googleAds}
<script type="text/javascript"><!--
google_ad_client = "ca-pub-2717861494506240";
/* 2 Text anzeigen für Inhalt */
google_ad_slot = "1853105335";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
{/googleAds}

 

 
<< Start < Zurück 11 12 Weiter > Ende >>

Seite 12 von 12