Hi, is there a way to modify this script so the image will change when the mouse moves over the image, instead of clicking on it?

Cory you would basically want to call the replaceImg function by using an onmouseover event. You could have the onmouseover on either the <a> or the <img>. Which you would choose would depend on if you want the img to be a link or not.

So you might have something like:

<a href="pathToSomeFile" onmouseover=replaceImg('img002_image.jpg');><img src="img002_thumb.jpg" alt="Image" /></a>

or

<img onmouseover=replaceImg('img002_image.jpg'); src="img002_thumb.jpg" alt="Image" />

The script itself would be the same

<script type="text/javascript">
 function replaceImg(path) {
     var imgDest = document.getElementById('image');
    var imgSrc = path;
    imgDest.setAttribute("src", imgSrc);
    }
</script>

There are actually many different ways to do this. If you search for things like 'image swap' or 'image rollover' you can probably find tutorials on how. You can even swap images using only css, though it would require different html than was used here.

I hope that helps.

Perfect...thank you!

at least the page already looks better than the old one.
And honestly, it's always a lot of work, especially when you are starting out and doing stuff manually, but you're getting there and learning on the way. Your doing it the good way and that's what counts.

Glad to help Cory.

Here's an added twist...is it possible to add a text caption below each large image, and have those captions change when the image is changed?

Originally Posted by corybarnes

Here's an added twist...is it possible to add a text caption below each large image, and have those captions change when the image is changed?

Yeah. If you add a p element with an ID, say "description" you can add something like this:

document.getElementById('description').textContent = "descriptive text";

My only concern is that I think IE6 and below doesn't support textContent, but I'm not sure. Then you'd need to determine the user agent and then use textContent or innerText (I belive this was the IE only property).
Now to make this compatible with the script you already have you don't need to do all too much.

function replaceImg(path,desc) {
  var imgDest = document.getElementById('image');
  var imgSrc = path;
  imgDest.setAttribute("src", imgSrc);
  document.getElementById('description').textContent = desc;
}

And then whenever you call it, use something like this inside of you img tag:

onmouseover=replaceImg('img002_image.jpg','In this image there is nothing');

Of course to make it a bit more beautiful, well I think it would be more beautiful, if you created an array inside of your JS that has all your descriptions stored and then just passed the number of which description to use... a switch statememnt could do that, or you could actually use the filename as well. Which is the ebst Ic annot say, do what works for you.

Here's an added twist...is it possible to add a text caption below each large image, and have those captions change when the image is changed?

like so;
http://www.candsdesign.co.uk/page-te...ery/layout.asp

Originally Posted by chrishirst

like so;
http://www.candsdesign.co.uk/page-te...ery/layout.asp

Take that, now just change the code so the used space is always the same, because seriously, that is crap the way the page height always alters... and now that usability is doubtable.

Hi,
I am new here and I know this is an old thread, but could some one tell me what I am doing wrong? I don't care about the mouse pass over, I would like to be able to click the thumbs to change the picture.

http://www.chaoticreefer.net/RC/Emaxx/ebay/

I tried looking into ExpressoDan's example file, but I couldn't find anything that would give me a clue.

I have built many basic HTML pages, but this is my first time trying to change pictures. Any help will be appreciated. Thanks.

The images don't exist, what do you expect?
http://www.chaoticreefer.net/RC/Emax...pictures/2.jpg
to
http://www.chaoticreefer.net/RC/Emax...pictures/7.jpg
Don't exist and thus cannot be displayed.

Otherwise the script should work fine.

You should also know this, you seem like an idiot if your entire ebay offer is in caps. Why are you shouting at the customer?

Yeah, I figured out the problem couple hours ago, but I had to rush out to take my kids to school. The files were there, but the file extensions were upper case. I hate it when programs make them upper case.

As for eBay description, no need to call me an idiot, since I wasn't the freaking seller. I just copied and pasted the auction I won. It's better to know the facts then assuming things.