Bilder

Bilder können in eine HTML-Seite mittels des img-Elements eingebunden werden. Das Element ist inhaltsleer und enthält einige Attribute, um Informationen über das einzubindende Bild zu spezifizieren.

Das src-Attribut gibt die URL zu der Bilddatei an. Hier kann der Link zu einem Bild vom Typ JPG, PNG, BMP, SVG und anderen Typen angegeben werden. Über die width- und height-Attribute können wir die Größe des Bildes festlegen. Werden beide Angaben weggelassen, so wird das Bild in Originalgröße angezeigt. Bei der Angabe des Attributs width oder height wird der fehlende Wert automatisch berechnet. Dabei wird das Seitenverhältnis beibehalten. Das Attribut title gibt den Titel des Bildes an, welcher beim Darüberfahren mit der Maus angezeigt wird. Über das alt-Attribut können wir den Alternativtext des Bildes festlegen. Dieser wird angezeigt, wenn das Bild nicht geladen werden kann (z. B. wenn das Bild nicht vorhanden ist). Das alt- und title-Attribut wird unter anderem auch von Suchmaschinen verarbeitet. Die Angabe der Attribute src und alt sind Pflicht. Alle anderen Attribute sind optional.

<img src="/Bilder/Logo/Logo.jpg" alt="Logo" title="Logo von Homepage-Webhilfe" width="200" height="200" />

Bilder mit Verweisen

Wollen wir Bilder einbinden und dort einen Link platzieren, so können wir den img-Tag (Abkürzung für image) innerhalb eines a-Elements notieren. Doch dadurch können wir nur dem gesamten Bild einen einzigen Link zuweisen. Was machen wir nun, wenn das Bild mehrere klickbare Bereiche haben soll oder nur ein bestimmter Bereich als Link dienen soll? Für solche Zwecke gibt es das map-Element, mit welchem wir sogenannte image-maps definieren können. map-Elemente besitzen das name-Attribut, welches angegeben werden muss. Der dortige Name ist frei definierbar, muss jedoch eindeutig für die Seite sein. Das Attribut dient zur Verbindung der image-map mit dem img-Element. Innerhalb des map-Elements werden area-Elemente platziert, welche wir im nächsten Abschnitt vorstellen werden.

<map name="ImageMap">
    
</map>

Das leere area-Element wird zur Definition eines (klickbaren) Bereichs in einem Bild verwendet. area-Elemente werden innerhalb des map-Elements notiert und können unterschiedliche Formen haben. Die Form wird dabei mit dem shape-Attribut angegeben. Die Koordinaten der Form werden im coords-Attribut angegeben.

Um eine rechteckige Form zu definieren, brauchen wir den Wert rect im shape-Attribut. Im coords-Attribut wird zuerst die Ecke oben links angegeben und anschließend die Ecke unten links. Die X- und Y-Werte werden mit einem Komma voneinander getrennt.

<area shape="rect" coords="x1,y1,x2,y2" />

Wollen wir einen kreisförmigen Bereich definieren, so benötigen wir den Wert circle im shape-Attribut. Das coords-Attribut enthält die Koordinaten des Kreis-Mittelpunkts gefolgt vom Kreisradius. Auch hier werden die Werte durch Kommas getrennt.

<area shape="circle" coords="x,y,r" />

Die 3. und letzte Form ist das Polygon (Vieleck). Der Wert für das shape-Attribut ist hier poly. Das coords-Attribut enthält alle Punkte des Vielecks, wovon immer zuerst der X-Wert und anschließend der Y-Wert angegeben werden muss. Alle Werte müssen, wie bei den anderen Formen auch, durch Kommas getrennt werden.

<area shape="rect" coords="x1,y1,x2,y2,x3,y3,...,xn,yn" />

Um unserem area-Element nun noch einen Link hinzuzufügen, gibt es, wie beim a-Element, das href-Attribut. Wird dieses angegeben, so muss auch das alt-Attribut angegeben werden, welches wie beim img-Element einen Alternativtext enthalten sollte. Auch die Angabe eines Titels mittels des title-Attributs ist möglich. Das title-Attribut steht übrigens auch bei allen anderen HTML-Elementen zur Verfügung.

Um unserem Bild die image-map zuzuweisen, benötigen wir im img-Element das usemap-Attribut. Hier wird das #-Zeichen, gefolgt von dem im name-Attribut des name-Elements notierten Namen, angegeben.

<img src="/Bilder/Banner/Start-Banner.jpg" usemap="#BannerMap" alt="Banner" title="Banner der Webseiten von Homepage-Webhilfe" width="800" height="100" />
<map name="BannerMap">
	<area shape="circle" coords="50,50,45" href="https://www.homepage-webhilfe.de/" alt="Logo" title="Startseite" />
	<area shape="rect" coords="180,25,700,75" href="https://www.homepage-webhilfe.de/" alt="Schriftzug" title="Startseite" />
</map>