Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Caption Hover</title>
<script type="text/javascript">
function display(x,y,text,src) {
var c = document.getElementById("capt");
c.style.left = x + "px";
c.style.top = y + "px";
while (c.firstChild) c.removeChild(c.firstChild);
c.appendChild(document.createTextNode(text));
var img = document.createElement("img"),br = document.createElement("br");
img.src = src;
img.style.clear = "left";
img.style.marginTop = "25px"
img.border = "1"
c.appendChild(img);
}
function getimg() {
var img = document.getElementsByTagName("img");
for (var i = 0;i < img.length;i++) {
img[i].onmouseover = function() {
document.getElementById("capt").style.display = "block";
}
img[i].onmousemove = function(e) {
var ev = e || event,ox=20,oy=20;
display(ev.clientX+ox,ev.clientY+oy,this.getAttribute("alt"),this.getAttribute("src"));
return false;
}
img[i].onmouseout = function() {
document.getElementById("capt").style.display = "none";
}
}
}
window.onload = getimg;
</script>
<style type="text/css">
#capt {
width:118px;
height:58px;
position:absolute;
background:url('hv.png') no-repeat;
padding-top:17px;
padding-left:5px;
font:11pt verdana ref;
font-weight:bold;
display:none;
filter:alpha(Opacity=80);
opacity:0.8;
-moz-opacity:0.8;
-khtml-opacity:0.8;
}
</style>
</head>
<body>
<div id="capt"></div>
<img src="images/dirtbike.png" alt="My Dirtbike" width="100" height="100">
<img src="images/planet.jpg" alt="A planet" width="100" height="100">
</body>
</html>
And you'll need hv.png (attached).
See it here: http://mburt.no-ip.biz/testing/caption_hover.htm
how to get a picture to expand on rollover?
Reply With Quote
- (though it was not tested, sorry about that (there are most likely typos))
Bookmarks