Info box on hover

Do any of the resident CSS wizards know of an easy way to make a stylized hover element – like an info box? I guess similar to what Paul did on his site where he has examples and you rollover each to see an image.

My use would be hovering over an image and a text box appears with a paragraph of info. Ideally, I’d like to be able to adjust the background, border, text color, etc. Thoughts?

EDIT: Need this to work for both IE and Firefox if possible.

Here’s one way. It uses the Suckerfish script.

And the code (for posterity) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>hover - info box</title>
<script type="text/javascript">//suckerfish//
sfHover = function() {
	var sfEls = document.body.getElementsByTagName("A");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<style type="text/css">
a span {
display:none;
height:50px;
width:100px;
border: 1px solid navy;
position:absolute;
}
a:hover span, a.sfhover span {
display:block;
}
* html a span { /*this is for IE as it positions the box to the right of the image */
margin-left:-50px;
margin-top:50px;
}
a {
color:purple;
cursor:default;
}
</style>
</head>
<body>
<p><a><img src="wine.jpg" width="50" height="50" alt=""/><span>Here's some info.</span></a></p>
</body>
</html>

Or without js as follows :slight_smile:

http://www.pmob.co.uk/temp/popupmessagecss3.htm

Thanks guys! I found another way here:

http://psacake.com/web/jl.asp

Worked nicely with a few edits.

Thanks guys! I found another way here:

Another way lol - thats the same as the method I posted :slight_smile:

Eeeeek. Sorry. I just looked at the page - not the code. That just solidified that I’m doing it the right way then!