Home/ Questions/Q 203849
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T17:24:55+00:00

I got this javascript code from off the internet. It’s a script that changes

  • 0

I got this javascript code from off the internet. It’s a script that changes a picture and it caption from the selection of an options drop down box. The script works fine. The only problem that I have is that the value in the option box can only be numbers. Is there anyway to tailor this whereas the value within the options parameter can be words instead of numbers? Here’s the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img{
height:200px;
width:250px;
display:block;
margin-top:10px;
}
#caption{
font-family:Verdana,tahoma,arial;
font-size:10pt;
text-align:center;
display:block;
width:250px;
}
</style>
<script type="text/javascript">
/************************************************************
* Script by : Raymond Angana
* Title: Dropdown Based Picture w/ Captions
* First seen in AFHB2000.com
* rangana in AHFB2000.com
* Created June 5, 2008
* This notice must stay intact
/**********************************************************/
window.onload=function()
{
    var caption=['Default Image Caption',
                'Caption1',
                'Caption2',
                'Caption3',
                'Caption4',
                'Caption5',
                'Caption6',
                'Caption7',
                'Caption8',
                'Caption9'], // This will be your images caption
    bp='http://h1.ripway.com/rangana/images/', //base url of your images
    imgnum=14, //Number of your images. This should match on your comboboxes options.
    thumb=document.getElementById('thumb'), //id of your image that will be changing
    description=document.getElementById('caption'), //id of your caption
    combobox=document.getElementById('selection'); // id of your combobox.

    combobox.onchange=function()
    {
    thumb.src=bp+'Picture'+this.value+'.jpg';
    description.innerHTML=caption[this.value];
    }
}
</script>
</head>
<body>
<label>Please Change the default picture: </label>
<select id="selection">
<option>Change Picture</option>
<option value="1">Image 1</option>
<option value="2">Image 2</option>
<option value="3">Image 3</option>
<option value="4">Image 4</option>
<option value="5">Image 5</option>
<option value="6">Image 6</option>
<option value="7">Image 7</option>
<option value="8">Image 8</option>
<option value="9">Image 9</option>
</select>
<br>
<img src="http://h1.ripway.com/rangana/images/Picture1.png" alt="mypic" id="thumb">
<span id="caption">Caption for the default Image</span>
</body>
</html>

Any help would be greatly appreciated

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The value attribute can be text, it doesn’t have to be a number. The only thing that will break in the above code is:

    description.innerHTML=caption[this.value];

    You can replace that to be:

    description.innerHTML = caption[this.selectedIndex]
    • 0