SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show hide layers not working on IE

    its pretty simple what im trying to do, i have these thumbnails and i want a different pic to show up when you role over one of them, but when i test it on IE, the new images appear somewhere else, not on top of the first one.... heres a link to a test page.

    http://www.board-source.com/Hideshowtest.html

    any ideas?

  2. #2
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You dont need javascript for this. Look at photogallery demos here http://www.cssplay.co.uk/menu/index.html .

  3. #3
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah i tried that one out but it doesnt really work the way i want it to. I really didnt like that ones you roll out of the thumbnail, the image changes back to the original, and that you cant have the large image as a link to the article


    any other ideas

    oh and heres what i was able to do so you can see what i mean

    http://www.board-source.com/hovertest.html

  4. #4
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK you can add to your css example this script
    Code:
    function keepimg(){
    var jsarea=document.getElementById('container');
    var hrf=jsarea.getElementsByTagName('a');
    for(var i=0;i<hrf.length;i++){
    hrf[i].onmouseover=function(){
    var span=this.firstChild;
    if(this.firstChild.nodeType==3){span=this.firstChild.nextSibling;}
    var im=span.firstChild;
    if(span.firstChild.nodeType==3){im=span.firstChild.nextSibling;}
    jsarea.style.background='#fff url('+im.src+') no-repeat';
    };
    }
    }
    window.onload=keepimg;
    But your images should be all 300px height, now has correct height just first one rest is 270px and you set it in img tag. When this script uses background it is not possible to set their height.

  5. #5
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I forget to go there on onclick, so:
    Code:
    function keepimg(){
    var jsarea=document.getElementById('container');
    var hrf=jsarea.getElementsByTagName('a');
    for(var i=0;i<hrf.length;i++){
    hrf[i].onmouseover=function(){
    var span=this.firstChild;
    if(this.firstChild.nodeType==3){span=this.firstChild.nextSibling;}
    var im=span.firstChild;
    if(span.firstChild.nodeType==3){im=span.firstChild.nextSibling;}
    jsarea.style.background='#fff url('+im.src+') no-repeat';
    this.parentNode.parentNode.parentNode.setAttribute('rel',this.href);
    };
    jsarea.onclick=function(){
    document.location.href=this.getAttribute('rel');
    };
    }
    }
    window.onload=keepimg;

  6. #6
    SitePoint Addict
    Join Date
    Sep 2006
    Posts
    398
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that worked man, thanks a lot


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
  •