======Einbinden von Bildern - Imagemaps====== Natürlich können in HTML-Seiten auch Bilder eingebunden werden. Dazu verwendet man den ''%%%%''-Tag. Innerhalb des ''%%%%''-Tags wird mit dem Attribut ''%%%%'' die Bildqelle angegeben. Erlaubt sind die Dateiformate .jpg, .gif und png. Neben ''%%src%%'' gibt es für den ''%%%%''-Tag noch weitere Attribute: ^ Attribut ^ Wirkung^ | ''%%width='b'%%'' | Bild in der Breite b darstellen, b kann dabei in Prozent und in Pixeln angegeben werden, Wenn nur die Breite angegeben wird, wird die Höhe entsprechend skaliert.| | ''%%height='h'%%'' | Bild in der Höhe h darstellen, h kann dabei in Prozent und in Pixeln angegeben werden, Wenn nur die Höhe angegeben wird, wird die Breite entsprechend skaliert. | | ''%%align%%'' | horizontale Ausrichtung: left, center, right | | ''%%valign%%'' | vertikale Ausrichtung: top, middle | Die Verwendung wird in der folgenden Quelltext demonstriert: **Beispiel 1** Bilder

Hier ist ein Beispielbild: ,welches sich mitten im Text befindet.

Bilder können auch als Links benutzt werden. Dazu schreibt man den ''%%%%''-Tag in den ''%%%%''-Tag hinein. **Beispiel 2** Bilder

Ein Link auf mein liebstes Betriebssystem:

 Bilder können auch als Links benutzt werden. Dazu schreibt man den ''%%%%''-Tag in den ''%%%%''-Tag hinein. =====Imagemaps===== Imagesmaps sind Bilder von denen bestimmte Bereiche als Link verknüpft sind. Die folgende HTML-Datei demonstriert die Wirkungsweise: **Beispiel 3** Bilder

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: ''%%%%'' wird der name der Map festgelegt. In der Map werden jetzt die aktiven Bereiche: ''%%%%'' 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===== **Aufgabe 1** Teste die Beispiele 1 und 2. Probiere dabei verschiedene Bildattribute aus. (Das Bild tux.png muss im selben Ordner wie die HTML-Datei sein.) {{ :html:tux.png?linkonly |}} **Aufgabe 2** 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** Teste das Beispiel 3 zur Imagemap! {{ :html:beispielmap.jpg?linkonly |}} Aufgabe 4 Erstelle entsprechend dem Erklärvideo eine eigene Imagemap mit mindestens 4 Links!