[javascript]mouse-over plaatje

[The One Pizza]

Ik wil graag op mijn website een menu maken met daarin plaatjes. Wanneer je dan je muis boven dat plaatje houd wil ik graag dat plaatje laten zien met daaronder een tekst. Een gewoon mouseover plaatje maken lukt me wel, maar die tekst eronder is het probleem. Heb al een tijdje op Google en het forum gezocht maar geen code gevonden die dit voor mij kan doen.
Ik heb een stuk of 8 plaatjes dus de code moet goed te bewerken zijn.Hoop dat iemand een idee heeft hoe ik dit kan oplossen??

[BtM909]

Makkelijkste manier is eens te kijken zoeken naar de volgende 2 kreten:
• document.getElementById
• innerText / innerHTML

Succes

[Morrar]

Waarom doe je niet zoiets?

code:

<div>
[img]"bla.gif"[/img]
<div id="plaat1_txt">Tekst hiero</div>
</div>

en dan de JS functie:

code:

function swap(sId, mode)
{   oImg = document.getElementById(sId);
    oTxt = document.getElementById(sId + '_txt');

    if(mode)
    {   oImg.src = 'bla_active.gif';
        oTxt.style.display = 'block';
    }
    else
    {   oImg.src = 'bla_passive.gif';
        oTxt.style.display = 'none';
    }
}

//Edit: eigenlijk is dit wel redelijk basic en zeker te vinden als je een beetje weet waarop je moet zoeken

[ Voor 43% gewijzigd door Morrar op 05-03-2005 17:04 ]

[The One Pizza]

Ik had zelf dit:

code:

<a href="index2.php?pagina=1" target="_blank"
    onMouseOver="this.innerHTML = '[img]"picture.gif"[/img]text' "
    onMouseOut="this.innerHTML = '[img]"picture.gif"[/img]' ">

[ Voor 62% gewijzigd door The One Pizza op 05-03-2005 18:21 ]

[The One Pizza]

Morrar schreef op zaterdag 05 maart 2005 @ 17:02:
Waarom doe je niet zoiets?

code:

<div>
[img]"bla.gif"[/img]
<div id="plaat1_txt">Tekst hiero</div>
</div>

en dan de JS functie:

code:

function swap(sId, mode)
{   oImg = document.getElementById(sId);
    oTxt = document.getElementById(sId + '_txt');

    if(mode)
    {   oImg.src = 'bla_active.gif';
        oTxt.style.display = 'block';
    }
    else
    {   oImg.src = 'bla_passive.gif';
        oTxt.style.display = 'none';
    }
}

//Edit: eigenlijk is dit wel redelijk basic en zeker te vinden als je een beetje weet waarop je moet zoeken

Het is alleen lastig om dit voor een stuk of 8 plaatjes te doen....

[Morrar]

Waarom is dat lastig voor 8 plaatjes? Het is minder typwerk als je originele oplossing volgens mij

Alleen codefragment 1 hoef je 8x te herhalen, dat teede fragment (function swap) hoeft 1x in de header van je HTML-bestand...

Dus voor 4 plaatjes (als je zelf niet wilt typen):

code:

<div>
[img]"bla.gif"[/img]
<div id="plaat1_txt">Tekst hiero</div>
</div>
<div>
[img]"bla.gif"[/img]
<div id="plaat2_txt">Tekst hiero</div>
</div>
<div>
[img]"bla.gif"[/img]
<div id="plaat3_txt">Tekst hiero</div>
</div>
<div>
[img]"bla.gif"[/img]
<div id="plaat4_txt">Tekst hiero</div>
</div>

Lijkt me vrij goed te doen of niet?

[MNeMoNiCS]

Misschien is dit nog iets (CSS "popups"):

http://www.meyerweb.com/eric/css/edge/popups/demo.html
http://www.meyerweb.com/eric/css/edge/popups/demo2.html

[The One Pizza]

nog bedankt allemaal heb toch maar het script van Morrar als basis gebruikt.