Results 1 to 4 of 4

Thread: Expanding a picture on rollover

  1. #1
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Expanding a picture on rollover

    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

  2. #2
    Join Date
    May 2007
    Location
    Canada
    Posts
    85
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by toby View Post
    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.

  3. #3
    Join Date
    Jan 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Expanding picture on rollover

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •