Hi,

I have been trying to figure out whether I should use css or javascript for an image display when the mouse goes over a certain part of text. Basically, the image should be displayed in the left container while the mouse is moved over on of 4 points in the right container.
I was thinking of placing an image for the text in the right container and then having another image overlap the entire image to give it a glowing effect. What I have is 4 dot point (you could call it 4 instructions), and I want to apply the effect when hovered over the 1st ,2nd ,3rd or 4th point that particular box highlights with the lighter image. Similar effect to rollover buttons but the only other added thing is to display 1 of 4 pictures in the left container when the mouse hovers over the 4 different steps. I did think of using flash but surley there must be a way to code this in css or even using javascript to get it working.
I have supplied the files except for the 4th image. I have an image for the 4 steps and then another image what it should look like when the mouse hovers over each step.

Does anyone know if this is possible to be done using CSS at all?

Any suggestions welcome please

My code so far is:

HTML:

<div id="contentWrapper">

<div id="leftContent"> </div>
<div id="rightContent" >

<img src="images/setup1_bg.gif" width="504" height="342" align="left"/>

</div>
</div>

CSS:

#contentWrapper {
background: #E5E5E5;
height: 342px;
width: 957px;
margin: 0 auto;
padding: 0 0 0 0;
position:relative;
}

#leftContent {
position:relative;
top:0;
left:0;
width:313px;
height:320px;
border: 2px dashed red;
margin: 0px 0px 22px 32px;
}

#rightContent {
top:1px;
right:-4px;
width:494px;
height:342px;
border: 1px solid red;
margin: 0px 71px 30px auto;
position: absolute;
}

There are some limited situations where it is possible to do this with CSS, similar to a suckerfish-style dropdown menu, but I would recommend doing this with javascript.

Thanks wayfarer07,
I thought that would be the only way to go is with JavaScript. I will play around with it and see what I can get it to do. It sounds pretty easy when thinking about the functionality of it but coding it is another whole new ball game.

If you'd like to see a very bare-bones example, here is one I coded in javascript: http://www.emotecomm.com/ It has a CSS foundation so it does belong in this forum as well as the JS one... I only coded the part at the bottom (am not responsible for nasty tables). If you roll over the links in the three categories, you'll see how the content switches automatically. I recommend opening a split window in Firebug so that you can see how the code switches the styles and classes on the elements to make it happen. The key to the magic is to have the content positioned off the screen, absolutely, with a large negative px, so that the content is already loaded and won't 'flicker' when you need it the first time.