asked on

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

Hi!

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.

ASKER CERTIFIED SOLUTION

TheKyle

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ldbkutty

ASKER

Great, thanks! :-)

Zvonko

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:
alert(gettrailobject().style.zIndex);

Set it to one:
gettrailobject().style.zIndex=1;

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)
            {
            gettrailobj().left="-500px";
            divthw = parseInt(thw) + 2;
            gettrailobj().Index=1;
            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>';
            gettrailobj().visibility="visible";
            divw = parseInt(thw)+25;
            divh = parseInt(thh)+130;
            document.onmousemove=followmouse;
            }
      }

Zvonko

I typed too long :)

ldbkutty

ASKER

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);
element.insertAdjacentHTML
('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;" ' +
'src="javascript:false;"></iframe>');
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.

Zvonko

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:

gettrailobj().zIndex=1;

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