div area in background should be made visible (showing it in the foreground!)

Posted on 2007-09-28
Last Modified: 2013-11-19

I have a page with thumbnail-images which on hover displays full image! I made several customization to the scripts and now the fullimage is shown in the background of the page!

To visualize the problem, please see: (You'd need authentication for this site. Please use username: test and password: test) .... On hover of thumbnail images, the full image is shown in the background.. which you can realize on hover of thumbnail images at the middle- and right- side of the page!

The same page, when couple of "div's" are moved from the top to the middle of the page, shows the full image correctly, but the position of images is moved to the bottom:

When you see the diff of two source codes, you can find that the ending position of two "div's" is the only change! I need to fix the hover issue on the first link or the position of thumbnail images in the second link!

Any help is appreciated. Please advise.
Question by:ldbkutty
    LVL 6

    Accepted Solution

    You need a z-index on the div...

    #imgtrailer { z-index: 5000; }
    LVL 32

    Author Comment

    Great, thanks! :-)
    LVL 63

    Expert Comment

    The z-index of the div is actualy set to zero. It is enough to set the z-index to one to see the div with loading image and target image.

    The div id is imgtrailer.
    You create it in xns.js like this:
    if (document.getElementById || document.all)
          document.write('<div id="imgtrailer" style="position:absolute;visibility:hidden;z-index:5000;"></div>')

    But when you look at its z-index you will get zero:

    Set it to one:

    And you will see all is working as required.
    Look where in your script the z-index is reset to zero.
    Or set it in access script to one:
    function trailOn(thumbimg,imgtitle,imgscription,imgsize,filesize,credit,level,thw,thh)
          if(ua.indexOf('opera') == -1 && ua.indexOf('safari') == -1)
                divthw = parseInt(thw) + 2;
                gettrailobject().innerHTML = '<table><tr><td><div style="background-color: #000000; layer-background-color: #000000; border: 0pt none #000000; padding: 0pt; width:'+divthw+'px;"><div style="background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px solid #000000; background-image: url(images/img_load.gif); background-repeat: no-repeat;"><center><img src="'+thumbimg+'" border="0" width="'+thw+'" height="'+thh+'"></center><div style="padding:3px"><b>Title: </b>'+imgtitle+'<br><b>Description: </b>'+imgscription+'<br></div></div></div></td></tr></table>';
                divw = parseInt(thw)+25;
                divh = parseInt(thh)+130;

    LVL 63

    Expert Comment

    I typed too long :)
    LVL 32

    Author Comment

    Hi Zvonko,

    Great to hear from you, after a long time.

    The only other place where "z-index" used is js/utils.js file:

    Kmods.Utils.createWCH = function(element) {
            var f = null;
            element = element || window.self.document.body;
            if (Kmods.is_ie && !Kmods.is_ie5) {
                    var filter = 'filter:progid:DXImageTransform.Microsoft.alpha(style=0,opacity=0);';
                    var id = "WCH" + (++Kmods.Utils.__wch_id);
                            ('beforeEnd', '<iframe id="' + id + '" scroll="no" frameborder="0" ' +
                             'style="z-index:0;position:absolute;visibility:hidden;' + filter +
                             'border:0;top:0;left:0;width:0;height:0;" ' +
                    f = window.self.document.getElementById(id);
            return f;

    I didn't quite understand by the statement: gettrailobj().Index=1; but "z-index:1;" and that statement works flawless.
    LVL 63

    Expert Comment

    Hallo :)

    My investigation was after you already changed the z-index to 5000.
    And I even misstyped the zIdex to Index. Sorry, it should be:


    But of course it is obsolate after setting z-index in html style.

    I was looking into your page and testing z-index change with the Run tab in PageSpy from Expert devic: http:/M_1344026.html


    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System ( introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    737 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now