Benutzer-Werkzeuge

Webseiten-Werkzeuge


html:bilder

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste Überarbeitung
Vorhergehende Überarbeitung
html:bilder [2021/01/14 13:40] – [Imagemaps] lutzhtml:bilder [2021/01/14 14:26] (aktuell) – [Aufgaben] lutz
Zeile 78: Zeile 78:
  
 Zunächst wird das Bild mit exakter Höhe und Breite dargestellt. Mit dem Attribut ''%%usemap="#Map"%%'' wird das Bild mit der Map verknüpft. Im öffnenden Tag der Map:  ''%%<map name="Map">%%'' wird der name der Map festgelegt. In der Map werden jetzt die aktiven Bereiche: ''%%<area shape="circle" coords="550,430,40" href="http://www.wikipedia.de">%%'' definiert. Das Attribut ''%%shape%%'' legt die Art des Bereichs fest: (kreisförmig - circle, rechteckig - rectangle). Mit ''%%coords%%'' werden die Koordinaten des bereichs festgelegt, bei einem Kreis der Mittelpunkt und der Radius. Mit ''%%href%%'' wird das Linkziel festgelegt. Zunächst wird das Bild mit exakter Höhe und Breite dargestellt. Mit dem Attribut ''%%usemap="#Map"%%'' wird das Bild mit der Map verknüpft. Im öffnenden Tag der Map:  ''%%<map name="Map">%%'' wird der name der Map festgelegt. In der Map werden jetzt die aktiven Bereiche: ''%%<area shape="circle" coords="550,430,40" href="http://www.wikipedia.de">%%'' definiert. Das Attribut ''%%shape%%'' legt die Art des Bereichs fest: (kreisförmig - circle, rechteckig - rectangle). Mit ''%%coords%%'' werden die Koordinaten des bereichs festgelegt, bei einem Kreis der Mittelpunkt und der Radius. Mit ''%%href%%'' wird das Linkziel festgelegt.
 +
 +====Erklärvideos zur Imagemap====
 +
 +{{youtube>BMQLLhGUVxs}}
 +
  
 =====Aufgaben===== =====Aufgaben=====
Zeile 91: Zeile 96:
 Lade dir sich aus dem Internet ein Bild herunter, welches zu deiner Lieblingseite im Internet passt. Erzeuge entsprechend dem Beispiel 2 eine HTML-Seite, in der man über einen Bildlink zu ihrer Lieblingsseite gelangt. Lade dir sich aus dem Internet ein Bild herunter, welches zu deiner Lieblingseite im Internet passt. Erzeuge entsprechend dem Beispiel 2 eine HTML-Seite, in der man über einen Bildlink zu ihrer Lieblingsseite gelangt.
  
-Aufgabe 3+**Aufgabe 3**
  
 Teste das Beispiel 3 zur Imagemap! Teste das Beispiel 3 zur Imagemap!
  
 {{ :html:beispielmap.jpg?linkonly |}} {{ :html:beispielmap.jpg?linkonly |}}
 +
 +Aufgabe 4
 +
 +Erstelle entsprechend dem Erklärvideo eine eigene Imagemap mit mindestens 4 Links!
html/bilder.1610628026.txt.gz · Zuletzt geändert: von lutz