Rollovers

[Dan Morgan]

Lo guys,

I want to have a table with has 4 cells in each corner. When the mouse is over one of these cells I want an image in a cell in the centre of the table to change. But I want to have a different image for each outer cell appear in the centre when the mouse is over it.


Is there anyway to do this

I have tried and tried to find something but had no luck.

Thanks

[A1 JavaScripts]

You should be able to do this quite easily depending what is in the four corner cells. If it is text or images there should be no problem, however if you are wanting empty cells, you can probably use transparent images in each one and use the mouseover function on each one the same as if you were using a normal image.
Does this answer your question?

[Dan Morgan]

No not at all!

I know how to do a rollover. I just dont know how to have 4 TDs that when you roll the mouseover them they each change an image that is in the same place.

If you rollover text in TD_1 then an image in TD_5 changes;
If you rollover text in TD_2 then an image in TD_5 changes;
If you rollover text in TD_3 then an image in TD_5 changes;
If you rollover text in TD_4 then an image in TD_5 changes;

I can do this with show/hide layers but I would REALLY love to avoid using them!

[A1 JavaScripts]

ok, in first in your head, preload and define your images.

<SCRIPT LANGUAGE="JAVASCRIPT">
if (document.images) {
image1 = new Image
image2 = new Image
image3 = new Image
image4 = new Image
image5 = new Image

image1.src = "your-image1.jpg"
image2.src = "your-image2.jpg"
image2.src = "your-image3.jpg"
image2.src = "your-image4.jpg"
image2.src = "your-image5.jpg"

}
</SCRIPT>

Then in your TD_1, write:

<a href="somewhere.html"
onMouseover="document.pic.src=image2.src" onMouseout="document.pic.src=image1.src">Left Top</a>

in your TD_2, write:

<a href="somewhere.html"
onMouseover="document.pic.src=image3.src" onMouseout="document.pic.src=image1.src">Right Top</a>

same for TD_3,4:

<a href="somewhere.html"
onMouseover="document.pic.src=image4.src" onMouseout="document.pic.src=image1.src">Left Bottom</a>

<a href="somewhere.html"
onMouseover="document.pic.src=image5.src" onMouseout="document.pic.src=image1.src">Right Bottom</a>


Then in your TD_5, write:

<img src="your-image1.jpg" name="pic" border="0">

Does that answer you now?
NOTE: image1 is your default image.

[Dan Morgan]

Yup, thanks alot , ill try it!

[A1 JavaScripts]

Yah, sorry, my bad !!

This part:

image1.src = "images/black.gif"
image2.src = "images/green.gif"
image2.src = "images/blue.gif"
image2.src = "images/orange.gif"
image2.src = "images/red.gif"

should be:

image1.src = "images/black.gif"
image2.src = "images/green.gif"
image3.src = "images/blue.gif"
image4.src = "images/orange.gif"
image5.src = "images/red.gif"

sorry, it will work now.

[Dan Morgan]

Yeah just noticed that too and deleted the post.

Thanks thats great