Zufallstext in Blockelement nach Mouseover

A

Arachne

Grünschnabel
Hallo!

Nachdem ich mich 2 Tage durch's Forum gesucht und gelesen habe, wende ich mich nun mal direkt mit meinem Problem an euch, in der Hoffnung, dass ihr mir helfen könnt.

Folgender Aufbau:
In einem Array sind 7 Bilder hinterlegt.
Bei Mouseover über ein Image erscheint ein bisher unsichtbares Blockelement (div) - bei Mouseout verschwindet es wieder. In diesem Blockelement wird eines dieser 7 Bilder aus dem Array zufallsgesteuert angezeigt. Die Zufallssteuerung liegt in einer Funktion, die ebenfalls beim Mouseover über das Image (für den Bildwechsel ohne Reload der ganzen Seite) ausgeführt wird.
Soweit so gut.

Dann dachte ich mir: hey, jetzt zu den wechselnden Bildern ein ebenfalls wechselnder Text im selben Blockelement wär' doch nicht schlecht. Also kurzerhand ein zweites Array mit Texten erstellt und dann versucht, in dem Blockelement mit document.write einen dieser Array-Texte mit derselben zufallsberechneten Variable anzeigen zu lassen.
Ergebnis: kein Text.

1. Frage: obwohl ich die Variable vor der Funktion deklariert habe, scheint die Variable nach Beendigung der Zufallsberechnungsfunktion keinen Wert zu enthalten. Woran liegt das?

Ok. Habe weiter probiert und mit einer zweiten Variable dieselbe Zufallsberechnung ausgeführt (dann eben kein passender Text zum Bild sondern ein wahlfreier Text - man ist ja bereit, Abstriche zu machen). In dieselbe Funktion ein document.write und den Funktionaufruf an die entsprechende Stelle im Blockelement gesetzt.
Ergebnis: Text ist da, ändert sich aber nur beim Neuladen der Seite und nicht, jedesmal, wenn es zur Anzeige des Blockelements kommt. Heißt: Bild wechselt ohne Reload der Seite bei jedem Neuanzeigen des Blockelements, Text bleibt gleich. Blöd.

2. Frage: Wieso wird die Berechnung der Zufalltext-Variable beim Reload durchgeführt (obwohl die Funktion nicht per onload aufgerufen wird!) und nicht beim Durchlaufen des Blockelements, in dem sie eingebunden ist?

Habe mal mit der alert-Funktion den Inhalt der Variablen geprüft und festgestellt: beim Reload durchläuft es die Zufalltext-Funktion, nicht aber die Zufallbild-Funktion (wie gesagt - beides nicht im body-tag per onload aufgerufen!). Beim Überfahren des Images wird die Zufallbild-Funktion ausgeführt, das alert für die Zufalltext-Funktion wird jedoch nicht angezeigt (wird da die Funktion etwa gar nicht aufgerufen?) - der Text wird aber geschrieben (also doch Funktionsaufruf? - document.write steht ja dadrin)

Bin echt ratlos! Ich hoffe, ihr werdet da einigermaßen schlau draus.
Sorry, dass es so lang geworden ist.

Hier noch die relevanten Code-Bestandteile:
Code: 
<head>
<style type="text/css">
<!--
div#ane { position:static; width:100%; height:320px; z-index:8; display:none; }
//-->
</style>

<script language="JavaScript">
<!--
aImgs = new Array();
aImgs[0] = 'bild1.jpg';
aImgs[1] = 'bild2.jpg';
aImgs[2] = 'bild3.jpg';
aImgs[3] = 'bild4.jpg';
aImgs[4] = 'bild5.jpg';
aImgs[5] = 'bild6.jpg';
aImgs[6] = 'bild7.jpg';

iIndex = 0;

function zufallbild()
{
iIndex = Math.round(Math.random() * (aImgs.length - 1));
document.bild.src = aImgs[iIndex] ;
}

aText = new Array();
aText[0] = "Text 1";
aText[1] = "Text 2;
aText[2] = "Text 3;
aText[3] = "Text 4;
aText[4] = "Text 5;
aText[5] = "Text 6;
aText[6] = "Text 7;

tIndex = 0;

function zufalltext()
{
tIndex = Math.round(Math.random() * (aText.length - 1));
document.write(aText[tIndex]);
}
//-->
</script>
</head>

<body>

<div id="ane">
<img src="' + aImgs[iIndex] + '" width="225" height="300" border="0" alt="" name="bild">
<script language="JavaScript">
<!--
zufalltext();
//-->
</script>
</div>

<img src="xy.jpg" onMouseover="zufallbild(); document.getElementById('ane').style.display='block';" onMouseout="document.getElementById('ane').style.display='none';" width="120" height="81" border="0" alt="">


Ja, dann erstmal vielen Dank für's lesen und ich hoffe, dass mir jemand etwas dazu sagen kann. Ach ja, und: ich bin Javascript-Laie ;)

Arachne
 
