Wiki zum Unterricht

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
======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**

<code html>
<!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>
</code>

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

**Beispiel 2**

<code html>
<!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>
</code>

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**

<code html>
<!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>
</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: ''%%<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=====

**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!