Have Geek Brain

Javascript option selection problem

I got this javascript code from internet. This is a script that changes the image and its title from a selection dropdown list of options. The script works fine. The only problem I am having is that the value in the option field can only be a number. Is there a way to adapt this where the value inside 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

0


a source to share


2 answers


The value attribute can be text, it must not be a number. The only thing that breaks in the above code is:

description.innerHTML=caption[this.value];


You can replace this:

description.innerHTML = caption[this.selectedIndex]
+1


a source


I don't know the reason why you would like to have the word in the parameter value, if you have the word then it will be difficult to get the signature.

If the goal is to get a specific image for the selected parameter, and if you want to put your own image name instead of "Picture" + id, I would change as shown below.

In, onLoad

change the header of the array as shown below (add additional parameters and corresponding images):

var appimages=[['Caption1','image1.gif'],['Caption2','image2.gif']];


And the onChange

function will change as shown below:

thumb.src=bp+appimages[this.value][1];
description.innerHTML=appimages[this.value][0];

Hope it helps.

0


a source






More articles:


All Articles