...

View Full Version : Onclick IMG Array Help



jamz159
06-21-2010, 10:42 PM
Hello,

I am trying to use the onclick function to allow a user to change the color of a photo. Everything works but I need a more practical way than using a bunch of IF statements. Here is what I have so far. This is just the function part I can include it all if needed.


function changeImage(c_img) {
if(c_img == "cameo") {
document.images("changingImage").src = "content/Image/Cameo.jpg";
} else {
document.images("changingImage").src = "content/Image/GreenChili.jpg";
}


Now I need to add 12 more imgs to this. It works if I throw 12 more if(c_img...)but there must be a better way. I am kinda a newbie when it comes to Java..

Thanks for any advice.

jamz159
06-21-2010, 11:36 PM
An array was not the correct route for this problem. The switch statement worked well.

function changeImage(c_img) {
switch(c_img)
{
case "image1":
document.images("changingImage").src = "content/Image/image1.jpg";
break;
case "image2":
document.images("changingImage").src = "content/Image/image2.jpg";
break;
}
}

jmrker
06-22-2010, 01:50 PM
Hello,
...
Now I need to add 12 more imgs to this. It works if I throw 12 more if(c_img...)but there must be a better way. I am kinda a newbie when it comes to Java..

Thanks for any advice.

The switch method is a much better way to go.

Question I have is:
Are there 12 more <img> tags or are you trying to change the one image location with a change to the 'src=' value?
There may be an easier way still to do what you wish to accomplish (if I understand your needs).

With a slight modification to your code, you might try this:


var baseURL = 'content/Image/';
var imgArray = ['','image1.jpg','image2.jpg','image3.jpg','image4.jpg']; // and so on
function changeImage(c_img) { // pass c_img as a number 1..n of images
document.images("changingImage").src = baseURL+imgArray[c_img];
}

jamz159
06-22-2010, 10:54 PM
Thanks for the reply, yes I just want the one image to change. I have 12images of colors (that are tagged with onMouseOver) when the user hovers over a certain color it changes that one image. I photoshoped and uploaded the one image in all 12 colors. Everything seems to be working so far with the switch, case statements.

jmrker
06-23-2010, 12:51 AM
Thanks for the reply, yes I just want the one image to change. I have 12images of colors (that are tagged with onMouseOver) when the user hovers over a certain color it changes that one image. I photoshoped and uploaded the one image in all 12 colors. Everything seems to be working so far with the switch, case statements.

What does your HTML look like? :confused:
Seems like it might be even more efficient without the switch...case logic,
but maybe not, depending on how you have the code set-up. ;)

jamz159
06-25-2010, 10:42 PM
The HTML that is included with this page is very limited. I have contentHeader.ascx, ascx.cs .resx foot.ascx that get attached to every page on the site including this one. I do have another problem however, the onMouseOver does not work with FireFox browsers.
<h1>Something </h1>
<br />
<img alt="somthing something darkside " width="381" height="1" src="/content/About/Image/blueLine.jpg" />&nbsp;<br />
<br />
<br />
<table cellspacing="5" cellpadding="5" width="98%">
<tbody>
<tr>
<td width="220"><img alt="" width="1" height="2" src="images/design/spacer.gif" /></td>
<td width="220"><img alt="" width="1" height="2" src="images/design/spacer.gif" /></td>
<td width="220"><img alt="" width="1" height="2" src="images/design/spacer.gif" /></td>
</tr>
<tr>
<td class="whiteTextMedium" valign="top" align="center"><script language="javascript">

function changeImage(c_img) {
switch(c_img)
{
case "color1":
document.images("changingImage").src = "content/brand/Image/ImageColor1.jpg";
break;
case "color2":
document.images("changingImage").src = "content/brand/Image/ImageColor2.jpg";
break;
case "color3":
document.images("changingImage").src = "content/brand/Image/ImageColor3.jpg";
break;

etc etc.....

</script>
<p><img id="changingImage" border="0" name="changingImage" alt="blah blah blah " width="199" height="350" src="content/brand/Image/MainImage.jpg" /></p>
<p>&nbsp;</p>
<p class="whiteTextMedium">Create with the following paint options:</p>
<p>
<table border="0" cellspacing="1" summary="" cellpadding="1" width="172">
<tbody>
<tr>
<td width="91"><img onMouseOver="changeImage('color1')" alt="" align="middle" width="50" height="50" src="/content/brand/Image/color1.jpg" /></td>
<td width="74"><img onMouseOver="changeImage(color2)" alt="" align="middle" width="50" height="50" src="/content/brand/Image/color2.jpg" /></td>
</tr>
<tr>
<td><font size="1">color1</font></td>
<td><font size="1">color2</font></td>
</tr>
<tr>
<td><img onMouseOver="changeImage(color3)" alt="" align="middle" width="50" height="50" src="/content/brand/Image/color3.jpg" /></td>
<td><img onMouseOver="changeImage('color4')" alt="" align="middle" width="50" height="50" src="/content/brand/Image/color4.jpg" /></td>

Etc etc.....

I have an ul list with bullet points as well. Not much HTML I think I should take some Javascript classes. If i could only find some time! I have only used loose programming with IF statements and FOR loops.

jmrker
06-26-2010, 01:38 AM
I did not have access to your images and colors since you did not reference them anywhere,
but this version works in MSIE and FF (untested on other browsers).
I used CSS statements because <font> tags have been deprecated.

Just change the 'baseURL' variable and the 'imgArray' elements to match your site and images.



<html>
<head>
<title>Image Changer</title>

<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?p=967958#post967958

var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
var imgArray = ['','11.jpg','12.jpg','13.jpg','14.jpg']; // Note: no comma after last entry
// var baseURL = 'content/brand/Image/';
// var imgArray = ['','ImageColor1.jpg','ImageColor2.jpg','ImageColor3.jpg']; // and so on

function changeImage(c_img) { // pass c_img as a number 1..n of images
document.getElementById("changingImage").src = baseURL+imgArray[c_img];
}
function createImage(info) {
var str = '<img onMouseOver="changeImage('+info+')"';
str +=' align="middle" width="50" height="50" ';
str +=' src="'+baseURL+imgArray[info]+'">';
return str;
}
</script>

<style type="text/css">
.tdInfo {
font-size:0.6em;
text-align:center;
}
</style>

</head>
<body>
<h1>Something </h1>
<hr>
<img alt="somthing something darkside " width="381" height="1"
<p>
<table cellspacing="5" cellpadding="5" width="98%">
<tbody>
<tr>
<td class="whiteTextMedium" valign="top" align="center">
<img id="changingImage" border="0" name="changingImage"
alt="blah blah blah " width="199" height="350"
src='http://www.nova.edu/hpd/otm/pics/4fun/11.jpg'>
</td>
<td>
<p>&nbsp;
<p class="whiteTextMedium">Create with the following paint options:
<p>
<table border="0" cellspacing="1" summary="" cellpadding="1" width="172">
<tbody>
<tr>
<td class="tdInfo">
<script type="text/javascript">document.write(createImage('1'));</script>
<br>color1
</td>
<td class="tdInfo">
<script type="text/javascript">document.write(createImage('2'));</script>
<br>color2
</td>
</tr>
<tr>
<td class="tdInfo">
<script type="text/javascript">document.write(createImage('3'));</script>
<br>color3
</td>
<td class="tdInfo">
<script type="text/javascript">document.write(createImage('4'));</script>
<br>color4
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>

Modify with your other code in place as needed.
Post back if you don't understand any of the logic.

Good Luck!
:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum