...

View Full Version : using drop down menu to change multiple images



jay83r
01-16-2012, 10:49 PM
Hi there, i've run into a bit of a problem, i've managed to get javascript to change an image when choosing an option from a dropdown menu, but when i try to get it to change multiple images it only ever changes one image...


<script type="text/javascript">
function changeWalls(what, whatimg)
{
if(what != "none")
{
document.images[whatimg].src = what;
}
}
</script>
<select name="Walls" onchange="changeWalls(this.value,'walls')">
<option value="images/white.gif" selected="selected">Please Select a Colour</option>
<option value="images/WALLCC.png">Classic Cream</option>
<option value="images/WALLSG.png">Shale Grey</option>
<option value="images/WALLDO.png">Deep Ocean</option>
<option value="images/WALLSM.png">Surfmist</option>
</select>

then the images i want are multiples so i want to change 2 of these

<img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls2" />

Old Pedant
01-16-2012, 11:37 PM
So show what the second <img> tag looks like.

And do you mean that both of the <img>s will get the *same* new .src? Or that each gets a different .src?

jay83r
01-16-2012, 11:55 PM
they will both have the same src so basically changing 2 images that are duplicated on the page in different areas from the one dropdown box.


<img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls3" />

xelawho
01-17-2012, 01:37 AM
why pass the "walls" variable if you're never going to change it? unless I'm confused, you can make your onchange like this:


<select name="Walls" onchange="changeWalls(this.value)">

and your function like this:


function changeWalls(what)
{
if(what != "none")
{
document.getElementById('walls2').src = what;
document.getElementById('walls3').src = what;
}
}

Old Pedant
01-17-2012, 02:22 AM
Yeah, exactly what I was going to suggest.

And names for <img> tags is kind of retro, so zap the names and stick with ids, only.

jay83r
01-17-2012, 04:24 AM
Thanks for that it works well... is there a reason why i can't do this more than once on the same page... it works the first time but not the second.
<script type="text/javascript">
function changeWalls(what, whatimg)
{
if(what != "none")
{
document.getElementById('walls2').src = what;
document.getElementById('walls3').src = what;
}
}
</script>
<select name="Walls" onchange="changeWalls(this.value)">
<option value="images/white.gif" selected="selected">Please Select a Colour</option>
<option value="images/WALLCC.png">Classic Cream</option>
<option value="images/WALLSG.png">Shale Grey</option>
<option value="images/WALLDO.png">Deep Ocean</option>
<option value="images/WALLSM.png">Surfmist</option>
</select>
</p>
<p>
<p>

<script type="text/javascript">
function changeSides(what, whatimg)
{
if(what != "none")
{
document.getElementById('sides1').src = what;
document.getElementById('sides2').src = what;
}
}
</script>
<select name="Sides" onchange="changeSides(this.value)">
<option value="images/white.gif" selected="selected">Please Select a Colour</option>
<option value="images/SIDECC.png">Classic Cream</option>
<option value="images/SIDESG.png">Shale Grey</option>
<option value="images/SIDEDO.png">Deep Ocean</option>
<option value="images/SIDESM.png">Surfmist</option>
</select>

xelawho
01-17-2012, 05:50 AM
dunno... we'd probably have to see your html. are you sure you have your div ids correct?

but if you're going to do the same thing with various selects you can use the one function like this:



function changePic(what, one,two) {
if(what != "none"){
document.getElementById(one).src = what;
document.getElementById(two).src = what;
}
}


and have your select onchanges like this:



<select name="Walls" onchange="changePic(this.value,'walls2',walls3')">
<select name="Sides" onchange="changePic(this.value,'sides1','sides2')">

etc

jay83r
01-17-2012, 05:56 AM
this is what i have... let me know the easiest way. i thought each function was named differently so they were independant

