Bilder in HTML - Grundlagen
Grafiken bzw. Bilder werden in HTML mit dem Tag <img> eingebunden. Der Browser kann Grafik-Dateien im JPG-Format, im GIF-Format und im PNG-Format anzeigen.
Dazu wird als minimale Angabe das Attribut "src" benötigt, das auf die "Quelle" d.h. den Speicherort, erforderlichenfalls mit Pfadangabe, hinweist. Die Bilder bzw. Grafiken sollen so groß wie tatsächlich benötigt sein, um nicht unnötig Webspeicher zu verbrauchen oder die Ausgangsqualität zu verschlechtern. Ãœblicherweise werden sie in eigenen Ordnern (meistens mit "images" oder "bilder" benannt) abgelegt.
Besonders erwünscht sind in jedem Fall die Angaben für die Breite (Attribut "width"), Höhe (Attribut "height") und das Attribut "alt". Das Attribut "alt" gibt einen Hinweis auf das Bild, falls es aus irgend einem Grund nicht angezeigt werden kann und ist für barrierefreie Zugänge wichtig, weil Software beispielsweise Blinden den Inhalt des Attributes "alt" vorlesen kann.

Beispiel für absolutes Minimum:
<img src="images/bildname.jpg">;
Standardbeispiel mit Pfadangabe:
<img src="images/bildname.jpg" alt="Fachschule" width="200" height="100">

ImageMaps - Grundlagen
ImageMaps sind Bilder bzw. Grafiken, die im Gegensatz zu normalen Grafiken für den Benutzer unsichtbare Bereiche (Hotspots) enthält. Diese Hotspots können voneinander unabhängig mit Dateien verlinkt oder mit anderen Aktionen (zB über EventHandler) verknüpft werden.

Die Hotspots der Grafiken können drei verschiedene geometrische Formen haben:
[1] Kreis
[2] Rechteck
[3] Polygon (Vieleck)

Hotspots definieren
Die Hotspots der ImageMaps werden innerhalb des Tags <map> .... </map> definiert. Damit der Browser weiß, welche Map-Definition mit der Grafik verbunden werden soll, muss im Tag <img> der Wert des Attributs "usemap" mit dem Map-Namen übereinstimmen:
(zB <img src="bild1.jpg" usemap="#mapname" ....>
<map name="mapname" id="mapname">
... </map>).

Beispiel mit drei Hotspots (Rechteck, Kreis, Polygon):
<img src="images/wegweiser.jpg" alt="Wegweiser" name="tafel" width="400" height="104" border="0" usemap="#map_tafel" id="tafel">
<map name="map_tafel">
<area shape="rect" coords="282,45,387,96" href="rastsstation.html" alt="Raststation">
<area shape="circle" coords="172,26,15" href="ungarn.html" alt="nach Ungarn">
<area shape="poly" coords="53,29,41,44,41,94,60,96,98,32" href="abzweigung.html" alt="nach Graz oder Eisenstadt">
</map>