Großansicht bei MouseOver
    
HOME
 DOWNLOAD  BEISPIEL  HTMLCode ZURÜCK SITEMAP  

 Großansicht 01 (bei MouseOver)

Innerhalb einer Bildanzeige wird bei MouseOver die größere Ansicht der Grafik angezeigt. Hier sehen sie ein Beispiel mit 6 Grafiken.















Sobald der Mauszeiger über dem Verweis ist, wird die Funktion "Tauschen" aufgerufen und die entsprechende Großansicht angezeigt. Bei MouseOver wird die Großansicht angezeigt, klicken öffnet hier nicht eine neue HTML-Datei! Wenn sie eine solche Variante suchen verweise ich auf das Beispiel

Querverweis mehrere Links tauschen ein Objekt (Postleitzahlengebiet)

Möchten sie die Großansicht erst beim Anklicken und nicht gleich bei MouseOver anzeigen lassen, besuchen sie die Seite

Querverweis Großansicht beim Anklicken


   Nachteile

Hier werden die Grafiken nicht vorgeladen. Erst bei Mouseover wird die Anweisung zum Laden an den Server gesandt. Die Anzeige der Großansicht erscheint daher beim ersten Mousover verzögert. Befindet sich das Foto der Großansicht (beim nächsten MouseOver) bereits im Cache des Rechners, gehts natürlich schneller.


Querverweis Images vorladen


   Vorgabe

Die Großansichten sollten alle gleich groß sein!


   Aufwand:

  • JavaScript im HEAD-Bereich notieren
  • Pfad und Dateiname der Großansichten eintragen
  • 1. Bild im Body-Bereich mit dem Attribut name="picture" versehen
  • Links mit MouseOver-Attributen versehen


Script im Head (für 3 Grafiken) 

<script language="JavaScript">
<!-- begin
// Bilder bekannt machen

// variablennamen werden vergeben
var bild1 = new Image();
var bild2 = new Image();
var bild3 = new Image();

// den Variablen wird die Bildquelle zugewiesen
bild1.src = "bild-gross01.gif";
bild2.src = "bild-gross02.gif";
bild3.src = "bild-gross03.gif";

// Funktion zum Tauschen der Bilder
function Zeigen(Bildname)
{
eval("document['picture'].src = " + Bildname + ".src");
}
// end -->
</script>



Befehle im BODY-Bereich (für 3 Grafiken): 

Links der Vorschaugrafiken
<a href="#" onmouseover="Zeigen('bild1')">Foto 1<a>
<a href="#" onmouseover="Zeigen('bild2')">Foto 2<a>
<a href="#" onmouseover="Zeigen('bild3')">Foto 3<a>

Name für die erste gezeigte Grafik
<img name="picture" src="startbild.gif" width="250"  ... >




Zur Erweiterung (weitere Fotos) ergänzen sie im Script analog:

Element    hier im Beispiel   
Variablenname 1 bild1 Text 
Variablenname 2 bild2 Text 
Variablenname 3 bild3 Text 
(analog für weitere Fotos)
Foto 1 bild-gross01.gif Dateiname 
Foto 2 bild-gross02.gif Dateiname
Foto 3 bild-gross03.gif Dateiname
(analog für weitere Fotos)







NACH OBEN