nicht angemeldet
bei rollover eine andere Grafik ändern
Hallo,
ich möchte bei "überfahren" einer frei positionierten Grafik eine zweite, ebenfalls frei positionierte Grafik auswechseln. Meine Seite sieht folgendermassen aus:
<HTML>
<HEAD>
<script language="JavaScript">
<!--
Normal1 = new Image();
Normal1.src = "bild1.gif";
Highlight1 = new Image();
Highlight1.src = "bild2.gif";
function Bildwechsel(Bildnr,Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src;
}
//-->
</script>
</HEAD>
<BODY>
<div style="position:absolute; top:50px; left:20px" onMouseOver="Bildwechsel(1,Highlight1)" onMouseOut="Bildwechsel(1,Normal1)">
<IMG SRC="ausloeserbild.gif" HEIGHT="27" WIDTH="125" border="0">
</DIV>
<div style="position:absolute; top:106px; left:235px" >
<IMG SRC="bild1.gif" HEIGHT="94" WIDTH="108">
</DIV>
</BODY>
</HTML>
Beim Explorer funktioniert dies. Beim Netscape nicht. (Obwohl sowohl das freie positionieren an sich und das obige JavaScript-Program ansich bei beiden Browsern funktioniert....)
Wer weiß Rat? (oder weiß, wo welcher steht?)
Chräcker
-
Hallo Chräcker
<div style="position:absolute; top:50px; left:20px" onMouseOver="Bildwechsel(1,Highlight1)" onMouseOut="Bildwechsel(1,Normal1)">
<IMG SRC="ausloeserbild.gif" HEIGHT="27" WIDTH="125" border="0">
</DIV>hier ist Problem Nr. 1: der Navi interpretiert omMouseOver etc. nur innerhalb eines a-Tags bzw. area-Tag. Den mußt du also einbinden, etwa so wie hier:
<div ...><a href="#" onMouseOver="Bildwechsel(1,Highlight1)" onMouseOut="Bildwechsel(1,Normal1)"><IMG SRC="ausloeserbild.gif" HEIGHT="27" WIDTH="125" border="0"></a></div>
da dein Bild auch in einem div-Tag steckt mußt du zusätzlich eine Fallunterscheidung in der Funktion für den Navi durchführen und das Bild im Div dann mit document.divname.document.images... ansprechen.
Viele Grüße
Antje
-
Hallo Antje,
danke für die schnelle Antwort. Da HTML für mich relativ neu ist, habe ich jetzt etwas zu knabbern ;-)
Du schreibst:
und das Bild im Div dann mit
document.divname.document.images...
ansprechen.ich nehme an, mit divname meinst Du die von mir noch zu vergebende Div-ID. Allerdings habe ich in meinen Document-Objekt Beschreibungen keinen Hinweis auf eine document-Eigenschaft "id" gefunden (?) erst nach dem Unterobjekt "all" kann ich "id" benutzen, aber spätestens jetzt ist schon ein Knoten in meinem Hirn....
Also dachte ich, zurück zu Deiner Erklärung: document, dahinter die Div-ID, und dahinter sogar nochmal document? Und dann images mit der dann folgenden id in den eckigen Klammern? Soll es dann lauten:
im Body:
<div id="tauschbild" style="position:absolute; top:106px; left:235px">
<IMG SRC="bild1.gif" HEIGHT="94" WIDTH="108">
</DIV>und oben im Script lautet die Funktion dann (?)
document.tauschbild,document.images[Bildnr].src = Bildobjekt.src;
;-)))) das funktioniert definitiv nicht im Navigator,;-)))) aber warscheinlich habe ich auch alles falsch geschrieben was man falsch schreiben kann ;-/ Also bitte nochmal: Hilfe....
Chräcker
-
Hallo Antje,
danke für die schnelle Antwort. Da HTML für mich relativ neu ist, habe ich jetzt etwas zu knabbern ;-)
das hier ist aber JavaScript :-)
document, dahinter die Div-ID, und dahinter sogar nochmal document?
Ja, genauso so und zwar deshalb, weil der Navi den Div-Tag als Layer interpretiert und als eigenes Dokument ansieht. Deshalb das document doppelt.
im Body:
<div id="tauschbild" style="position:absolute; top:106px; left:235px">
<IMG SRC="bild1.gif" HEIGHT="94" WIDTH="108">
</DIV>»»
und oben im Script lautet die Funktion dann (?)
document.tauschbild,document.images[Bildnr].src = Bildobjekt.src;
;-)))) das funktioniert definitiv nicht im Navigator,;-)))) aber warscheinlich habe ich auch alles falsch geschrieben was man falsch schreiben kann ;-/ Also bitte nochmal: Hilfe....
Chräckersorry, war mein Fehler, ich hatte vergessen dir mitzuteilen, daß der Navi die Bilder dann auch neu zu zählen beginnt. In jedem div beginnt es wieder bei 0. Ich löse es immer so, daß ich den Bildern einen Namen verpasse und diesen übergebe. Hast du nur ein Bild in jedem Div schreibe einfach
document.tauschbild,document.images[0].src = Bildobjekt.src;Viele Grüße
Antje
Viele Grüße
Antje
-
document.tauschbild,document.images[0].src = Bildobjekt.src;
Scheint nicht mein Tag zu sein :-)
document.tauschbild.document.images[0].src = Bildobjekt.src;
nicht Komma nach dem Tauschbild, sondern Punkt.
Antje
-
Hallo Antje
Scheint nicht mein Tag zu sein :-)
nicht Komma nach dem Tauschbild, sondern Punkt.
nein, der Fehler lag bei mir. Ich hatte aufersehen das Komma reingeschmugelt, Du hattest es dann nur zitiert.
Ersteinmal: vielen Dank, und ja, es funktioniert (auch in meinem Hirn ;-) ) Hoffentlich letzte Frage zu diesem Thema von mir: Warum funktioniert es nicht, wenn ich anstelle der "fest" geschriebenen div-ID "tauschbild" in der Zeile:document.tauschbild.document.images[0].src = Bildobjekt.src;
eine Variabel setze? Ich dachte mir es so:
function Bildwechsel(Divname,Bildnr,Bildobjekt)
{document.Divname.document.images[0].src = Bildobjekt.src; }und selbige rufe ich dann unter anderem so auf:
onmouseover="Bildwechsel(Tauschbild,2,Highlight1)"
(wobei bei der Netscapevarainte die "2", und bei der Explorervariante das "Tauschbild" ignoriert wird. Ehrlich, auch hier habe ich jetzt alles was ich über Variabeln finden kann durchgelesen, und so dumm kann doch mein Versuch nicht sein ;-/ ?
Danke nochmals und sorry für das "komma" ;-)
Chräcker
-
nein, der Fehler lag bei mir. Ich hatte aufersehen das Komma reingeschmugelt, Du hattest es dann nur zitiert.
ich hatte es aber gleich bemerkt und dann vor dem Abschicken vergessen zu korrigieren :-)
function Bildwechsel(Divname,Bildnr,Bildobjekt)
{document.Divname.document.images[0].src = Bildobjekt.src; }Das Problem liegt in der Ansprache mit
document.Divname.document.images[0].src wird ein div mit dem Namen Divname gesucht und nicht die Variable Divname interpretiert.Du mußt schreiben
document[Divname].document.images[0].src
dann klappt es auch und im Aufruf
onmouseover="Bildwechsel('Tauschbild',2,Highlight1)"
Den Divnamen also als Text übergeben. Sonst sucht der Browser ein Objekt mit dem Namen Tauschbild. :-)
Viel Erfolg
Antje
-
Hallo Antje,
endlich klapt alles, 1000 Dank.
mit document.Divname.document.images[0].src wird ein
div mit dem Namen Divname gesuchtund wie man aus einem "Namen" eine Variabel macht hatte ich nicht gefunden. (Ich hatte es einfach mit "deklarieren" versucht, also
var jetztaber=divname )
Ich hatte sogar (für mich!) die eckigen Klammern benutzt, nur dummerweise immer noch mit einem Punkt zwischen Document und der Variabel.
Den Divnamen also als Text übergeben.
auch hier gelernt, wie man aus einem "Wort" einen Textstring macht, nochmals danke...
Chräcker
-
-
-
-
-
-