Expanding a picture on rollover

**toby** · 01-03-2008, 05:33 PM

I have managed to get the expand image on hover script to work within a speechbubble however because of the window.onload = getimg; event every other image on the page is also rolled over.

Can anyone tell me what I need to change in order to overcome this.

an example of the working script can be viewed here:

http://www.businessinfouk.co.uk/script/captionhover.htm

Thank for any help

Toby

**pman** · 01-04-2008, 02:13 AM

Originally Posted by toby

I have managed to get the expand image on hover script to work within a speechbubble however because of the window.onload = getimg; event every other image on the page is also rolled over.

Toby, it's not really because of the window.onload event. This event executes the following function.

Code:

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";
}
}
}

This function is basically going through all the image tags on your page and applying the effect to it.

You can either modify that for loop in that function so that it only applies the effect to certain images. Or, I guess it would be better that you add the event to the image, on which you want to apply this effect. This way, you don't have to keep modifying the function.

**toby** · 01-04-2008, 09:56 AM

Hi Pman

Thanks for the reply, I'm glad to know there is a solution to this but unfortunately I cannot get it to work. Could you give an example of how to add the event to the images.

Best Regards

Toby

**jscheuer1** · 01-04-2008, 02:59 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<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 = "50px"
img.style.marginLeft = "7px"
img.style.marginBottom = "12px"
img.border = "0"
c.appendChild(img);
}
function getimg() {
var img = document.getElementsByTagName("img");
for (var i = 0;i < img.length;i++) {
if(img[i].className=='expando'){
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("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:419px;
height:375px;
position:absolute;
background:url('http://www.businessinfouk.co.uk/script/hv.gif') center no-repeat;
padding-top:7px;
padding-left:5px;
font:11pt verdana ref;
font-weight:bold;
display:none;
filter:alpha(Opacity=100);
opacity:0.8;
-moz-opacity:0.8;
-khtml-opacity:0.8;
}
table img {
padding:1px;
}
</style>
</head>
<body>
<div id="capt"></div>
<table style="border-collapse:collapse;" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<img class="expando" src="http://www.businessinfouk.co.uk/script/image1.jpg" width="135" height="102"><img src="http://www.businessinfouk.co.uk/script/image2.jpg" width="130" height="102"></td></tr>
<tr><td>
<img src="http://www.businessinfouk.co.uk/script/image1.jpg" width="135" height="102"><img src="http://www.businessinfouk.co.uk/script/image2.jpg" width="130" height="102"></td></tr></table>

</body>

Thread: Expanding a picture on rollover

Thread Tools

Search Thread

Expanding a picture on rollover

Expanding picture on rollover

Bookmarks

Bookmarks

Posting Permissions