Webseitenbau
Home
Site/Index
 
Web Webseitenbau
Google English français  
⬆2. 14. 7 Grafik mit Verweis

2.14.7 Grafik mit Verweis

Pfeil nach rechts (Icon)
      120 x 120 Pixel Webdesign: Lupe

Pfeil nach rechts (Icon)
      120 x 120 Pixel Webdesign: Smiley

-

1 Anklickbare Grafiken

Darunter versteht man:

-

2 Beispiele mit Bildern

-

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

Bild:KARTE schweiz verwaltungsgliederung.png 
      500 x 356 Pixel

-

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

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

-

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)
Bild:KARTE schweiz verwaltungsgliederung.png 
      500 x 356 Pixel

-

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)
Bild:KARTE schweiz verwaltungsgliederung.png 
      500 x 356 Pixel

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)
Bild:KARTE schweiz verwaltungsgliederung.png 
      500 x 356 Pixel

-

3 Beispiele mit Icons

-

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

Lupe 
      24 x 24 Pixel

-

Beispiel 2a: Link im Icon zum grossen 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

Die Schweiz und ihre Kantone Lupe 
      24 x 24 Pixel
Bild:KARTE schweiz verwaltungsgliederung.png 
      500 x 356 Pixel

-

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

Bordeaux, Miroir d'eau place de la Bourse Lupe 
      24 x 24 Pixel
Miroir d'eau place de la Bourse
      800 × 535 pixels

Pfeil nach rechts (Icon)
      120 x 120 Pixel Webdesign: Lupe

-

Beispiel 3: Link im Icon zum grossen 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

Die Schweiz und ihre Kantone Lupe 
      24 x 24 Pixel
Bild:KARTE schweiz verwaltungsgliederung.png 
      500 x 356 Pixel

Pfeil nach rechts (Icon)
      120 x 120 Pixel Webdesign: Lupe

-

4 Beispiele mit Smileys

Pfeil nach rechts (Icon)
      120 x 120 Pixel 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

Grosses Smiley
      80 x 80 Pixel animiert in 2 Frames Computer-Smiley
      57 x 53 Pixel animiert in 6 Frames Verkauf-Smiley
      91 x 64 Pixel animiert in 21 Frames Telefon
      50 x 42 Pixel animiert in 10 Frames

-

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)

Grosses Smiley
      80 x 80 Pixel animiert in 2 Frames

-

Beipiel 3: Smileys mit Link auf das entsprechende Land im Internet-Vademecum/Erkunden

Mit Verweis auf die entsprechenden Länder im Internet-Vadenecum

Fenster (Icon>) 
      100 x 100 Pixel Smiley Flagge Schweiz
      42 x 52 Pixel animiert in 8 Frames Fenster (Icon>) 
      100 x 100 Pixel Smiley Flagge Frankreich
      42 x 52 Pixel animiert in 8 Frames Fenster (Icon>) 
      100 x 100 Pixel Smiley Flagge Deutschland
      42 x 52 Pixel animiert in 8 Frames Fenster (Icon>) 
      100 x 100 Pixel Smiley Flagge Österreich
      41 x 27 Pixel animiert in 2 Frames Fenster (Icon>) 
      100 x 100 Pixel Smiley Flagge Grossbritannien
      42 x 52 Pixel animiert in 8 Frames Fenster (Icon>) 
      100 x 100 Pixel Smiley Flagge USA
      99 x 113 Pixel animiert in 7 Frames

Pfeil nach rechts (Icon)
      120 x 120 Pixel Webdesign: Smiley

-

5 Verweis-sensitive Grafiken (Image Maps)

-

a) Verweis-sensitive Grafiken definieren

Darunter versteht man:

-

b) Server-seitige verweis-sensitive Grafiken

-

c) Referenzieren von sensitiven Bereichen