Member Avatar for snefmoo

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
  • 96 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by scrappedcola
Member Avatar for scrappedcola

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;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.