<title>Untitled Document</title>
<style type="text/css">
.auto-style1 {font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.auto-style2 { font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}
.auto-style21 {background-color: #86FF00;
}
.auto-style3 { border: 2px solid #008000;
}
.layered {
position: relative;
}
body {
background-image: url(images/logobk.jpg);
background-repeat: no-repeat;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>



<body>
<p>&nbsp;</p>
<p class="auto-style2">Best Sheds Ordering System</p>
<p class="auto-style2"><span class="auto-style1">1. Enter Customer Details&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
2. Choose Your Shed Type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 3. </span><span class="auto-style21">Choose
Options</span><span class="auto-style1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 4. Print a Quote&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
5. Order </span></p>
<form action="" method="post" name="form1" id="form1">
<p class="auto-style2">The Standard Inclusions for your Single Garage have been already selected, choose options below to modify.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p>
<p class="auto-style2">To modify your order please choose options from the
list below.</p>
<p class="auto-style2">Dimension Settings of Shed: </p>
<p class="auto-style2">Height
<label for="height"></label>
<select name="height" id="height">
<option value="2.4m">2.4m</option>
<option value="2.7m">2.7m</option>
<option value="3.0m">3.0m</option>
</select>
Width
<label for="width"></label>
<select name="width" id="width">
<option value="3.0m">3.0m</option>
<option value="3.6m">3.6m</option>
<option value="4.2m">4.2m</option>
<option value="5.0m">5.0m</option>
</select>
Length
<label for="length"></label>
<select name="length" id="length">
<option value="4.0m 1 Bay">4.0m 1 Bay</option>
<option value="5.0m 1 Bay">5.0m 1 Bay</option>
<option value="6.0m 2 Bays">6.0m 2 Bays</option>
<option value="7.0m 2 Bays">7.0m 2 Bays</option>
</select>
</p>
</form>
<p class="auto-style2">Colour Selector</p>
<table width="1254" border="1">
<tr>
<td width="268">Flashings
<script type="text/javascript">
function changeFlashing(what, whatimg)
{
if(what != "none")
{
document.images[whatimg].src = what;
}
}
</script>
<select name="Flashing2" onchange="changeFlashing(this.value,'flashing')">
<option value="deepocean.gif" selected="selected">Please Select a Colour</option>
<option value="classiccream.gif">Classic Cream</option>
<option value="shalegrey.gif">Shale Grey</option>
<option value="deepocean.gif">Deep Ocean</option>
<option value="surfmist.gif">Surfmist</option>
</select>
<img src="deepocean.gif" alt="" name="flashing" border="0" id="flashing" /></td>
<td width="285">Rollerdoors
<script type="text/javascript">
function changeRollerdoors(what, whatimg)
{
if(what != "none")
{
document.images[whatimg].src = what;
}
}
</script>
<select name="Rollerdoors2" onchange="changeRollerdoors(this.value,'rollerdoors')">
<option value="white.gif" selected="selected">Please Select a Colour</option>
<option value="classiccream.gif">Classic Cream</option>
<option value="shalegrey.gif">Shale Grey</option>
<option value="deepocean.gif">Deep Ocean</option>
<option value="surfmist.gif">Surfmist</option>
</select>
<img src="surfmist.gif" alt="" name="rollerdoors" border="0" id="rollerdoors" /></td>
<td width="238"><p>Walls</p>
<p> <script type="text/javascript">
function changeWalls(what, whatimg)
{
if(what != "none")
{
document.getElementById('walls2').src = what;
document.getElementById('walls3').src = what;
}
}
</script>
<select name="Walls" onchange="changeWalls(this.value)">
<option value="images/white.gif" selected="selected">Please Select a Colour</option>
<option value="images/WALLCC.png">Classic Cream</option>
<option value="images/WALLSG.png">Shale Grey</option>
<option value="images/WALLDO.png">Deep Ocean</option>
<option value="images/WALLSM.png">Surfmist</option>
</select>
</p>
<p>
<p>

<script type="text/javascript">
function changeSides(what, whatimg)
{
if(what != "none")
{
document.getElementById('sides1').src = what;
document.getElementById('sides2').src = what;
}
}
</script>
<select name="Sides" onchange="changeSides(this.value)">
<option value="images/white.gif" selected="selected">Please Select a Colour</option>
<option value="images/SIDECC.png">Classic Cream</option>
<option value="images/SIDESG.png">Shale Grey</option>
<option value="images/SIDEDO.png">Deep Ocean</option>
<option value="images/SIDESM.png">Surfmist</option>
</select>
</p></td>
<td width="435">Roofing
<label for="flashingcolour4"></label>
<label for="flashings4"></label>
<script type="text/javascript">
function changeRoofing(what, whatimg)
{
if(what != "none")
{
document.getElementById('roof2').src = what;
document.getElementById('roof3').src = what;
}
}
</script>
<select name="Roofing" onchange="changeRoofing(this.value,'roofing')">
<option value="white.gif" selected="selected">Please Select a Colour</option>
<option value="classiccream.gif">Classic Cream</option>
<option value="shalegrey.gif">Shale Grey</option>
<option value="deepocean.gif">Deep Ocean</option>
<option value="surfmist.gif">Surfmist</option>
</select></td>
</tr>
</table>
<table width="90%" height="478" class="auto-style3" style="width: 100%">
<tr>
<td><table width="88%" class="auto-style3" style="width: 100%">
<tr>
<td width="39%" height="220"><p class="auto-style2"><strong>Front of Shed</strong></p>
<p><span class="auto-style2">Rollerdoors </span>
<?php
echo '<select name="rollerdoorfront">';
echo '<option value="">--Select--</option>';
while($opt = mysql_fetch_array($resultOptions))
{
echo '<option value="'.$opt['size'].'">'.$opt['size'].'</option>';
}
echo '</select>';

?>
Left
<input type="checkbox" name="rollerdoorleft" id="rollerdoorleft" />
<label for="rollerdoorleft"></label>
Centre
<input type="checkbox" name="rollerdoorleft" id="rollerdoorleft" />
<label for="rollerdoorleft"></label>
Right
<input type="checkbox" name="rollerdoorleft" id="rollerdoorleft" />
<label for="rollerdoorleft"></label>
</p>
<p><span class="auto-style2">PA Doors </span>
<select class="auto-style2" name="Select5">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<span class="auto-style2"> </span>Left
<input type="checkbox" name="rollerdoorleft2" id="rollerdoorleft2" />
<label for="rollerdoorleft2"></label>
Centre
<input type="checkbox" name="rollerdoorleft2" id="rollerdoorleft2" />
<label for="rollerdoorleft2"></label>
Right
<input type="checkbox" name="rollerdoorleft2" id="rollerdoorleft2" />
<label for="rollerdoorleft2"></label>
</p>
<p><span class="auto-style2">Windows </span>
<select class="auto-style2" name="Select9">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<span class="auto-style2"> </span>Left
<input type="checkbox" name="rollerdoorleft3" id="rollerdoorleft3" />
<label for="rollerdoorleft3"></label>
Centre
<input type="checkbox" name="rollerdoorleft3" id="rollerdoorleft3" />
<label for="rollerdoorleft3"></label>
Right
<input type="checkbox" name="rollerdoorleft3" id="rollerdoorleft3" />
<label for="rollerdoorleft3"></label>
</p></td>
<td width="5%">
<div align="center"><img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls2" /></div></td>
<td width="56%" colspan="2" rowspan="2"><p class="auto-style2">&nbsp;</p> <!<img src="images/front_0002_front-wall-colour.png" alt="" name="front" id="front3" /> <p class="auto-style2">&nbsp;</p></td>
</tr>
<tr>
<td height="222"><p class="auto-style2"><strong>Back of Shed</strong></p>
<p><span class="auto-style2">Rollerdoors </span>
<?php
echo '<select name="rollerdoorrear">';
echo '<option value="">--Select--</option>';
while($opt = mysql_fetch_array($resultOptions2))
{
echo '<option value="'.$opt['size'].'">'.$opt['size'].'</option>';
}
echo '</select>';

?>
Left
<input type="checkbox" name="rollerdoorleft7" id="rollerdoorleft7" />
<label for="rollerdoorleft7"></label>
Centre
<input type="checkbox" name="rollerdoorleft7" id="rollerdoorleft7" />
<label for="rollerdoorleft7"></label>
Right
<input type="checkbox" name="rollerdoorleft7" id="rollerdoorleft7" />
<label for="rollerdoorleft7"></label>
</p>
<p><span class="auto-style2">PA Doors </span>
<select class="auto-style2" name="Select6">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Left
<input type="checkbox" name="rollerdoorleft8" id="rollerdoorleft8" />
<label for="rollerdoorleft8"></label>
Centre
<input type="checkbox" name="rollerdoorleft8" id="rollerdoorleft8" />
<label for="rollerdoorleft8"></label>
Right
<input type="checkbox" name="rollerdoorleft8" id="rollerdoorleft8" />
<label for="rollerdoorleft8"></label>
</p>
<p><span class="auto-style2">Windows </span>
<select class="auto-style2" name="Select10">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Left
<input type="checkbox" name="rollerdoorleft9" id="rollerdoorleft9" />
<label for="rollerdoorleft9"></label>
Centre
<input type="checkbox" name="rollerdoorleft9" id="rollerdoorleft9" />
<label for="rollerdoorleft9"></label>
Right
<input type="checkbox" name="rollerdoorleft9" id="rollerdoorleft9" />
<label for="rollerdoorleft9"></label>
</p></td>
<td><div align="center"><img src="images/front_0002_front-wall-colour.png" alt="" name="walls" border="0" id="walls3" /></div></td>
</tr>
<tr>
<td height="219" class="auto-style2"><p class="auto-style2"><strong>Left of Shed</strong></p>
<p>Rollerdoors
<?php
echo '<select name="rollerdoorleft">';
echo '<option value="">--Select--</option>';
while($opt = mysql_fetch_array($resultOptions3))
{
echo '<option value="'.$opt['size'].'">'.$opt['size'].'</option>';
}
echo '</select>';

?>
Left
<input type="checkbox" name="rollerdoorleft4" id="rollerdoorleft4" />
<label for="rollerdoorleft4"></label>
Centre
<input type="checkbox" name="rollerdoorleft4" id="rollerdoorleft4" />
<label for="rollerdoorleft4"></label>
Right
<input type="checkbox" name="rollerdoorleft4" id="rollerdoorleft4" />
<label for="rollerdoorleft4"></label>
</p>
<p>PA Doors
<select class="auto-style2" name="Select8">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Left
<input type="checkbox" name="rollerdoorleft5" id="rollerdoorleft5" />
<label for="rollerdoorleft5"></label>
Centre
<input type="checkbox" name="rollerdoorleft5" id="rollerdoorleft5" />
<label for="rollerdoorleft5"></label>
Right
<input type="checkbox" name="rollerdoorleft5" id="rollerdoorleft5" />
<label for="rollerdoorleft5"></label>
</p>
<p>Windows
<select class="auto-style2" name="Select12">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Left
<input type="checkbox" name="rollerdoorleft6" id="rollerdoorleft6" />
<label for="rollerdoorleft6"></label>
Centre
<input type="checkbox" name="rollerdoorleft6" id="rollerdoorleft6" />
<label for="rollerdoorleft6"></label>
Right
<input type="checkbox" name="rollerdoorleft6" id="rollerdoorleft6" />
<label for="rollerdoorleft6"></label>
</p></td>
<td class="auto-style2"><img src="images/ROOFCC.png" alt="" name="front" id="sides3" /><img src="images/side.png" alt="" name="sides id="sides1" /></td>
<td colspan="2" class="auto-style2">&nbsp;</td>
</tr>
<tr>
<td class="auto-style2"><p class="auto-style2"><strong>Right of Shed</strong></p>
<p>Rollerdoors
<?php
echo '<select name="rollerdoorright">';
echo '<option value="">--Select--</option>';
while($opt = mysql_fetch_array($resultOptions))
{
echo '<option value="'.$opt['size'].'">'.$opt['size'].'</option>';
}
echo '</select>';

?>
Left
<input type="checkbox" name="rollerdoorleft11" id="rollerdoorleft11" />
<label for="rollerdoorleft11"></label>
Centre
<input type="checkbox" name="rollerdoorleft11" id="rollerdoorleft11" />
<label for="rollerdoorleft11"></label>
Right
<input type="checkbox" name="rollerdoorleft11" id="rollerdoorleft11" />
<label for="rollerdoorleft11"></label>
</p>
<p>PA Doors
<select class="auto-style2" name="Select7">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Left
<input type="checkbox" name="rollerdoorleft10" id="rollerdoorleft10" />
<label for="rollerdoorleft10"></label>
Centre
<input type="checkbox" name="rollerdoorleft10" id="rollerdoorleft10" />
<label for="rollerdoorleft10"></label>
Right
<input type="checkbox" name="rollerdoorleft10" id="rollerdoorleft10" />
<label for="rollerdoorleft10"></label>
</p>
<p>Windows
<select class="auto-style2" name="Select11">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Left
<input type="checkbox" name="rollerdoorleft12" id="rollerdoorleft12" />
<label for="rollerdoorleft12"></label>
Centre
<input type="checkbox" name="rollerdoorleft12" id="rollerdoorleft12" />
<label for="rollerdoorleft12"></label>
Right
<input type="checkbox" name="rollerdoorleft12" id="rollerdoorleft12" />
<label for="rollerdoorleft12"></label>
</p></td>
<td class="auto-style2"><img src="images/ROOFCC.png" alt="" name="roofing" id="roofing" /><img src="images/side.png" alt="" name="front" id="sides2" /></td>
<td colspan="2" class="auto-style2">&nbsp;</td>
</tr>
<tr>
<td class="auto-style2"><p><strong>Lean To Options:</strong></p>
<p>Left side of shed
<input type="checkbox" name="leantoleft" id="leantoleft" />
<label for="leantoleft"></label>
</p>
<p>Right Side of shed
<input type="checkbox" name="leantoright" id="leantoright" />
<label for="leantoright"></label>
</p></td>
<td class="auto-style2"><p align="center"><strong>Garaport Options:</strong></p>
<p align="center">Front of Shed
<input type="checkbox" name="garaportfront" id="garaportfront" />
<label for="garaportfront"></label>
</p>
<p align="center">Back of Shed
<input type="checkbox" name="garaportrear" id="garaportrear" />
<label for="garaportrear"></label>
</p></td>
<td colspan="2" class="auto-style2"><p>&nbsp;</p></td>
</tr>
</table></td>
</tr>
</table>
<p>&nbsp;</p>
<form method="post">
<p>
<input class="auto-style2" name="Submit1" type="submit" value="save" />
</p>
</form>
</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

xelawho
01-17-2012, 06:59 AM
:eek:

that's alot of html to wade through.

if you are doing the same thing various times you can use the same function. It is kept independent by the fact that you feed different variables into it.

the code that I gave you should work - your elements have ids that match the code that calls them. It must be something else, but I can't see it. With this much code, a live page is easier to debug. You wouldn't happen to have a link, would you?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum