Grafik-Tausch innerhalb eines Framesets
Zum Verständnis ist es ratsam, zunächst das allgemeine Script unter
Standard-Mouseover
zu betrachten.
Da im zweiten Beispiel zwei Grafiken gleichzeitig getauscht werden, kann es ausserdem hilfreich sein, sich vorab die Rubrik Mehrfachtausch durchzulesen.
Eine Grafik wird in einem anderem Frame - wie auch beim Standard-Mouseover - über den beliebig mit dem Attribut "name" zu vergebenen Namen einer Grafik angesprochen.
Es muss hier nur zusätzlich noch die Angabe des Frame-Namens (auch beliebig mit "name" zu vergebenen) angegeben werden, in welcher der Grafiktausch stattfindet.
Es können auch mehrere Frames zugleich angesprochen werden sowie auch mehrere Grafiken gleichzeitig.
Hier ist die Syntax:
parent.framename.document.grafikname.src
Beispiel:
parent.re.document.bild_00.src
Der Framename heisst bei diesem Beispiel "re" und der Name der Grafik heisst "bild_00".
Gehen wir von folgendem 2er-Standardframeset aus. Links ist der Navigationsframe (mit Namen "li"), rechts der Inhaltsframe (mit Namen "re") für den Hauptinhalt. Nachfolgend der Quelltext:
<html>
<head>
<title>Grafiktausch im Frame Beispiel 01</title>
</head>
<frameset cols="160,*">
<frame name="li" src="links.html" scrolling="auto"
topmargin="20" marginheight="20" leftmargin="20"
marginwidth="20">
<frame name="re" src="rechts.html" scrolling="auto"
topmargin="20" marginheight="20" leftmargin="20"
marginwidth="20">
</frameset>
</html>
Beispiel 1:
Bei Mouseover auf den Textlinks im linken Frame sollen nun Grafiken im rechten Frame gewechselt werden. Und zwar soll die Grafik "logo.gif" (name="bild_00)", welche sich im rechten Frame befindet, getauscht werden.
Der Quelltext bei den Links im linken Frame lautet:
<a href="beispiel.html" target="re"
onmouseover="parent.re.document.bild_00.src='1a.gif';"
onmouseout="parent.re.document.bild_00.src='logo.gif';" >
Link 01</a>
<br>
<a href="beispiel.html" target="re"
onmouseover="parent.re.document.bild_00.src='2a.gif';"
onmouseout="parent.re.document.bild_00.src='logo.gif';" >
Link 02</a>
Der Quelltext im rechten Frame lautet:
<img src="logo.gif" width="114"
height="23" border="0" name="bild_00">
Ansehen Beispiel 1
Erklärung:
Beim Überfahren der Textlinks im linken Frame "links.html" namens "li" wird die Grafik "logo.gif" namens "bild_00", welche sich im rechten Frame "rechts.html" namens "re" befindet, getauscht.
Nachfolgend ein Beispiel, bei dem 2 Grafiken zugleich gewechselt werden, eine im linken Frame und eine im rechten Frame.
Ansehen Beispiel 2
Erklärung:
Beim Überfahren der Grafiklinks im linken Frame "links.html" namens "li" werden sowohl die Grafiklinks "link1.gif" und "link2.gif" namens "link1" und "link2" getauscht wie auch die Grafik "logo.gif" namens "bild_00", welche sich im rechten Frame "rechts.html" namens "re" befindet.
Der Quelltext im linken Frame lautet:
<a href="beispiel.html" target="re"
onmouseover="parent.re.document.bild_00.src='1a.gif';
parent.li.document.link1.src='link1_blau.gif';"
onmouseout="parent.re.document.bild_00.src='logo.gif';
parent.li.document.link1.src='link1.gif'" >
<img src="link1.gif" width="114" height="23"
border="0" alt="" name="link1"></a>
<br>
<a href="beispiel.html" target="re"
onmouseover="parent.re.document.bild_00.src='2a.gif';
parent.li.document.link2.src='link2_blau.gif'"
onmouseout="parent.re.document.bild_00.src='logo.gif';
parent.li.document.link2.src='link2.gif'" >
<img src="link2.gif" width="114" height="23"
border="0" alt="" name="link2"></a>
Der Quelltext im rechten Frame lautet:
<img src="logo.gif" width="114"
height="23" border="0" name="bild_00">
|