1 reply [Last post]
paul.mac
Offline
newbie
Last seen: 18 years 40 weeks ago
Joined: 2004-06-16
Posts: 2
Points: 0

I have 3 images in <div></div> tags overlaying each other as follows:

<div ID="image1" STYLE="position: absolute; top:160px; left: 10px; width: auto; height: auto; z-index: 0; "><img src="image1.gif" border="0" width="839" height="496" alt=""></div>
<div ID="mask" STYLE="position: absolute; top: 160px; left: 10px; width: auto; height: auto; z-index: 2;"><img src="mask.gif" border="0" width="839" height="496" alt=""></div>
<div ID="clipped" STYLE="position: absolute; top: 160px; left: 10px; width: auto; height: auto; z-index: 4;clip: rect (100px 300px 300px 100px); cursor: move"><img src="image01.gif" border="0" width="839" height="496" alt="" onMouseMove="moveViewport();return false;"></div>

The top layer should only show in the area defined by the clip region but in NS7.1 it doesn't, the entire image shows. The code works fine in IE5.5
I found a site that states that the clip: rect(....) attributes order is different between NS7 (ltbr) and IE5.5 (trbl) but it doesn't seem to work. Another site suggested I should use a <layer></layer> tag inside the <div></div> tags with the clip region defined within the layer tag but that didn't work. Mind you I haven't combined both!

paul.mac
Offline
newbie
Last seen: 18 years 40 weeks ago
Joined: 2004-06-16
Posts: 2
Points: 0

inline style clip doesn't work in NS7.1

Seemed to have solved the problem thanks to a german site http://www.jjam.de/JavaScript/Grafik_Effekte/Clipping_3.html
the inline style tag has to be appended to the image tag togther with position:absolute in order for the clip region to work.