There is an easy way to do this using css. I have only done this
experimentally, but it seems to work. All pictures should be the same size,
and you need to preload them. For this you will need javascript, which you
can find with a search on the web. Look for "preload images."
In the style section, you need to set up a class for each image, using the
image as a background, like this:
..thief { background-image: url('../images/u.s/dsc00098.butter.sm.jpg'); }
..jagannatha { background-image:
url('../images/u.s/DSC00107e.hasya.jbs.sm.jpg');
On the right side of the page, put a table where you want the photos to go
and set the size to fit the photos. Then assign an ID to the table, like
#rght, and assign the class containg the first image you want.
Then all you have to do is change the class of the ID using a mouseover on
your link, like this:
<a href="#top"
onmouseover="rght.className='jagannatha'"onmouseout="rght.className='thief'"
I have uploaded my experimental page to
http://www.dipika.org/~exp/linkswap.htm I did not preload the second image,
so the first time you pass over the link, it may take a second or two.
I hope this helps, and I hope it works for you.
Wally S
Steve said:
I need to find a way to have an image appear in another spot on the page
when the mouse goes over the link.
To explain that better,
when the mouse goes over the link on the left side of the page, I want an
image on the right side of the page to appear. The image will be different
for each link.
