WAHM Forums

Hi Webdesigners:


Is it terribly complicated to create a series of mouseover images that all open up in the same spot? What I would like to do is havesmall thumbnails onthe rightside of the screen and then have the larger images open on the left, all in the same spot (and same size). I have no clues as to how to code this and didn't know if there was some place on the web that would tell me how?


If you can provide any assistance..that would be great. I saw this on a photographer's website and thought it was really neat, but of course can't remember where I saw it to get the code.


TIA!

Yeah I've done that before in the past, I used a graphics program that I have so thats why I thought it was pretty easy...lol I'm not sure if there are tutorials out there.

Shelly

Edited by: scadesigns

I'm not certain of the name of that script, but it sounds like either JS or dhtml. There are a ton of mouseover scripts at dynamicdrive.com, you may find that over there. Good luck!

Thanks for the tip, Blue! Shelly...what was the program you used, if you don't mind me asking?

Is this what you are talking about? I designed and coded this site. If you have any questions let me know.


http://www.barbarahillphotography.com/babies.html

Absolutely gorgeous site!

As long as you can insert the code into your page, having multiple links update an image on rollover should be pretty simple.

first put this into your page, preferrably in the head, but anywhere will work:


<script type="text/javascript">
<!--
function changeImage(picName,newImg)
{
if (document.images)
{
document[picName].src= newImg;
}
}
//-->
</script>


then add your links that will change the image. Make sure to enter the correct path (/path/to/image.jpg) to the image you want to switch to when you roll over the link. Put this as many times as you want to have different links that update the same image:

<a href="javascript:;" onMouseOver="changeImage('imageOne', '/path/to/image.jpg');">linky linky</a>


last, wherever you want to have the image that will be updated, put this:

<img src="/images/ref_you2.gif" name="imageOne" id="imageOne" />


Click here to see this example in action. (http://www.bekeeda.com/codeexamples/js_rolls.htm)

You can modify this code pretty easily to be able to update different images as well, say if you want to have a set of links updating one image, and then another set of links updating another image, a third set of links updating a third image, etc.
All that needs to be done for the second image is to change the code whereever you see "imageOne" to say "imageTwo". So all the images that are named imageOne will be updated by the links that have imageOne in them, and all the images that are named imageTwo will be updated by the links with imageTwo in them, etc.

Hope this helps!

Paint shop pro 9 (I'm sure other versions as well) do mouseover images although you have to keep in mind that when you do a mouseover image through PSP you have (dial up users)to load each graphic individually so try to keep the file size small.


I kinda lost my train of thought there so I hope I made sense smileys/smiley9.gif

Hi all---For some reason I haven't seen any of these responses until now...so thanks to everyone who's responded.


Heidi...that's exactly what I was looking for. I'm in a quandry right now...my site isn't exactly what I want...but I'm not really sure what it is I want, if that makes any sense. If anyone has any suggestions...feel free to suggest. I was thinking about going with something more vintage in feel (graphics, colors etc) to go better with my site name..but it could just be me feeling the need to change something (I've already dyed and cut my hair...so I can't change that LOL).





Thanks :)