Grafik mit Verweis - Webseitenbau

2.12.7 Grafik mit Verweis

1 Anklickbare Grafiken
2 Verweis-sensitive Grafiken (Image Maps)
3 Beispiele mit Icons
4 Beispiele mit Smileys
5 Beispiele mit Bildern

1 Anklickbare Grafiken

Darunter versteht man:

Wenn man mit dem Mauszeiger auf die Grafik klickt, wird ein Dokument geöffnet, das sich auf die Grafik bezieht.
Dies kann eine Beschreibung, eine Seite der eigenen oder einer fremden Website, ein Dokument oder eine grössere Darstellung des Bildes etc. sein.
Bei Grafiken als Verweise ist die Grafik die Darstellung des Menüs und der Verweis führt zur entsprechenden Seite der Website.

Bachmann: Anklickbare Grafiken

SELFHTML:
Grafiken als Verweise - Grafiken anstelle von Verweistext definieren
Beispiel: Navigationsleisten

2 Verweis-sensitive Grafiken (Image Maps)

a) Verweis-sensitive Grafiken definieren

Darunter versteht man:

In der Grafik sind verschiedene Bereiche auf die man mit dem Mauszeiger klicken kann.
Jeder Bereich öffnet ein anders Dokument oder mit einem Anker eine andere Textstelle in einem Dokument.
Typisches Beispiel ist eine Karte, bei Orte angeklickt werden können um Informationen über diesen Ort zu erhalten.

Bachmann: Verweis-sensitive Grafiken
Bachmann: Beispiel: Verweis-sensitive Grafiken

SELFHTML: Verweis-sensitive Grafiken definieren
SELFHTML: Beispiel: Schnell zur Stadt oder Region Ihrer Wahl!

Partl: Image-Maps

3 Beispiele mit Icons

a) Ikon ohne Verweis

Quelle des Icons
drweb.de: Gratis Icons und Buttons

b) Link im Icon zum grossen Bild auf dem Server

Das Icon öffnet ein Bild auf dem Server der Website
Der Link im Bild geht auf die Ursprungsdatei (mit Text)

Die Schweiz und ihre Kantone 
<a href="../../grafiken/laender/ch-kantone2.png">
<img src="../../grafiken/icon/lupe.png"
width="24" height="24" border="0" 
alt="Lupe 
24 x 24 Pixel"></a><br>

<a href="http://de.wikipedia.org/wiki/Schweiz">
<img src="../../grafiken/laender/ch-kantone1.png"
width="500" height="356" border="0" 
alt="Bild:KARTE schweiz verwaltungsgliederung.png 
500 x 356 Pixel"></a>

Die Schweiz und ihre Kantone

c) Link im Icon zum grossen Bild in der Ursprungsdatei

Das Icon öffnet ein Bild in der Ursprungsdatei
Der Link im Bild geht auf die Ursprungsdatei (mit Text)

Die Schweiz und ihre Kantone 
<a href="http://upload.wikimedia.org/wikipedia/commons/a/ae/KARTE_schweiz_verwaltungsgliederung.png">
<img src="../../grafiken/icon/lupe.png"
width="24" height="24" border="0" 
alt="Lupe 
24 x 24 Pixel"></a><br>

<a href="http://de.wikipedia.org/wiki/Schweiz">
<img src="../../grafiken/laender/ch-kantone1.png"
width="500" height="356" border="0" 
alt="Bild:KARTE schweiz verwaltungsgliederung.png 
500 x 356 Pixel"></a>

Die Schweiz und ihre Kantone

Quelle des Icons
drweb.de: Gratis Icons und Buttons

Quelle des Bildes
Wikipedia: Schweiz

