Show description when mouse goes over image?

[lAZLf]

When you hover over the images I want the description of the certain image to pop up, and go away when your mouse leaves the image.

 

Simple right?

 

When I do it, I get the REVERSE effect, when my mouse goes over them, they go away, when my mouse leaves them, they show up.

 

Here's my java script code

// JavaScript Document
function showhide(id) {
var obj = document.getElementById(id);
if(obj.style.visibility == "hidden") {
	document.getElementById(id).style.visibility = "visible";
} else {
	obj.style.visibility = "hidden";
}
}

 

my html code

 

<img src="/Identity Studio/images/ad1afb85_1340_133d.gif" onMouseOver = "showhide('summary2');" onMouseOut = "showhide('summary2');"/><div id="summary2" class="description">aefdwasd</div><img src="/Identity Studio/images/d8b7cb84_3891_48ec.jpg" onMouseOver = "showhide('summary1');" onMouseOut = "showhide('summary1');"/><div id="summary1" class="description">This is totally a description</div>            

 

Css code (not really needed):

 

.description {
display:inline;
visibility:hidden;
border: 1px #CCCCCC solid;
background:#FFFFFF;
padding: 15px;
position:absolute;
color: #666666;
font-family:Arial, Helvetica, sans-serif;
}

 

If you want a link to see for yourself what's happening go here:

 

http://svidler.net/Identity%20Studio/

 

Anyone know what's going on? I can't believe I can't get something this simple to work.

[brianlange]

Looks like it's working.

[lAZLf]

Solved it. Changed the html to have style="visibility:hidden;" inside the divs instead of css.