Hi Arachne,

zunächst einmal ein Danke für eine gute Schilderung des Problems!

Ich würde nicht mit document.write arbeiten. Stattdessen würde ich einen zusätzlichen
Bereich (DIV) mit ID definieren, in dem der Text dynamisch ausgetauscht wird.
Deinen DIV-Tag würde ich demnach wie folgt umschreiben:
Code: 
<div id="ane">
   <script language="JavaScript">
   <!--
   document.write('<img src="' + aImgs[iIndex] + '" width="100" height="150" border="0" alt="" name="bild">');
   //-->
   </script>
   <div id="randTxt">&nbsp;</div>
</div>
Den IMG-Tag habe ich in den Script-Bereich geschrieben, da so ein Bild aus dem
Array verwendet wird.
Den Funktionsaufruf zufalltext() habe ich in den onLoad-Event im Body
geschrieben (onLoad="zufalltext()").

Deinen Scriptberich habe ich ebenfalls abgeändert.
Code: 
// Variablen zur Ermittlung des Browsers
IE = document.all && !window.opera;
DOM = document.getElementById && !IE;

aImgs = new Array();
aImgs[0] = 'bild1.jpg';
aImgs[1] = 'bild2.jpg';
aImgs[2] = 'bild3.jpg';
aImgs[3] = 'bild4.jpg';
aImgs[4] = 'bild5.jpg';
aImgs[5] = 'bild6.jpg';
aImgs[6] = 'bild7.jpg';

iIndex = 0;

function zufallbild(){
    iIndex = Math.round(Math.random() * (aImgs.length - 1));
    document.bild.src = aImgs[iIndex] ;
    zufalltext();  // Zufallstext dynamisch einblenden
}

aText = new Array();
aText[0] = "Text 1";
aText[1] = "Text 2";
aText[2] = "Text 3";
aText[3] = "Text 4";
aText[4] = "Text 5";
aText[5] = "Text 6";
aText[6] = "Text 7";

tIndex = 0;

function zufalltext(){
    tIndex = Math.round(Math.random() * (aText.length - 1));
    // Text-Objekt browserabhängig ermitteln
    var myObj = (IE)?document.all['randTxt']:document.getElementById('randTxt');

    // Falls es sich um einen IE handelt
    if(IE){
        myObj.innerHTML = aText[tIndex];  // Zufallstext zuweisen
    }else{
        if(DOM)  // Falls es sich um einen DOM-unterstützten Browser handelt
            myObj.firstChild.data = aText[tIndex];	// Zufallstext zuweisen
    }
}
Die neue Funktion zufalltext "holt" browserabhängig den Textbereich als Objekt.
Anschliessend wird der ermittelte Zufallstext dem Objekt zugewiesen.

Um auch Browser zu unterstützen, die DOM noch nicht können, würde ich die Funktionsaufrufe
in onMouseOver und onMouseOut entsprechend abändern.
Code: 
<img src="../bilder/fussball.jpg" onMouseover="zufallbild(); (IE)?document.all['ane'].style.display='block':document.getElementById('ane').style.display='block';" onMouseout="(IE)?document.all['ane'].style.display='none':document.getElementById('ane').style.display='none';" width="120" height="81" border="0" alt="">
Ich hoffe, dass Dir das weiterhilft.

Ciao
Quaese
 
Hi Quaese,

erstmal vielen Dank, dass du dich da reingedacht und mir einen Lösungsvorschlag gepostet hast! Und das auch noch so schnell :)

Habe mich auch sogleich daran begeben und den Code entsprechend deiner Abweichungen geändert. Leider war's nicht sehr erfolgreich.

In Sachen Browserprüfung hat er sich an dem (IE) gestört und ist auf einen Fehler gelaufen. Gut, halb so schlimm - kurzerhand das (IE) durch (MS) ersetzt - stand in einem anderen Script so, der bei mir bereits läuft. Dachte, kann ja dann nicht verkehrt sein.
Anschließend kein Fehler mehr, aber auch kein Blockelement! Also weder Bild, noch Text - einfach nix. Hm.

Hatte mich etwas darüber gewundert, dass du die Funktion zufalltext() in den onload-Event gestellt hast und nicht zufallbild(). zufallbild ruft doch zufalltext auf. Habe das auf Verdacht mal in zufallbild() geändert, hat aber auch keine Änderung gebracht.

Hm, eigentlich sah das für mich ganz logisch aus. Wobei ich aber auch gestehen muss, dass ich die Sache mit dem innerHTML und dem firstChild nicht wirklich verstehe ;)

Arachne
 
nochmal hallo Quaese!

frag mich nicht, was ich da jetzt alles hin und her geändert habe, aber jetzt funktioniert's! Vielleicht hatte ich da irgendwo einen dummen Vertipper drin, keine Ahnung.

Jedenfalls klappt dein Vorschlag jetzt einwandfrei

ganz, ganz herzlichen Dank *freu*

Arachne
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück