multiple image swap with 1 link

[technoknow]

I have one image that on mouseover it needs to change and a third image also needs to become visible. I have the first and second images working fine but I can't figure out how to make the third image to become visible.
Here is my CSS for the 2 images:

#box_wrapper	{
				position: absolute;
				left: 70px;
				top: 240px;
				width: 169px;
				
				}		
a.box1, a.box1:visited	
				{
				background:  url(images/6boxes_1.gif) no-repeat;
				position: relative;
				float: left; 
				height: 50px;
				width: 77px;
				text-decoration: none;
				}
a.box1:hover	{
				background:  url(images/6boxes_1over.gif) no-repeat;
				height: 50px;
				width: 77px;
				}

Here is the html:

<div id="box_wrapper"> 
  <a class="box1" href="portfolio.html"></a>
</div>

What do I need to do to add a third image to react to the mouseover? I would like to place an image on the page and use visibility: hidden and then when the box1 is hovered on the 3rd image would change with visibility: visible
Hope this is clear, I really appreciate the help. I would be lost without this forum!
TechNoKnow

Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten code.

 

[technoknow]

OK, i've been able to get it to work in NN and FF but not IE.
Here is what I've got.
CSS

#box_wrapper	{
				position: absolute;
				left: 70px;
				top: 240px;
				width: 169px;
				
				}		
a.box1, a.box1:visited	
				{
				background:  url(images/6boxes_1.gif) no-repeat;
				position: relative;
				float: left; 
				height: 50px;
				width: 77px;
				text-decoration: none;
				
				}
a.box1:hover	{
				background:  url(images/6boxes_1over.gif) no-repeat;
				height: 50px;
				width: 77px;
				}
a.box1 i		{
				
				visibility: hidden;
				}
a.box1:hover i		{
				background: url(images/portfolioBig.gif) no-repeat;
				position: absolute;
				width: 110px;
				height: 20px;
				top: 10px;
				left: -200px;
				visibility: visible;
				
				}

HTML:

 <div id="box_wrapper"> <a class="box1" href="portfolio.html"><i></i></a> </div>

This makes the 6boxes_1over.gif trade with the 6boxes_1.gif and the portfolioBig.gif become visible when the 6boxes_1.gif is mouse-overed in FF and NN but not in IE 6.0.2 Anyone know how I can make it work?
Thanks

Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten code. TechNoKnow

 

[Vragabond]

I suggest you rather use span and give it display block or something if you want it to be an actual block. The code will eventually work in IE as well, you just need a little bit of tweaking. I have used similar code and has worked cross-browser, though IE's behaviour is highly erratic and unpredictable.

 

[technoknow]

I know that it's easier to look at something to figure it out than have someone tell you about it, so I've put a mockup online at:

http://jimsgotweb.com/mouseover.html

In FireFox and Netscape the image changes and the "Portfolio" image shows next to it. I'd appreciate you looking at it and try to determine why IE doesn't support it.
Thanks for your time.



Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten code. TechNoKnow

 

[technoknow]

OK I got it working. If anyone is following this post here is how I got it to work.
CSS

#box_wrapper	{
			position: absolute;
			left: 72px;
			top: 240px;
			width: 169px;
		}
a.box1, a.box1:visited	
				{
				background:  url(images/6boxes_1.gif) no-repeat;
				position: relative;
				float: left; 
				height: 50px;
				width: 77px;
				text-decoration: none;
				
				}
a.box1:hover	{
				background:  url(images/6boxes_1over.gif) no-repeat;
				height: 50px;
				width: 77px;
				display:block;
				}
a.box1 i		{
				visibility: hidden;
				}
a.box1:hover i		{
				background: url(images/portMouse.gif) no-repeat;
				position: absolute;
				font-size: xx-small;
				color: white;
				width: 140px;
				height: 22px;
				top: 10px;
				left: -140px;
				display: block;
				visibility: visible;
				}

HTML

 <span id="box_wrapper"> <a class="box1" href="portfolio.html"><i>Portfolio </i></a></span>

Thanks for your help Vragabond.

Once upon a midnight dreary, while I pondered, weak and weary, over many a quaint and curious volume of forgotten code. TechNoKnow