Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- html:bilder [2021/01/14 13:34] – [Imagemaps] lutz
+++ html:bilder [2021/01/14 14:26] (aktuell) – [Aufgaben] lutz
@@ Zeile 77: / Zeile 77: @@
 </code>
-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 definiert.
+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=====
@@ 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.
-Aufgabe 3
+**Aufgabe 3**
 Teste das Beispiel 3 zur Imagemap!
 {{ :html:beispielmap.jpg?linkonly |}}
+Aufgabe 4
+Erstelle entsprechend dem Erklärvideo eine eigene Imagemap mit mindestens 4 Links!