 Bildvorschau 02 (Grafiklink MouseOver)
Innerhalb einer Bildanzeige wird bei MouseOver die größere Ansicht der Grafik angezeigt. Hier sehen Sie ein Beispiel mit 6 Grafiken. Klicken auf die Bildvorschau löst hier keine Aktion aus.
|
|
MouseOver zeigt die Großansicht der Grafik an, MouseOut keine Aktion
Der Status der letzten MouseOver-Aktion bleibt erhalten!
update 09.02.2009, Anzeigebereich, Ränder und Bilddarstellung CSS-formatiert
Anzeigebereich, Ränder und Bilddarstellung sind CSS-formatiert. Das bedeutet, dass Sie äbhängig von den Größen ihrer Grafiken mit den Padding- und Randangaben ein wenig 'mogeln' können, damit die Anzeige ausgewogen erscheint. Hier habe ich z.B. den grauen Rand der Großansicht so eingestellt, dass die Höhe mit der Gesamthöhe des Vorschaubereichs in etwa übereinstimmt.
Sobald der Mauszeiger über den Bild-Verweis bewegt wird, wird die Funktion "Tauschen()" aufgerufen und die entsprechende Großansicht angezeigt. Bei MouseOut bleibt die zuletzt angezeigte Grafik sichtbar.
Bedingung für eine verzerrungsfreie Ansicht der großen Grafik ist: Die Großansichten sollten alle gleich groß sein! Die Abstände und Ränder für die Bildelemente sind nach meinem Update nun durch CSS-Anweisungen festgelegt.
Klicken bleibt ohne Aktion
Bei MouseOver wird die Großansicht angezeigt, klicken öffnet hier nicht eine HTML-Datei! Das ist so, weil in dem Link-Attribut kein echtes Verweisziel eingetragen wurde.
<a href="javascript:void(0)" onMouseOver=" ...
Das können Sie natürlich ändern:
<a href="dateiname.htm" onMouseOver=" ...
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
Aufwand:
- JavaScript im HEAD-Bereich notieren
- Pfad und Dateiname der Großansichten eintragen
- Startbild im Body-Bereich mit dem Attribut name="picture" versehen
- Links mit MouseOver-Attributen versehen
a 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>
b Notierungen im BODY-Bereich (für 3 Grafiken)
Die CSS-Anweisungen habe ich hier zur besseren Übersicht nicht eingetragen.
Für die zu Beginn angezeigte große Grafik wird ein Name vergeben.
<img name="picture" src="startbild.gif" width="250" ... >
Links der Vorschaugrafiken
Bei jedem Link der Vorschaugrafik werden die MouseOver-Anweisungen und der zugehörige Variablenname eingetragen
<a href="javascript:void(0)"
onMouseOver="Zeigen('bild1')">
<img src="kleinesBild1.gif" width="75" height="75" border="0" alt="">
<a>
<a href="javascript:void(0)"
onMouseOver="Zeigen('bild2')">
<img src="kleinesBild2.gif" width="75" height="75" border="0" alt="">
<a>
<a href="javascript:void(0)"
onMouseOver="Zeigen('bild3')">
<img src="kleinesBild3.gif" width="75" height="75" border="0" alt="">
<a>
Verwendete Variablen im Script:
| 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) |
c CSS-Notierungen im Head-Bereich
Durch mein Update (Anzeigebereich, Ränder und Bilddarstellung CSS-formatiert) sind nun CSS-Angaben im Head notwendig. Zur Zuordnung der Formatierungen haben die Elemente der Darstellung eine entsprechnde ID und Namen der Unterklassen erhalten.
<style type="text/css">
<!--
#Vorschau {
padding: 0px;
background: #FFFFFF;
border:none;
width:440px
}
#Vorschau .Bild{
float: left;
background: #FFFFFF;
border: 22px solid #8F8F8F;
margin: 2px 10px 2px 2px;
}
#Vorschau .Mini{
background: #FFFFFF;
border: 1px solid #3F3F3F;
margin: 2px 2px 2px 2px;
}
-->
</style>
| 
Home • Bilder • Bildvorschau 02
DOWNLOAD
Demo
