Hallo iedereen

Even de situatie schetsen: ik wil 5 kleine foto's naast elkaar, en bij een mouseover bij een foto moet daaronder een titel of beschrijving (tekst) komen.

Schets: http://i41.tinypic.com/k21r91.png

Kan iemand mij hiermee helpen aub?

Op een website heb ik dit gevonden: (maar hier wordt onder de afbeeldingen bij mouseover een andere afbeelding geladen, ik had liever dat dus die tekst wordt getoond ipv een foto)

Code:

 
<script language="Javascript">
function hop(imgNaam)
{imgAan=eval(imgNaam + "on.src");
document.htu.src = imgAan;
}
 
function hneer(imgNaam)
{imgAf=eval(imgNaam + "off.src");
document.htu.src = imgAf;
}
 
ht0off= new Image(400,50);
ht0off.src="beschrijving0.gif";
ht1on= new Image(400,50);
ht1on.src="beschrijving1.gif";
ht2on= new Image(400,50);
ht2on.src="beschrijving2.gif";
ht3on= new Image(400,50);
ht3on.src="beschrijving3.gif";
ht4on= new Image(400,50);
ht4on.src="beschrijving4.gif";
ht5on= new Image(400,50);
ht5on.src="beschrijving5.gif";
</script>

Code:

 
<a href="menuk.htm" onmouseover="window.status='De Menukaart';hop('ht1');return true;" onmouseout="window.status='';hneer('ht0');return true;"> <img src="menukaart.jpg" width="50" height="50" alt="Menukaart" border="1" name="ht1"></a>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <a href="menum.htm" onmouseover="window.status='Het Maandmenu';hop('ht2');return true;" onmouseout="window.status='';hneer('ht0');return true;"> <img src="maandmenu.jpg" width="50" height="50" alt="Maandmenu" border="1" name="ht2"></a>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <a href="inter.htm" onmouseover="window.status='Foto\'s';hop('ht3');return true;" onmouseout="window.status='';hneer('ht0');return true;"> <img src="fotos.jpg" width="50" height="50" alt="Foto\'s" border="1" name="ht3"></a>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <a href="reser.htm" onmouseover="window.status='Reservaties';hop('ht4');return true;" onmouseout="window.status='';hneer('ht0');return true;"> <img src="reservaties.jpg" width="50" height="50" alt="Reservaties" border="1" name="ht4"></a>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <a href="trait.htm" onmouseover="window.status='Traiteur';hop('ht5');return true;" onmouseout="window.status='';hneer('ht0');return true;"> <img src="traiteur.jpg" width="50" height="50" alt="Traiteur" border="1" name="ht5"></a>
      <br><br>
      <img src="ga-met-je-muis-over-een-afbeelding-hierboven-voor-uitleg.gif" width="400" height="50" border="0" name="htu">

Alvast bedankt!

Groetjes
Herman

oei ziet er ingewikkeld uit, zal even snel een begin maken;

PHP Code:


<script>
function foto(id) {

if(id == 1) {
    document.getElementById("tekst")innerHTML = "tekst foto1";
}
if(id == 2) {
    document.getElementById("tekst")innerHTML = "tekst foto2";
}
if(id == 3) {
    document.getElementById("tekst")innerHTML = "tekst foto3";
}
if(id == 4) {
    document.getElementById("tekst")innerHTML = "tekst foto4";
}
if(id == 5) {
    document.getElementById("tekst")innerHTML = "tekst foto5";
}


}
</script>

<div onmouseover="foto(1)"><img src="" alt="" /></div>
<div onmouseover="foto(2)"><img src="" alt="" /></div>
<div onmouseover="foto(3)"><img src="" alt="" /></div>
<div onmouseover="foto(4)"><img src="" alt="" /></div>
<div onmouseover="foto(5)"><img src="" alt="" /></div>

<div id="tekst"></div> 


Bedankt voor je reactie, maar dit werkt jammer genoeg niet. Onder de afbeeldingen verschijnt er geen tekst bij een mouseover.

In de code van Melvin moet
document.getElementById("tekst")innerHTML
zijn:
document.getElementById("tekst").innerHTML

De punt moet tussen getElementById("tekst") en innerHTML komen te staan.

ps:

<div onmouseover="foto(1)"><img src="" alt="" /></div>
<div onmouseover="foto(2)"><img src="" alt="" /></div>
<div onmouseover="foto(3)"><img src="" alt="" /></div>
<div onmouseover="foto(4)"><img src="" alt="" /></div>
<div onmouseover="foto(5)"><img src="" alt="" /></div>

dit kan je veel korter maken door de divs weg te laten:

<img src="" alt="" onmouseover="foto(1)" />
<img src="" alt="" onmouseover="foto(2)" />
<img src="" alt="" onmouseover="foto(3)" />
<img src="" alt="" onmouseover="foto(4)" />
<img src="" alt="" onmouseover="foto(5)" />

Bedankt, dit werkt :)
Hoe kan je er nu nog voor zorgen dat er bij een mouseout geen tekst wordt weergegeven? Want als je nu bvb na foto3 met de muis naar een andere plaats gaat, blijft hij de tekst "foto3" tonen.

function weg() {
document.getElementById("tekst").innerHTML = '';
}

of

function weg() {
document.getElementById("tekst").style.display = 'none';
}

en dan met dit ;

onmouseout="weg()"

Oke bedankt!