0

iv been using a tutorial to creaete the script to show an enlarged version of an image float on the screen on mouse over.

the script and everything else works but i was wondering if someone could help me to make the floating image more central as it floats down and right.

03-20-2007, 11:32 PM
<!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>
2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by scrappedcola
0

The place that you want to edit is here:

var ev = e || event,ox=20,oy=20;
display(ev.clientX+ox,ev.clientY+oy,this.getAttribute("alt"),this.getAttribute("src"));

in the mousemove event handler. The values ox and oy determine the offset from your mouse position which is ev.clientX and ev.clientY. If you set them to 0 the image will flicker on and off with the mouse movement because the hover image will come between the mouse and the image. For example to get the image to the right of the mouse do this:

img[i].onmousemove = function(e) {
   var ev = e || event,ox=125,oy=-50;
   display(ev.clientX +        ox,ev.clientY+oy,this.getAttribute("alt"),this.getAttribute("src"));
   return false;
}
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.