Solved

select element, onChange needs to switch a photo

Posted on 2010-11-11
6
231 Views
Last Modified: 2012-05-10
See my code attached. I think I'm pretty close on this, but it isn't working. The onChange event on the <select> element is supposed to pass "img" plus the selected value of the <select> element to the switchphoto function. Which should change the source of the "mainimage" <img> on the page. However, switching the <select> menu has no effect. Suggestions? Thank you!
<script language="javascript" type="text/javascript">
if (document.images) {
var imgreb-053 = new Image()
imgreb-053.src = "http://www.lenoradame.com/lm_scans/reb-053.jpg"
var imgreb-053a = new Image()
imgreb-053a.src = "http://www.lenoradame.com/lm_scans/reb-053a.jpg"
var imgreb-053b = new Image()
imgreb-053b.src = "http://www.lenoradame.com/lm_scans/reb-053b.jpg"
var imgreb-053c = new Image()
imgreb-053c.src = "http://www.lenoradame.com/lm_scans/reb-053c.jpg"
}

function switchphoto(imgName) {
if (document.images)
mainimage.src = eval(imgName + '.src')
}
</script>

<img name="mainimage" src="http://www.lenoradame.com/lm_scans/reb-053.jpg" width="450" height="450" border="0" alt="" />

<select name="itemnum" onChange="switchphoto('img'+this.value);"><option value="reb-053">Silver - $112.00</option><option value="reb-053a">Blue/Green - $112.00</option><option value="reb-053b">Green/Purple - $112.00</option><option value="reb-053c">Red - $112.00</option></select>

Open in new window

0
Comment
Question by:bbdesign
  • 3
  • 3
6 Comments
 
LVL 6

Expert Comment

by:CyberGhost
ID: 34115190
things changed in the code:
1. ID added to the mainimage IMG
2. lookup in the switchphoto() function is using getElementById() to select the correct image on page
3. the way of accessing your global variables (imgreb-...) changed, so it does not need to use eval()


<script language="javascript" type="text/javascript">
if (document.images) {
var imgreb-053 = new Image()
imgreb-053.src = "http://www.lenoradame.com/lm_scans/reb-053.jpg"
var imgreb-053a = new Image()
imgreb-053a.src = "http://www.lenoradame.com/lm_scans/reb-053a.jpg"
var imgreb-053b = new Image()
imgreb-053b.src = "http://www.lenoradame.com/lm_scans/reb-053b.jpg"
var imgreb-053c = new Image()
imgreb-053c.src = "http://www.lenoradame.com/lm_scans/reb-053c.jpg"
}

function switchphoto(imgName) {
if (document.images)
document.getElementById('mainimage').src = window[imgName + '.src']);
}
</script>

<img name="mainimage" name="id" src="http://www.lenoradame.com/lm_scans/reb-053.jpg" width="450" height="450" border="0" alt="" />

<select name="itemnum" onChange="switchphoto('img'+this.value);"><option value="reb-053">Silver - $112.00</option><option value="reb-053a">Blue/Green - $112.00</option><option value="reb-053b">Green/Purple - $112.00</option><option value="reb-053c">Red - $112.00</option></select>
0
 

Author Comment

by:bbdesign
ID: 34115347
Did you mean to put: name="id"
?
0
 

Author Comment

by:bbdesign
ID: 34115391
Messed around with it, here is what I have, still not working:

<script language="javascript" type="text/javascript">
if (document.images) {
var imgreb-053 = new Image()
imgreb-053.src = "http://www.lenoradame.com/lm_scans/reb-053.jpg"
var imgreb-053a = new Image()
imgreb-053a.src = "http://www.lenoradame.com/lm_scans/reb-053a.jpg"
var imgreb-053b = new Image()
imgreb-053b.src = "http://www.lenoradame.com/lm_scans/reb-053b.jpg"
var imgreb-053c = new Image()
imgreb-053c.src = "http://www.lenoradame.com/lm_scans/reb-053c.jpg"
}

function switchphoto(imgName) {
if (document.images)
document.getElementById("mainimage").src = window['img'+imgName+'.src']
}
</script>

<img name="mainimage" id="mainimage" src="http://www.lenoradame.com/lm_scans/reb-053.jpg" width="450" height="450" border="0" alt="" />

<select name="itemnum" onChange="switchphoto('img'+this.value);"><option value="reb-053">Silver - $112.00</option><option value="reb-053a">Blue/Green - $112.00</option><option value="reb-053b">Green/Purple - $112.00</option><option value="reb-053c">Red - $112.00</option></select>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Accepted Solution

by:
CyberGhost earned 500 total points
ID: 34116137
sorry, I was in a bit of rush when answering and did not review the code closely
this is a working code, where:
1. you don't need to create new images, simply assign the image values to global text variables
2. you need to replace the minus sign (-) by an underscore (_) or JS will think you want to do mathematic operations with that pieces of variable (i.e. imgreb-053c is the same as doing: "imgreb - 053c = ???")

<script language="javascript" type="text/javascript">
if (document.images) {
var imgreb_053 = "http://www.lenoradame.com/lm_scans/reb-053.jpg";
var imgreb_053a = "http://www.lenoradame.com/lm_scans/reb-053a.jpg";
var imgreb_053b = "http://www.lenoradame.com/lm_scans/reb-053b.jpg";
var imgreb_053c = "http://www.lenoradame.com/lm_scans/reb-053c.jpg";
}

function switchphoto(imgName) {
if (document.images)
document.getElementById("mainimage").src = window[imgName]
}
</script>

<img name="mainimage" id="mainimage" src="http://www.lenoradame.com/lm_scans/reb-053.jpg" width="450" height="450" border="0" alt="" />

<select name="itemnum" onChange="switchphoto('img'+this.value);"><option value="reb_053">Silver - $112.00</option><option value="reb_053a">Blue/Green - $112.00</option><option value="reb_053b">Green/Purple - $112.00</option><option value="reb_053c">Red - $112.00</option></select>
0
 

Author Comment

by:bbdesign
ID: 34117038
I think that does it, thanks! I wonder if the whole issue was the - vs. _ thing. Anyway, thanks again.
0
 
LVL 6

Expert Comment

by:CyberGhost
ID: 34119076
well, it might've been... I've never used new Image() before, not even sure if that exists :-D
glad to help anyways :-)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to make google charts responsive 4 46
Accordion won't close correctly 5 12
selected value 16 24
Glitching Slide Show 19 26
In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

735 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question