Conveyor Slide Show - changeimage on click? HELP

[shopffemmefatale]

1) Script Title: Conveyor belt slide show

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...rightslide.htm

3) Describe problem: I want to set this up to change an image on the same page on click , but outside of the slide show . I'm having no luck. Can anyone help?? Please?? Please?? I'm desperate!!!! Thanks!!!

[jscheuer1]

Do you have code that would do that for an ordinary image? Like if you click an ordinary image, it will change another image on the page? If so, you can just write that event in here:

leftrightslide[0]='<a href="http://"><img src="dynamicbook1.gif" border=1></a>'

The only tricky part is that any single quotes used inside the delimiters (red in the above) must be escaped with the down slash (\ - green in the below), ex:

leftrightslide[0]='<a href="javascript:void(0);"><img onclick="changeImage(\'disparea\', \'some.gif\');" src="dynamicbook1.gif" border=1></a>'

[shopffemmefatale]

Thank you SO MUCH, I will try it.

[shopffemmefatale]

Hello, I tried and it acts as if it will work, but the image does not change. I have the conveyor embedded in a layer, could that be causing the problem? Any help would be greatly appreciated!

[jscheuer1]

Could you supply your code or better yet, a link to your page?

[shopffemmefatale]

I'll post the link tonight, I haven't loaded it yet... In the mean time, I have the code and I will send it to you via email if that's okay (too long to post) Thank you so much!!!!

[jscheuer1]

The main problem I see is that the function changeImage() is not defined. You do have a function named changeImages() defined. If this is the function you want to use for the array entries, it is just a typo because, in the array you have it without the s, example from your code:

leftrightslide[0]='<a href="javascript:void(0);"><img onclick="changeImage(\'infoimagemain\', \'450x375_up_afroman.gif\');"img src="75X75_down_afroman.gif" border=0></a>'

Also, though it probably doesn't hurt anything, the second (highlighted red) img in the above is meaningless so, should be removed.

Moving on, it looks like in order for changeImages() to work properly, the substitute image must be defined and preloaded in a similar fashion as these are:

if (document.images)
{
infoimagepostitdefault = new Image();
infoimagepostitdefault.src = "300x300_postit_blank.gif";
 
infoimagepostit1 = new Image();
infoimagepostit1.src = "300x300_postit_mission.gif";
 
infoimagepostit2 = new Image();
infoimagepostit2.src = "300x300_postit_contact.gif";
 
infoimagepostit3 = new Image();
infoimagepostit3.src = "300x300_postit_events.gif";
 
}

So, as an example, we could define an image to add to the above for the first array entry like so:

infoimagemain1 = new Image();
infoimagemain1.src = "450x375_up_afroman.gif";

Then use this syntax for the first array entry:

leftrightslide[0]='<a href="javascript:void(0);"><img onclick="changeImages(\'infoimagemain\', \'infoimagemain1\');" src="75X75_down_afroman.gif" border=0></a>'

There could be other problems, that is why I like to play with the live page.

Notes: If you do not want it to appear as a link, you would only need this:

leftrightslide[0]='<img onclick="changeImages(\'infoimagemain\', \'infoimagemain1\');" src="75X75_down_afroman.gif" border=0>'

The advantages of having it appear as a link though are that when the user hovers, they will see the familiar pointing finger cursor and the border of the image (if any) can use the page's link, visited, hover and active colors. I see you have border=0 so, this second part may not be an issue but that pointing finger really lets most folks know that the should/can click on it. It will be clickable even without this familiar pointing finger cursor though some folks may not realize it.

[shopffemmefatale]

It worked like a dream, thank you SO MUCH!!!! You are the best! BEST EVER!!