Bildwechsel per JS _ Div-übergreifend

[darlmeb]

hallo,

ich möchte ein bildwechsel mit js realisieren.

folgender seitenaufbau:

• ich habe 2 divs
• im div A ist sind mehrere bilder
• im div B ist 1 bild
• die div sind absolute positioniert ;nebeneinander (also nicht
    verschachtelt)
• nun sollte beim überfahren (onMouseOver) über eines der bilder
    im div A das eine bild im div B durch ein anderes bild(x)gross
    ersetzt werden

mein script dazu lautet:

<script language="JavaScript">
  <!--
  H1 = new Image();
  H1.src = "bild1gross.gif";
  H2 = new Image();
  H2.src = "bild2gross.gif";
  H3 = new Image();
  H3.src = "bild3gross.gif";

function Bildwechsel(Divname,Bildnr,Bildobjekt)
  {
  document[Divname].document.images[Bildnr].src = Bildobjekt.src;
  }
  -->
        </script>

der aufruf im html dokument:

<!-- in div A ist das auslösende Bild -->
<div id="A" style="...">
<img src="bild1.gif" onMouseOver="Bildwechsel('B',0,H1)">
<img src="bild2.gif" onMouseOver="Bildwechsel('B',0,H2)">
<img src="bild3.gif" onMouseOver="Bildwechsel('B',0,H3)">
</div>

<!-- in div B ist das auszutauschende Bild -->
<div id="B" style="...">
<img src="zuersetzen.gif">
</div>

leider funktioniert da was nicht. wo liegt der fehler?

mfg Darlmeb

[apstrakt]

Hallo,

immer wieder diese 08/15-Fragen...

leider funktioniert da was nicht. wo liegt der fehler?

da:

function Bildwechsel(Divname,Bildnr,Bildobjekt)
{
document[Divname].document.images[Bildnr].src = Bildobjekt.src;
}

Denn mit document[Divname].document.images[Bildnr] kannst Du nicht zugreifen, schon allein, weil die DIVs keinen Namen, sondern IDs bekommen haben. (Außerdem hat ein DIV kein Unterobjekt document.) Am besten den Images Namen geben.

Auch bin ich mir nicht sicher, ob das hier funktioniert (die Verwenund von H1), kann aber durchaus sein:

<img src="bild1.gif" onMouseOver="Bildwechsel('B',0,H1)">

Kleiner Tip: JavaScripte im Netscape (oder Mozilla) testen, denn der bietet eine JavsScript-Konsole, die brauchbare Fehlermeldungen rauswirft.

Versuch es mal so:

Das Script:

function Bildwechsel(Bildsrc)
  {
  document.bildB.src = Bildsrc;
  }

Der HTML-Code:

<!-- in div A ist das auslösende Bild -->
<div id="A" style="...">
<img src="bild1.gif" onMouseOver="Bildwechsel(this.src)">
</div>

<!-- in div B ist das auszutauschende Bild -->
<div id="B" style="...">
<img name="bildB" src="zuersetzen.gif">
</div>

Habe ich aber jetzt auch nicht getestet.

Tschau,
apstrakt

[Struppi]

Denn mit document[Divname].document.images[Bildnr] kannst Du nicht zugreifen, schon allein, weil die DIVs keinen Namen, sondern IDs bekommen haben. (Außerdem hat ein DIV kein Unterobjekt document.) Am besten den Images Namen geben.

Doch ein positionierter Layer hat im NC 4.x ein Unterobjekt document.

Struppi.

[apstrakt]

Hallo,

(Außerdem hat ein DIV kein Unterobjekt document.)
Doch ein positionierter Layer hat im NC 4.x ein Unterobjekt document.

Stimmt, diese doofen Layer...

Das Script, das ich gepostet habe, funktioniert übrigens (in NN7 und MSIE6).

Tschau,
apstrakt

[Struppi]

hallo,

ich möchte ein bildwechsel mit js realisieren.

folgender seitenaufbau:

• ich habe 2 divs
• im div A ist sind mehrere bilder
• im div B ist 1 bild
• die div sind absolute positioniert ;nebeneinander (also nicht
    verschachtelt)
• nun sollte beim überfahren (onMouseOver) über eines der bilder
    im div A das eine bild im div B durch ein anderes bild(x)gross
    ersetzt werden

mein script dazu lautet:

Woher hast du dass Skript?
Das was du da schriebst ist NC 4.x only.

<script language="JavaScript">
  <!--
  H1 = new Image();
  H1.src = "bild1gross.gif";
  H2 = new Image();
  H2.src = "bild2gross.gif";
  H3 = new Image();
  H3.src = "bild3gross.gif";

ich möchte ja nicht meckern, aber das sieht doch so aus, als ob ein array angesagt wäre, oder?

function Bildwechsel(Divname,Bildnr,Bildobjekt)
  {
  document[Divname].document.images[Bildnr].src = Bildobjekt.src;
  }

So referenziert der NC 4.x Layer, du musst noch eine für IE 4.x und für alle anderne Browser einbauen.

-->
        </script>

der aufruf im html dokument:

<!-- in div A ist das auslösende Bild -->
<div id="A" style="...">
<img src="bild1.gif" onMouseOver="Bildwechsel('B',0,H1)">
<img src="bild2.gif" onMouseOver="Bildwechsel('B',0,H2)">
<img src="bild3.gif" onMouseOver="Bildwechsel('B',0,H3)">
</div>

<!-- in div B ist das auszutauschende Bild -->
<div id="B" style="...">
<img src="zuersetzen.gif">
</div>

leider funktioniert da was nicht. wo liegt der fehler?

Da kann ich nur sagen glasgoogle http://glasgoogle.de. funktioniert nicht ist eine absolut nichtsagende Fehlerbeschreibung.

Es gibt millionen über millionen mouseover skripte, dass du keines gefunden hast was funktioniert wundert mich.

Ich kann dir eines anbieten was zumindest in allen Browsern ausser NC 4.x funktioniert [linkl:http://home.arcor.de/struebig/js/mouse_over/mouse_over.htm]

Ansonsten:

<!-- in div B ist das auszutauschende Bild -->
<img name="B" src="zuersetzen.gif" id="B" style="...">

Das preload skript läßt sich auch verbessern:

<script type="text/JavaScript">
<!--
H = new Array();

function preload(nr)
{
    H[nr] = new Image();
    H[nr].src = 'bild' + nr + 'gross.gif';
}
preload(1);
preload(2);
preload(3);

function Bildwechsel(Bildnr)
{
var obj = null;
if(document.layers) obj = document.images['B'];
else if(document.getElementById) obj = document.getElementById('B');
else if(document.all) document.all['B'];

if(obj) obj.src = H[Bildnr].src;
}

wenn es denn wirklich ein positionierter Layer sein musss, muss die Zeile:
if(document.layers) obj = document.images['B'];

ergänzt werden:
if(document.layers) obj = document.layers['B'].document.images['B'];

Struppi.