d) Link im Icon zum grossen Bild auf dem Server

      Bordeaux, Miroir d'eau place de la Bourse
      <a href="../../grafiken/laender/fr-bordmiroir2.jpg">
      
      <img src="../../grafiken/icon/lupe.png"
      width="24" height="24" border="0" 
      alt="Lupe 
      24 x 24 Pixel"></a><br>

      <a href="http://en.wikipedia.org/wiki/Bordeaux#Main_sights">
      <img src="../../grafiken/laender/fr-bordmiroir1.jpg"
      width="600" height="401" border="0" 
      alt="Miroir d'eau place de la Bourse
      800 × 535 pixels"></a>

Bordeaux, Miroir d'eau place de la Bourse

4 Beispiele mit Smileys

⇒ Siehe auch "HTML/Grafik/Bilderquellen"
⇒ Siehe und "Internet-Grundlagen/E-Mail/Smiley"

Smiley mit Link auf die Website des Herstellers

1) Quelltext:
Das Bild ist auf dem Server dieser Website
(inkl. Zusatzangaben "with" etc. damit dies auch im Internet-Explorer ohne Rahmen angezeigt wird)

<a href="http://www.smileygarden.de>
<img src="../../grafiken/smiley/gelb80.gif"
width="80" height="80" border="0" 
alt="Grosses Smiley
80 x 80 Pixel animiert in 2 Frames">
</a>

2) Anzeige auf der Websitee:

Beispiel mit Link auf das Internet-Vademecum

1) Quelltext:

<a href="http://vademecum.brandenberger.eu/>
<img src="../../grafiken/smiley/gelb80.gif"
width="80" height="80" border="0" 
alt="Grosses Smiley
80 x 80 Pixel animiert in 2 Frames">
</a>

2) Anzeige (als Klick-Button):

Smileys mit Link auf das entsprechende Land in Internet-Erkunden: Länder

Smileygarden.de: Smileys: Flaggen

5 Beispiele mit Bildern

a) Kleines Bild nicht anklickbar (aus Wikipedia)

<img src="../../grafiken/laender/ch-kantone1.png"
width="500" height="356" border="0" 
alt="Bild:KARTE schweiz verwaltungsgliederung.png 
500 x 356 Pixel">

Bild:KARTE schweiz verwaltungsgliederung.png
500 x 356 Pixel

b) Grosses Bild nicht anklickbar (aus Wikipedia)

<img src="../../grafiken/laender/ch-kantone2.png"
width="1024" height="729" border="0" 
alt="Bild:KARTE schweiz verwaltungsgliederung.png 
1'024 x 729 Pixel">

Bild:KARTE schweiz verwaltungsgliederung.png
1'024 x 729 Pixel

c) Bild mit Links auf die fremde Ursprungsseite

<a href="http://de.wikipedia.org/wiki/Schweiz">
<img src="../../grafiken/laender/ch-kantone1.png"
width="500" height="356" border="0" 
alt="Bild:KARTE schweiz verwaltungsgliederung.png 
500 x 356 Pixel"></a>

d) Link im Bild auf das grosse Bild auf dem Server

Die Schweiz und ihre Kantone<br>
(Vergrössern: auf das Bild klicken)<br> 	
<a href="../../grafiken/laender/ch-kantone2.png">
<img src="../../grafiken/laender/ch-kantone1.png"
width="500" height="356" border="0" 
alt="Bild:KARTE schweiz verwaltungsgliederung.png 
500 x 356 Pixel"></a>

Die Schweiz und ihre Kantone
(Vergrössern: auf das Bild klicken)

e) Link im Bild auf das grosse Bild in der Ursprungsdateir

Die Schweiz und ihre Kantone<br>
(Vergrössern: auf das Bild klicken)<br> 	
<a href="http://upload.wikimedia.org/wikipedia/commons/a/ae/KARTE_schweiz_verwaltungsgliederung.png">
<img src="../../grafiken/laender/ch-kantone1.png"
width="500" height="356" border="0" 
alt="Bild:KARTE schweiz verwaltungsgliederung.png 
500 x 356 Pixel"></a>