Bildwechsel 8

Illustration Acryl | digital | plastilin | vignetten | horoskop | postkarten

Lade hier ein Beispiel mit Frameset im neuen Browserfenster.

<head>

<script language="JavaScript">
<!--
var bn, brset, bo;

a1 = new Image();
a1.src = "img/nav/acryl1.gif";
b1 = new Image();
b1.src = "img/nav/acryl2.gif";

a2 = new Image();
a2.src="img/nav/digital1.gif";
b2 = new Image();
b2.src="img/nav/digital2.gif";

a3 = new Image();
a3.src="img/nav/plastilin1.gif";
b3 = new Image();
b3.src="img/nav/plastilin2.gif";

a4 = new Image();
a4.src="img/nav/vignetten1.gif";
b4 = new Image();
b4.src="img/nav/vignetten2.gif";

a5 = new Image();
a5.src="img/nav/horoskop1.gif";
b5 = new Image();
b5.src="img/nav/horoskop2.gif";

a6 = new Image();
a6.src="img/nav/postkarten1.gif";
b6 = new Image();
b6.src="img/nav/postkarten2.gif";

bildname = new Array();
bildname[0] = 'acryl';
bildname[1] = 'digital'
bildname[2] = 'plastilin'
bildname[3] = 'vignetten'
bildname[4] = 'horoskop'
bildname[5] = 'postkarten'

function Bildwechsel(bie)
{
for(i=0;i<=6;i++){
bn=bildname[i];
bo=eval("b"+(i+1));
brset=eval("a"+(i+1));
if(i == bie){
window.document.images[bn].src = bo.src;
}else{
window.document.images[bn].src = brset.src;
}
}
}
//-->
</script>

 

</head>

Dieses Menü lässt sich sehr gut in Framesets einsetzen. Die Bilder werden beim Aufruf der jeweiligen Seite ausgetauscht. Alle anderen Bilder werden wieder in den Startzustand versetzt. Man kann den Aufruf der Funktion auch in den body einer Seite einfügen, die aufgerufen wird. Das hat den Vorteil, dass immer das richtige Bild ausgetauscht wird, egal von welcher Seite der Link aufgerufen wird.

Hier werden wieder die Objekte für alle Bilder erzeugt, sowohl für die, welche beim Start angezeigt werden, als auch für die, welche ausgetauscht werden.

Jedes Bild hat einen Bildnamen bekommen, welcher in dem Array bildname hinterlegt ist.

Die Funktion hat nur einen Parameter bie, welcher das Bild bestimmt. Es wird eine Zahl erwartet, beginnend bei 0 für das erste Bild, 1 für das zweite etc.

eval()
Die Funktion eval() wertet den String aus und gibt den erforderlichen Datentyp zurück. Dadurch können die Bildobjekte in der Forschleife erzeugt werden. Im folgenden Beispiel bedeutet beides das gleiche.

myVar=eval("b"+1);
myVar=b1;

Aufruf der Funktion
Will man die Funktion auf dieser Seite im Bildlink selber aufrufen, so geschieht das wie immer. Wie schon erwähnt der Paramter bestimmt das Bild, welches ausgetauscht werden soll.

<a href="#" onClick="Bildwechsel(5)">bild</a>

Der Aufruf kann auch von einer anderen Seite des Framesets aus stattfinden. Beispielsweise von der Seite, die geladen wird.

<body onLoad="javascript: parent.nav.Bildwechsel(4)">

Hätte man ein Frameset im Frameset, sähe das Script so aus.

<body onLoad="javascript: parent.parent.nav.Bildwechsel(4)">

nav ist der Name des Frames in dem die Seite mit der Navigation und ihrer Funktion geladen wird. Siehe dazu auch die Seite Diverse, nützliche Scripte.

Ein ähnliches Beispiel, wo Stylesheets von einer anderen Seite des Framesets aufgerufen werden, findet man in meinem Tipp. Webdesign/ Stylesheet/ dynamisches CSS/ Stylesheet frameübergreifend ändern
Die offline Version des Webdesign Tutorials muss extra runtergeladen werden.

weiter

 

Javascript Tipps