Dropdownlist die bij een keuze een afbeelding plaatst

Status
Niet open voor verdere reacties.
R

Roland Boertjes

Gebruiker
Lid geworden
31 okt 2010
Berichten
21
Alhoewel ik een beginnende gebruiker ben en alles gezocht heb, kan ik toch niet vinden wat ik bedoel.
Ik wil een regel met bv. week 42. Als ik daar op klik verschijnen de volgende weeknummers.
Bij keuze van een van de weeknummers moet op een bepaalde plaats een afbeelding geplaatst worden.

Bij voorbaat dank voor uw hulp.
 
Je kunt geen afbeeldingen opnemen in een select, dan moet je een javascript zoeken die dat wel ondersteunt. Helaas ken ik er zo geen, maar er zijn er vast genoeg :)
 
In Firefox kan je trouwens wel afbeeldingen opnemen in een select: http://jan.moesen.nu/code/html-css/drop-down-image-list/ Maar volgens mij is dat niet wat de TS wilt, volgens mij wilt hij dat er, afhankelijk van de keuze in een "normale" dropdown list, ergens anders op de pagina een afbeelding verschijnt.

HTML: 
<html>
<head>
<title>Weken</title>
<script type="text/javascript">
<!--
function plaatsAfbeelding(index)
{
  var afbeelding = "";
  switch(index)
  {
    case 0: afbeelding = "plaatje1.jpg";  // eerste keuze uit de dropdown list
                break;
    case 1: afbeelding = "plaatje2.jpg";  // tweede keuze uit de dropdown list
                break;
    case 2: afbeelding = "plaatje3.jpg";
                break;
  }
  document.getElementById('afbeelding').innerHTML = '<img src="'+afbeelding+'" alt="leuk plaatje">';
}
// -->
</script>
</head>
<body>
<form>
<select name="weken" onChange="plaatsAfbeelding(this.selectedIndex)">
<option>week 42</option>
<option>week 43</option>
<option>week 44</option>
</select>
</form>
<div id="afbeelding">hier komt de afbeelding</div>
</body>
</html>

In plaats van "this.selectedIndex" kan je ook "this.value" gebruiken. Het voordeel daarvan is dat je in de functie de namen kan gebruiken (in dit geval "week 42", "week 43" en "week 44"), maar dit werkt niet in alle browsers (in Netscape 4.x werkt dit bijvoorbeeld niet (of je daar rekening mee wilt/moet houden is een andere vraag)).
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan