<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.info
{
background-color: Black;
filter: alpha(opacity=60);
opacity: 0.6;
position: absolute;
display: block;
color: White;
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var info = $("#info");
if (info.length == 0) {
info = $("<span />").addClass("info");
$("body").append(info);
}
info.hide();
$(".hover_text").bind("mouseenter", function () {
var p = GetScreenCordinates(this);
info.html(this.alt);
info.show();
info.css("width", $(this).width());
info.css({ "left": p.x, "top": p.y + this.offsetHeight - info[0].offsetHeight });
});
$(".hover_text").bind("mouseleave", function () {
info.hide();
});
});
function GetScreenCordinates(obj) {
var p = {};
p.x = obj.offsetLeft;
p.y = obj.offsetTop;
while (obj.offsetParent) {
p.x = p.x + obj.offsetParent.offsetLeft;
p.y = p.y + obj.offsetParent.offsetTop;
if (obj == document.getElementsByTagName("body")[0]) {
break;
}
else {
obj = obj.offsetParent;
}
}
return p;
}
</script>
<img src="Jellyfish.jpg" class="hover_text" style="height: 300px; width: 400px" alt="Jellyfish are the major non-polyp form of individuals of the phylum Cnidaria. They are typified as free-swimming marine animals consisting of a gelatinous umbrella-shaped bell and trailing tentacles." />
</body>
</html>
