HTML Grafiken

Grafiken einbinden
Image Maps
Mapping
Bereich
Mapping der Grafik zuordnen



Grafiken einbinden

Grafiken einbinden immer mit relativer Pfadangabe.

Die Attribute src, width, height, border und alt sollten immer gesetzt werden.
<img
src=""
width=""
height=""
border=""
alt="">
src="grafik.jpg|grafik.gif| grafik.png"
width="pixel"
height="pixel"
border="pixel"
alt="alternativer Text"
hspace="pixel"
vspace="pixel"
align="center|left|right|top| middle|bottom"
usemap="mapping-name"

Image Maps

Klickbare Bereiche auf Grafiken.

Innerhalb des <map>-Bereichs, der mit Hilfe des name-Attributes benannt werden muß, ..

.. definiert man mit dem <area>-Tag klickbare Bereiche (Rechteck, Kreis, Polygon).

Diese Bereiche werden mit Hilfe iher Koordinaten geometrisch beschrieben, ..

.. und verweisen auf ein beliebiges Ziel, hier datei.htm.

Das definierte Mapping wird nun mit dem usemap-Attribut über die Grafik gelegt.

Beispiel:

<map name="map-Name">
<area
shape="rect"
coords="x1,y1,x2,y2"
href="datei.htm">

<area
shape="circle"
coords="x,y,radius"
href="datei.htm">

<area
shape="polygon"
coords="x1,y1,x2,y2,x3,y3,.."
href="datei.htm">
</map>

<img src="grafik.jpg" usemap="#map-Name">
Mapping <map name="">
area-Definitionen
</map>

name="map-Name"
Bereich <area
href=""
shape=""
coords="">
shape="rect|circle|polygon"
coords=Wertzuweisung abhängig von shape - siehe Beispiel
href="Verweisziel"

Mapping der Grafik zuordnen <img
src=""
usemap="">

usemap="#map-Name"