 Image-Links in HTML Dokumenten
Links mit einem Bild als Klickfläche. Bei einem Link muss nicht unbedingt ein Text als anklickbarer Bereich eingetragen sein. Man kann auch Bilder (Images) an Stelle des Textes notieren.
|
|
Grafik als Verweisfläche
Anders als im üblichen Textverweis ...
<a href="winterzeit.htm"> Linktext </a>
... können sie statt des (roten) Textes nun eine Grafik einbinden. Sie ersetzen den Text "Linktext" durch die Notierung eines Images.
<a href="winterzeit.htm">  </a>
<a href="winterzeit.htm">
<img src="winterzeit.gif" width="120" height="94" border="1" alt="">
</a>
Was dann als echter Link so aussieht:
Wenn sie Informationen zur Zeitumstellung lesen möchten,
klicken sie auf des Uhrensymbol rechts.
|
|
Neben dem Code für das Image könnte man zusätzlich noch einen Text eingetragen:
<a href="winterzeit.htm">
<img src="winterzeit.gif" width="120" height="94" border="1" alt="">
<br>Info zur Winterzeit
</a>
Was dann als echter Link so aussieht:
Wenn sie Informationen zur Zeitumstellung lesen möchten,
klicken sie auf des Uhrensymbol rechts.
Grafik und Text dient nun als Verweisfläche. Eine evtl. mit CSS festgelegte Farbangabe für MouseOver (hover) wird ebenfalls wirksam.
|
Info zur Winterzeit
|
typisches Beispiel
Download des kostenlosen Adobe Reader von der Adobe-Homepage. (Dort kann auch das Symbol „Get Adobe Reader“ ohne vertragliche Vereinbarung heruntergeladen werden).
<a target="_blank"
href="http://www.adobe.com/de/products/acrobat/readstep2.html">
Image-Tag hier notieren
</a>
Title-Attribut
Empfehlenswert ist der Eintrag des Title-Attributs für den Link und die Grafik (zusätzlich zum 'alt-Attribut')! Bei Mousover wird der eingetragene Text angezeigt.
<img title="zur Downloadseite" src="reader.gif" width="112" height="33" .. >
| 
Home • Verweise • Grafik als Verweis