HELP to display 2nd image on mouse hover

[puffnstuff]

Hi. I am brand new to website development. I know basic HTML and VERY basic CSS for font styling. What I need to do is create a group of images, which, when moused-over, will do 2 things at once: The image will light up, and at the same time a 2nd image will appear in a different location on the screen.

I have successfully done the "light-up" effect using Javascript (I think), pre-loading the lit-up images, and using a mouseover swap such as the one below:
<td height="56" width="56"><a href="/Products/IBeam.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Ibeam','','/images/Products/Ibeam-lite.gif',1)"><img name="Ibeam" border="0" src="/images/Products/Ibeam-dark.gif" width="51" height="50"></a></td>

How can I also make a 2nd (completely different) image appear in another column of the table? Is there a simple CSS I can add to do this? I have about 25 images on the screen, so a different picture will need to display, depending on which image the user is pointing to.

[LaPoetessa]

I would have thought you could perhaps achive the same effect with CSS rather than Javascript for the first part of your webproject you mentioned. You could try coding it as a hover function and a filter (for example) a:hover {text-decoration: none; filter: xray; } , but then again I'm not sure it would work on all browsers. As for your 2nd part, that of making another image apear elseware. I guess that too could be done in CSS using the "hide" function placed within a "div". That way you could pre position the div then make it apear only when the 1st object is hovered over with the mouse.

PS: These are just a few thoughts and not a direct answer to your question.

Regards

Mary