2.14.7 Grafik mit Verweis
- 1 Anklickbare Grafiken
- 2 Beispiele mit Bildern
- 3 Beispiele mit Icons
- 4 Beispiele mit Smileys
- 5 Verweis-sensitive Grafiken (Image Maps)
Webdesign:
Lupe
Webdesign:
Smiley
⇧ 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.
-
SELFHTML
de Grafiken als Verweise - Grafiken anstelle von Verweistext definieren
de Beispiel: Navigationsleisten
- Bachmann (via Wayback) de Anklickbare Grafiken
⇧ 2 Beispiele mit Bildern
- Beispiel 1: Kleines Bild nicht anklickbar (aus Wikipedia)
- Beispiel 2: Grosses Bild nicht anklickbar (aus Wikipedia)
- Beispiel 3: Bild mit Link auf eine fremde Website
- Beispiel 4: Link im Bild auf das grosse Bild auf dem Server dieser Website
↑ Beispiel 1: Kleines Bild nicht anklickbar (aus Wikipedia)
1) Angabe im Quelltext
<img src="../../grafiken/laender/ch-kantone1.png" width="500" height="356" border="0" alt="Bild:KARTE schweiz verwaltungsgliederung.png 500 x 356 Pixel">
2) Anzeige im HTML-Dokument
↑ Beispiel 2: Grosses Bild nicht anklickbar (aus Wikipedia)
1) Angabe im Quelltext
<img src="../../grafiken/laender/ch-kantone2.png" width="1024" height="729" border="0" alt="Bild:KARTE schweiz verwaltungsgliederung.png 1'024 x 729 Pixel">
2) Anzeige im HTML-Dokument
↑ Beispiel 3: Bild mit Link auf eine fremde Website
1) Angabe im Quelltext
Bild aus Wikipedia<br> Zum Öffnen der fremden Website: auf das Bild klicken)<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>
2) Anzeige im HTML-Dokument
Bild aus Wikipedia
(Zum Öffnen der fremden Website: auf das Bild klicken)
↑ Beispiel 4: Link im Bild auf das grosse Bild auf dem Server dieser Website
1) Angabe im Quelltext
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>
2) Anzeige im HTML-Dokument
Die Schweiz und ihre Kantone
(Vergrössern: auf das Bild klicken)
e) Link im Bild auf das grosse Bild in einer fremden Website
1) Angabe im Quelltext
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>
2) Anzeige im HTML-Dokument
Die Schweiz und ihre Kantone
(Vergrössern: auf das Bild klicken)
⇧ 3 Beispiele mit Icons
- Beispiel 1: Ikon ohne Verweis
- Beispiel 2a: Link im Icon zum grossen Bild auf dem Server dieser Website
- Beispiel 2b: Link im Icon zum grossen Bild auf dem Server dieser Website
- Beispiel 3: Link im Icon zum grossen Bild in einer fremden Website
↑ Beispiel 1: Ikon ohne Verweis
1) Angabe im Quelltext
<p> <img src="../../grafiken/icon/lupe.png" width="24" height="24" border="0" alt="Lupe 24 x 24 Pixel"> </p>
2) Anzeige im HTML-Dokument
↑ Beispiel 2a: Link im Icon zum grossen Bild auf dem Server dieser Website
- Das Icon (Lupe) öffnet ein Bild auf dem Server dieser Website
1) Angabe im Quelltext
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>
2) Anzeige im HTML-Dokument
- Beim Klicken auf das Icon (Lupe) öffnet sich das grosse Bild
- Das grosse Bild befindet sich auf dem Server dieser Website.
Die Schweiz und ihre Kantone
↑ Beispiel 2b: Link im Icon zum grossen Bild auf dem Server dieser Website
1) Angabe im Quelltext
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>
2) Anzeige im HTML-Dokument
- Beim Klicken auf das Icon öffnet sich das grosse Bild.
- Das grosse Bild befindet sich auf dem Server dieser Website.
Bordeaux, Miroir d'eau place de la Bourse
Webdesign:
Lupe
↑ Beispiel 3: Link im Icon zum grossen Bild in einer fremden Website
- Das Icon öffnet ein Bild in einer fremden Website.
1) Angabe im Quelltext
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>
2) Anzeige im HTML-Dokument
- Beim Klicken auf das Icon öffnet sich das grosse Bild.
- Das grosse Bild befindet sich in einer fremden Datei auf einer fremden Website des Internets.
Die Schweiz und ihre Kantone
Webdesign:
Lupe
⇧ 4 Beispiele mit Smileys
- Beispiel 1: Smiley mit Link auf die Website des Herstellers
- Beispiel 2: Smiley mit Link auf das Internet-Vademecum
- Beispiel 3: Smileys mit Link auf das entsprechende Land im Internet-Vademecum/Erkunden
Webdesign:
Smiley
↑ Beispiel 1: Smiley mit Link auf die Website des Herstellers
1) Angabe im Quelltext
<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 im HTML-Dokument
↑ Beispiel 2: Smiley mit Link auf das Internet-Vademecum
1) Angabe im 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 im HTML-Dokument
Anzeige als Klick-Button
(Beim Klicken auf das Smiley öffnet sich das Internet-Vademecum)
↑ Beipiel 3: Smileys mit Link auf das entsprechende Land im Internet-Vademecum/Erkunden
Mit Verweis auf die entsprechenden Länder im Internet-Vadenecum
Webdesign:
Smiley
⇧ 5 Verweis-sensitive Grafiken (Image Maps)
- a) Verweis-sensitive Grafiken definieren
- b) Server-seitige verweis-sensitive Grafiken
- c) Referenzieren von sensitiven Bereichen
↑ 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.
-
Verweis-sensitive Grafiken
Beispiel: Verweis-sensitive Grafiken
-
SELFHTML
de
Verweis-sensitive Grafiken definieren
de Beispiel: Schnell zur Stadt oder Region Ihrer Wahl!
↑ b) Server-seitige verweis-sensitive Grafiken
- SELFHTML de Server-seitige Verweis-sensitive Grafiken
↑ c) Referenzieren von sensitiven Bereichen
-
Ein Rechteck verweis-sensitiv referenzieren
Einen Kreis verweis-sensitiv referenzieren
Ein Vieleck verweis-sensitiv referenzieren