 Bildvorschau 04 (Grafiklink bei OnClick)
JavaScript-Beispiel zur Vorschau und Großansicht von Grafiken. Innerhalb einer Bildanzeige wird bei OnClick die größere Ansicht der Grafik angezeigt. Hier sehen Sie ein Beispiel mit 6 Grafiken.
|
|
Anklicken zeigt die Großansicht der Grafik an
Bedingung für eine verzerrungsfreie Ansicht der großen Grafik ist: Die Großansichten sollten alle gleich groß sein!
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 übereinstimmt.
Beim Anklicken des Grafik-Verweises eines Vorschaubildes, wird die Funktion "Tauschen()" aufgerufen und die entsprechende Großansicht angezeigt.
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
Beim Anklicken der Vorschau, wird die Funktion "Tauschen()" aufgerufen und die entsprechende Großansicht angezeigt.
a Script im Head (für 3 Grafiken)
<script language="JavaScript">
<!-- begin
// Bilder bekannt machen
var bild1 = new Image();
var bild2 = new Image();
var bild3 = new Image();
bild1.src = "symb-200-001.gif";
bild2.src = "symb-200-002.gif";
bild3.src = "symb-200-003.gif";
function Tauschen(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 Onclick-Anweisungen und der zugehörige Variablenname eingetragen
<a href="javascript:void(0)"
Onclick="Tauschen('bild1')">
<img src="kleinesBild1.gif" width="75" height="75" border="0" alt="">
<a>
<a href="javascript:void(0)"
Onclick="Tauschen('bild2')">
<img src="kleinesBild2.gif" width="75" height="75" border="0" alt="">
<a>
<a href="javascript:void(0)"
Onclick="Tauschen('bild3')">
<img src="kleinesBild3.gif" width="75" height="75" border="0" alt="">
<a>
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) |
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 04
DOWNLOAD
Demo 
