SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jul 2010
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JS image pop help

    Hello, I need help with a an image pop feature I need on my website. I dont know js but I was able to find the following script online. The only problem is that instead of popping the image on or near the original thumbnail it does it towards the top of the page.

    Code:
    function get(eid) {
    var d = document;
    var r = d.getElementById(eid);
    return r;
    }
    
    function popImg(open, iref) {
    if (open) {
    // top for popup image 10 pixels
    // below corresponding thumb
    var top = (50 +
    iref.offsetHeight +
    iref.offsetTop) +
    'px';
    // left for popup image is aligned
    // with left of thumbnail
    var left = iref.offsetLeft + 'px';
    // use same source file for popup
    // as thumbnail
    var img = '<img src="' +
    iref.src + '" />';
    var d = document;
    // if popup hasn't yet been added,
    // create and append to body
    if (null == get('popImg')) {
    var pop = d.createElement('DIV');
    pop.id = 'popImg';
    pop.style.position = 'absolute';
    d.body.appendChild(pop);
    }
    // get reference to popup image
    // container div
    var pop = get('popImg');
    // set image element into div
    pop.innerHTML = img;
    // position relative to thumbnail
    pop.style.top = top;
    pop.style.left = left;
    // show the div and its image
    pop.style.display = 'block';
    }
    else {
    // since request was for close,
    // (open==false), hide the div -
    // don't destroy it, since it can
    // be recycled cheaper
    var pop = get('popImg');
    pop.style.display = 'none';
    }
    }
    Code:
    <img src="exampleimg.jpg" alt="test" 
    width="95"
    height="63"
    hspace="5px"
    vspace="5px"
    align="right"
    onmouseover="popImg(true, this);"
    onmouseout="popImg(false);" />
    The last 2 lines are what the person said to put in the img tag.

    So if anyone could solve my problem in any way I would greatly appreciate it!!

    thanks

  2. #2
    ********* Staff mattevans's Avatar
    Join Date
    Sep 2009
    Location
    Melbourne, Australia
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi canary22,

    By the quick looks of things, you need to adjust the 'top' and 'left' settings. Those settings are...

    Code JavaScript:
    var top = (50 + iref.offsetHeight + iref.offsetTop) +'px';
     
    // left for popup image is aligned
    // with left of thumbnail
    var left = iref.offsetLeft + 'px';

    Have a play round with it and maybe a read up on the offsetLeft and offsetTop properties.
    The 'offset' properties will provide a value based on their parent.

    All the best.

    Thanks,
    Matt Evans
    Sitepoint Developer
    tweet 2 me


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
  •