Einbinden von Bildern - Imagemaps

Natürlich können in HTML-Seiten auch Bilder eingebunden werden. Dazu verwendet man den <img>-Tag. Innerhalb des <img>-Tags wird mit dem Attribut <src> die Bildqelle angegeben. Erlaubt sind die Dateiformate .jpg, .gif und png.

Neben src gibt es für den <img>-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

<!DOCTYPE html>
 
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title> Bilder </title>
  </head >
  <body>
    <p>Hier ist ein Beispielbild: <img  width='200' src='tux.png'> ,welches sich mitten im Text befindet. </p>
  </body>
</html>

Bilder können auch als Links benutzt werden. Dazu schreibt man den <img>-Tag in den <a>-Tag hinein.

Beispiel 2

<!DOCTYPE html>
 
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title> Bilder </title>
  </head >
  <body>
    <p>Ein Link auf mein liebstes Betriebssystem:</p>
    <a href="http://www.kernel.org"><img width=100 src="tux.png"></a>
  </body>
</html>

Bilder können auch als Links benutzt werden. Dazu schreibt man den <img>-Tag in den <a>-Tag hinein.

Imagemaps

Imagesmaps sind Bilder von denen bestimmte Bereiche als Link verknüpft sind. Die folgende HTML-Datei demonstriert die Wirkungsweise:

Beispiel 3

<!DOCTYPE html>
 
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title> Bilder </title>
  </head >
  <body>
    <p align="center"><img width="718" height="539" border="0" usemap="#Map" src="beispielmap.jpg"></p>
    <map name="Map"> 
      <area shape="circle" coords="550,430,40" href="http://www.wikipedia.de">
      <area shape="circle" coords="333,222,40" href="http://www.google.de">
      <area shape="circle" coords="590,90,40" href="http://www.facebook.de">
      <area shape="circle" coords="135,390,40" href="http://www.youtube.de">
    </map>
  </body>
</html>

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

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

tux.png

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!

beispielmap.jpg

Aufgabe 4

Erstelle entsprechend dem Erklärvideo eine eigene Imagemap mit mindestens 4 Links!