PDA

View Full Version : Calling function in Select Menu.



merlyn
02-01-2005, 09:42 PM
I am trying to change images with an on mouse over for each option however cannot seem to get it to call a function from there. Heres the code. I need <option> to call carOne() for the first, carTwo for the second and so on. Anyone know a way how to achieve this ? Is it even possible ?


The code:

---------------------------------------------------

<html>
<head>
<title>
"Page Title"
</title>
<script language="javascript"
type="text/javascript">
<!--

//*Car price script. Shows price for selected Car.

var CarPrice = new Array(
"",
"$11,250.00",
"$15,400.00",
"SOLD",
"$21,600.00")

function showPrice(myForm) {
itemNumb = myForm.CarList.selectedIndex
document.CarMenu.CarPrice.value = CarPrice[itemNumb]
}

//*Car description script. Shows Car description.

var CarDescribe = new Array(
"",
"383ci v-8, Automatic. CLEAN!",
"440ci v-8, 4spd Manual. FAST!",
"SOLD",
" 426 HEMI, 4spd Manual. FAST!")

function showDescribe(myForm) {
itemNumb = myForm.CarList.selectedIndex
document.CarMenu.CarDescribe.value = CarDescribe[itemNumb]
}

//*Shows selected Cars Image.

function carOne() {
document.Image1.src = "images/66_satellite_1.jpg"
}

function carTwo() {
document.Image1.src = "images/68_GTX_1.jpg"
}

function carThree() {
document.Image1.src = "images/68_satellite_2.jpg"
}

function carFour() {
document.Image1.src = "images/69_Super_Bee_4.jpg"
}


//-->
</script>
</head>

<body>
<font face="font" color="fcolor">
<table height="" width="">
<tr>
<td>
<form name="CarMenu">
<select name="CarList">
<option >Select
<option>1966 Satellite
<option>1968 Plymouth GTX.
<option>1968 Satellite.
<option>1969 Super Bee.
</select>
<p><input type="text" size="50" style="border: none" value=" " name="CarDescribe">
<p><input type="text" value=" " style="border: none" name="CarPrice">
<p><input type="button" value="About" onclick="showDescribe(CarMenu);showPrice(CarMenu)">
</form>
</td>
<td><img src="images/.jpg" Name="Image1" width="99" height="100"></td>
</tr>
</table>

<script language="javascript"
type="text/javascript">
<!--

//-->
</script>

</font>
</body>
</html>

-------------------------------------------

Is it possible to call a function from the <option> tag in the list to change Image1 to the selected item ? I was aiming for an on mouse over rather than putting the images in an array and having them show when the button is clicked cause I would like to see the image before makeing a choice to see the info with the button click. I could do this fine with links however that is not an option here. If need be Ill put them in an array and call it with the other two functions. I just thought there should be a way to do it how I am imagining it.

Thanks in advance for any help.