mouse over to make an image appear elsewhere

[Guest]

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.

I would appreciate help in learning how to do this.

Thanks you.

Steve

 

[Wally S]

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'"

link 1</a></p>

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

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.