Eine Grafik können Sie mit <img src="(Grafik-Datei)"> in ein HTML-Dokument einbinden.
Verwendung finden im WWW die Grafikformate GIF und JPEG als neues Format wird noch PNG verwendet. Wenn Sie eine Grafik auf diese Weise referenzieren muß sich die Grafik in dem selben Verzeichnis befinden wie das HTML-Dokument.
Um einen Grafik in einem anderen Verzeichnis zu referenzieren können Sie vor den Namen der Grafik-Datei einen relativen oder absoluten Pfad angeben.
Ihre Seite liegt im Verzeichnis »c:\homepage« und die Grafik liegt im Verzeichnis »c:\homepage\bild« dann würde die relative Grafikreferenz so aussehen:
<img src="bild/MeinBild.gif">
und so würde z. B. der absolute Pfad aussehen:
<img src="file://localhost/c:/homepage/bild/MeinBild.gif">
Um eine Grafik auf einem anderen Server zu referenzieren geben Sie einfach die URL und den Pfad der Grafik vor dem Namen der Grafik-Datei ein.
<img src="http://ourworld.compuserve.com/Homepages/Dirk_Brüderle/wasch.gif>
Um einen Text anzuzeigen wenn die Grafik nicht vorhanden ist verwenden Sie die Angabe alt="(Alternativer Text)" innerhalb der Grafikreferenz.
<img src="KeinBild.gif" alt="Kein Bild vorhanden!">
Anzeigebeispiel
Sie können um einen Grafik einen Rahmen definieren.
<img src="(Grafik-Datei)" border=(Wert)>
Anzeigebeispiel
Durch die Angabe von height=(Wert) und width=(Wert) können Sie die Größe der Grafik festlegen. Dies hat den Vorteil Vorteil das der Browser den Platz für eine Grafik freihält. Außerdem können Sie damit eine Grafik skalieren.
Height steht für die Höhe der Grafik und width steht für die Breite der Grafik.
<img src="platzda.jpg" height=512 width=768><img src="platzda.jpg" height=100 width=150>
Anzeigebeispiel
Sie können eine Grafik beschriften, dazu wird das Element align=(Ausrichtung) verwendet.
Folgende Werte sind für align in Grafiken zulässig:
top |
Der folgende Text wird am oberen Rand der Grafik ausgerichtet |
middle |
Der folgende Text wird mittig der Grafik ausgerichtet |
bottom |
Der folgende Text wird am unteren Rand der Grafik ausgerichtet |
texttop |
Der folgende Text wird am oberen Rand der Grafik ausgerichtet auch wenn im Text noch weitere Elemente vorkommen z.B. eine weitere Grafik |
absmiddle |
Der folgende Text wird mittig der Grafik ausgerichtet auch wenn im Text noch weitere Elemente vorkommen z.B. eine weitere Grafik |
absbottom |
Der folgende Text wird am wird am unteren Rand der Grafik ausgerichtet auch wenn im Text noch weitere Elemente vorkommen z.B. eine weitere Grafik |
<img src="img0001.gif" align=bottom> Böblinger Stadtkirche
Anzeigebeispiel
Sie können Text um eine Grafik herumfließen lassen, dazu wird das Element align=(Ausrichtung) verwendet.
Folgende Werte sind für align in Grafiken zulässig:
left |
Der Text wird links der Grafik angezeigt |
right |
Der Text wird rechts der Grafik angezeigt |
Wenn Sie möchten das weiterer Text unterhalb einer Grafik fortgesetzt wird, können Sie das Zeilenumbruch-Tag mit der der Zusatzangabe clear=all verwenden.
<br clear=all>
Erlaubt ist auch <br clear=left> und <br clear=right>.
Mit den Angaben hspace=(Wert) und vspace=(Wert) können Sie den horizontalen und vertikalen Abstand zwischen dem Bildrand und dem Text festlegen.
<img src="park.jpg" border=0 align=left hspace=15 vspace=15>
Für eine Grafik kann man einen Namen festlegen, der Name einer Grafik kann dann für JAVA-Script verwendet werden um um z.B. die Grafik direkt anzusprechen.
<img src="(Grafik-Datei)" name="Bild1">
Sie können auch Grafiken als Schaltflächen für Verweise einsetzen. Um dies zu ermöglichen setzen Sie einfach einfach anstelle des Textes die Grafik als Hinweis ein.
<a href="drei1.htm"><img src="RECHTS1.GIF" alt="Weiter zur naechsten Seite"></a>
Grafiken mit Verweissensitiven Flächen, sind Grafiken in denen ein Anwender auf ein Detail einer Grafik klicken kann und er damit wie mit einem Verweis auf eine andere Seite wechseln kann. Diese Map-Grafiken können Sie z.B. für Navigationsleisten verwenden.
Bei Client Side Maps übernimmt der Browser die Verwaltung der anklickbaren Flächen. Dazu müssen Sie eine MAP in in Ihrem Dokument definieren. Der Nachteil dieses Verfahrens ist das ältere Browser mit solch einer Client Side Map nichts anfangen können. Sie sollten also die verweise auch als normale Verweise in Ihrem Dokument anbieten.
Ein MAP-Bereich wird wie folgt definiert:
<map name="Bild">
<!-- Damit legen Sie den MAP-Namen fest -->
<area shape=polygon coords="8,0,99,93,192,2,8,0" href="l1.htm">
<!-- Dies ist ein MAP-Bereich der bei der Anzeige verwendet wird -->
<area shape=polygon coords="199,7,199,195 106,99,199,7" href="http://www.demo.de">
<area shape=polygon coords="98,107,199,201,5,201,98,107" href="../l3.htm">
<area shape=polygon coords="0,7,93,101,0,193,0,7" href="l4.htm" target="Fenster">
</map>
<!-- Hier endet der MAP-Bereich -->
In Map-Bereichen können Sie alle Arten von Verweisen notieren.
Nun müssen Sie nur noch die MAP dem Bild zuweisen. Dazu erweitern Sie das Grafik-Tag um folgendes.
<img src="map.gif" usemap="#Bild" border=0>
Die einzelnen anklickbaren Bereiche (area) können Sie folgendermaßen festlegen:
Ein Rechteck definieren Sie mit dem Koordinaten für die Eckpunkte
<area shape=rect coords="x1,y1,x2,y2" ...
x1 = linke obere Ecke, Pixel werden von links gezählt
y1 = linke obere Ecke, Pixel werden von oben gezählt
x2 = rechte untere Ecke, Pixel werden von links gezählt
y2 = rechte untere Ecke, Pixel werden von oben gezählt
Einen Kreis definieren Sie mit den Koordinaten für den Mittelpunkt und den Radius
<area shape=circle coords="x,y,r" ...
x = Mittelpunkt, Pixel werden von links gezählt
y = Mittelpunkt, Pixel werden von oben gezählt
r = Radius des Kreises in Pixel
Ein Polygon (Vieleck) definieren Sie mit den Koordinaten der einzelnen Eckpunkte
<area shape=polygon coords="x1,y1,x2,y2 ... xn,yn" ...
x1..n = Pixel einer Ecke von links gezählt
y1..n = Pixel einer Ecke von oben gezählt
Sie können so viele Ecken definieren wie Sie wollen. Von der letzten definierten Ecke müssen Sie sich
eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt dann das Polygon
Server Side Maps werden auf dem Serverrechner abgelegt. Diese Maps sind nur Online verfügbar. Um eine Server Side Map abzulegen müssen Sie mit Ihrem Provider abklären welches Format die Map verwendet. Der Vorteil dieses Verfahren ist das ältere Browser dieses Verfaren anwenden können.
Zurück