Hi,
mal sehen, ob ich Dich richtig verstanden habe.
Du bewegst die Maus über die Menüpunkte. Erreichst Du einen neuen Punkt,
ändert sich die Grafik im Dokument, dass im iFrame angezeigt wird. Dabei wird
das vorher eingeblendete Bild durch das neue ersetzt.
1. Erstelle zunächst in dem Dokument, das im iFrame angezeigt werden soll,
ein Bild mit einem transparenten Gif. Weiterhin muss dem IMG-Tag ein ID-Attribut
zugewiesen werden.
Code:
<img id="bildID" src="../spac8_10.gif" width="50" height="50" border="0" alt="">
2. Im Hauptdokument weist Du Deinem iFrame einen Namen zu
Code:
<iframe name="contentFrame" src="home/home.html">Ihr Browser unterstützt leider keine iFrames</iframe>
3. In den Head-Bereich des Hauptdokumentes kopierst Du folgendes JavaScript:
Code:
<script language="javascript" type="text/javascript">
<!--
function changeIFrame(strID, strFrame, strDokTitel, isOver){
// Objekt im Dokument holen, das sich im iFrame befindet
var myObj = top.frames[strFrame].document.getElementById(strID);
// Falls MouseOver
if(isOver == 1){
// Prüfen, über welchen Menüpunkt
switch(strDokTitel){
// Maus ist über Home-Menüpunkt
case 'home':
myObj.src = "../bild1.gif"; // Neues Bild (relativ vom iFrame-Dokument)
myObj.height = "50"; // Höhe und Breite des einzublendenden
myObj.width = "50"; // Bildes angeben
break;
// Maus ist über Projekte-Menüpunkt
case 'projekte':
myObj.src = "../bild2.gif";
myObj.height = "50";
myObj.width = "50";
break;
}
// Falls MouseOut
}else{
// Transparenten Spacer wieder einblenden
myObj.src = "../spac8_10.gif";
}
}
-->
</script>
Das Script holt sich zunächst das gewünschte Objekt aus dem iFrame-Dokument.
Anschliessend wird ermittelt, ob es sich um einen MouseOver- oder MouseOut-Effekt
handelt.
Handelt es sich um einen MouseOut-Effekt, wird der transparente Spacer wieder
eingeblendet.
Handelt es sich hingegen um einen MousOver-Effekt, wird geprüft, um welchen
Menüpunkt es sich dreht (case '...') und bei Übereinstimmung das entsprechende
Bild eingeblendet. Die Case-Anweisungen können beliebig erweitert werden und
nach obigen Schema mit Bildern und deren Abmessungen (width, height)
versehen werden.
4. Das Script rufst du auf, wenn Du die Maus über einen Menüpunkt bewegst bzw.
den Cursor wieder vom Punkt nimmst. Hier wurden einfache Links als Menüpunkte
gewählt.
Code:
<a onMouseOver="changeIFrame('bildID', 'contentFrame', 'home', 1)" onMouseOut="changeIFrame('bildID', 'contentFrame', 'home', 0)" href="home/home.html" target="contentFrame">home</a>
Dem Script werden die folgenden Parameter übergeben:
bildID - ist die ID aus dem iFrame-Dokument (siehe 1.)
contentFrame - ist der Name des iFrames (siehe 2.)
home - Bezeichnung des Menüpunkts
1/0 - MouseOver-Effekt (1) oder MouseOut-Effekt (0)
In den Anhang habe ich Dir noch ein funktionierendes Beispiel gepackt.
Hoffentlich habe ich Dein Problem richtig verstanden ... wäre schade um die viele
Arbeit ;-)
Ciao
Quaese
ob gefunzt hat schreib ich dir wenn ich es ausprobiert habe ^^