Click to See Complete Forum and Search --> : style.clip not revealing hidden pic segment


chestertb
10-30-2003, 07:17 AM
Hi all...

Have ventured, finally, into the depths of positioned elements and want to overlay two pics, with the hidden top pic revealed in segments according to an image map on mouseover.

For this, I am trying to use
function over(w)
{
document.all.subs.style.clip=(0 48 33 0);
}
which is trying to reveal a portion of the hidden top image 33 high by 48 wide.

The html is as follows;

<DIV id="subn" STYLE="position:relative;left:50px;top:30px;z-index:-1">-
<img border="0" src="images/labels/ms1.gif" style="position:absolute; left:0px; top:0px" usemap="#bmap" width="49" height="198"></p>
</DIV>
<DIV id="subs" STYLE="position:relative;left:50px;top:30px;z-index:1; visibility:hidden">
<img border="0" src="images/labels/ms1s.gif" style="position:absolute; left:0px; top:0px" usemap="#bmap" width="49" height="198"></p>
</DIV>

Note that the image map aligns with the 33x48 box in the clip, and contains onmouseover="over('1')".

Onmousover, it returns w to the function but the image does not change. Am I on the right track here, or have I totally misinterpreted the javascript/dhtml references?

Thanks
IB

gil davis
10-30-2003, 10:49 AM
Clip in IE is a little weird. You cannot get to the individual clip portions (left, right, top, bottom). You have to specify a string like this:
obj.style.clip = "rect(" + tp + "px," + rt + "px," + bt + "px," + lt + "px)";
where tp is top, bt is bottom, rt is right and lt is left.

chestertb
10-30-2003, 05:10 PM
Thanks Gil,

It comes as no surprise that it didn't work... I lifted it from
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/position/positioning.asp.

I'll tried it your way and it worked a treat.

Much appreciated.
IB