[JS] [CSS] Meerdere divs inhoud vervangen d.m.v. mouseover

[Serial-Z]

Meerdere divs inhoud vervangen d.m.v. mouseover

Beste tweakers!
Ik heb hier een probleem met een javascript, wat ik graag een beetje wil veranderen
Ik hoop dan ook dat iemand mij misschien hiermee kan helpen.

Huidige situatie
Als ik over een onmouseover uitvoer over een menu object, wordt er maar enkel 1 div vervangen (met fade-effect) met een tekst.
Het script werkt op meerdere browsers (getest op FireFox en IE).

Hoe ik het graag zou willen maken
Als ik over een onmouseover uitvoer over een menu object, moeten er 2 divs met beiden een verschillende inhoud vervangen worden (1 div met tekst, 1 div met afbeelding).
Voorbeeld:
Ik ga met mijn muis over de keuze 'Downloads', dan wordt er een omschrijving weergegeven, en ergens anders in een div een bijbehorende afbeelding.

De bron

code:

<style type="text/css">

#coolmenu{
border: 1px solid black;
width: 170px;
background-color: #E6E6E6;
}

#coolmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color: black;
color: white;
}

#tabledescription{
width: 100%;
height: 3em;
padding: 2px;
filter:alpha(opacity=0);
-moz-opacity:0;
}

</style>

<script type="text/javascript">

var baseopacity=0

function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("tabledescription").innerHTML=thetext
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

function hidetext(){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("tabledescription").innerHTML=""
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}

</script>

<div id="coolmenu">
<a href="http://www.javascriptkit.com" onMouseover="showtext('JavaScript tutorials and scripts!')" onMouseout="hidetext()">JavaScript Kit</a>
<a href="http://www.javascriptkit.com/cutpastejava.shtml" onMouseover="showtext('300+ free JavaScripts')" onMouseout="hidetext()">Free JavaScripts</a>
<a href="http://www.javascriptkit.com/jsref/" onMouseover="showtext('Comprehensive JavaScript Reference')" onMouseout="hidetext()">JavaScript Reference</a>
<a href="http://www.codingforums.com" onMouseover="showtext('Web coding and development forums!')" onMouseout="hidetext()">Coding Forums</a>
<a href="http://www.dynamicdrive.com" onMouseover="showtext('Award winning DHTML and JavaScripts')" onMouseout="hidetext()">Dynamic Drive</a>
<div id="tabledescription">LoL</div>
</div>

Ik heb al geprobeerd bij Showtext wat toe te voegen dat er een 2e div wordt aangeroepen, maar dat werkte helaas niet.

Wie kan mij helpen ?

[torx]

Bij mij werkt het wel gewoon?

In de functie showtext:

JavaScript:

test.innerHTML="bla";

Onderaan html:

HTML:

<div id="test"></div>

[Serial-Z]

Bedankt voor je hulp
Ja dat werkt inderdaad wel, maar dan krijg ik bij elke keer dat de functie wordt aangeroepen dezelfde tekst 'bla'.
Ik probeer het meer zo te doen dat iedere menu keuze zn eigen tekst en afbeelding heeft.

RandomT schreef op dinsdag 16 oktober 2007 @ 19:01:
Bij mij werkt het wel gewoon?

In de functie showtext:

JavaScript:

test.innerHTML="bla";

Onderaan html:

HTML:

<div id="test"></div>

[torx]

Uiteraard doe je dat door een extra parameter aan showtext toe te voegen. Ik ga hier niet gelijk een code-voorbeeld van geven, aangezien dit basis programmeren is. Mocht het na proberen toch niet lukken, dan wil ik je graag verder helpen.

[Duroth]

Even een kleine hint naar aanleiding van RandomT's reactie:

JavaScript:

showtext('JavaScript tutorials and scripts!','img01.png')

Daar is je tweede variabele al. Nu alleen nog zorgen dat er daadwerkelijk iets mee gedaan wordt

[BtM909]

Ik heb al geprobeerd bij Showtext wat toe te voegen dat er een 2e div wordt aangeroepen, maar dat werkte helaas niet.

Laat dan ook zien wat je hebt geprobeerd

Wie kan mij helpen ?

Dat klinkt gewoon als een copy and paste van een script ergens vandaan en zonder enige voorkennis hier een werrkend voorbeeld laten maken door mede bezoekers van dit forum

Dit topic gaat op slot, aangezien het niet de bedoeling is van dit subforum