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.
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.