hover over box and display image in another container

**elv8** · 05-07-2008, 10:55 AM

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;
}