Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


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

Posted on 2007-09-28
Medium Priority
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: http://www.slidescoop.com/new_photos.php (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: http://www.slidescoop.com/new_photos2.php

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
  • 3
  • 2

Accepted Solution

TheKyle earned 2000 total points
ID: 19983095
You need a z-index on the div...

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

Author Comment

ID: 19983133
Great, thanks! :-)
LVL 63

Expert Comment

ID: 19983143
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;

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

LVL 63

Expert Comment

ID: 19983145
I typed too long :)
LVL 32

Author Comment

ID: 19983210
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

ID: 19983265
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


Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

572 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