Forum Moderators: not2easy

Message Too Old, No Replies

Can one partially "disable" a layer?

Hyperlinks are visible thru the above layer, but not clickable

         

charlieplane

4:22 pm on Sep 25, 2004 (gmt 0)

10+ Year Member



This is another nice problem.

Above my "base" layer, I have superimposed a 2nd layer which contains 2 images, spaced some distance apart from each other.
The space between the 2 images in this 2nd layer is unused and is in fact "transparent" if you will (I have hosted the 2 images within this 1 layer in order to avoid severe image positioning problems).

The base layer contains several hyperlinks, which are also visible thru the "transparent" part of the 2nd layer. Unfortunately these hyperlinks below the transparent part are not clickable, as the 2nd layer apparently masks them (as one would expect).

Would there be a workaround in order to get them clickable thru the 2nd layer?

Kind regards, Charles

isitreal

4:44 pm on Sep 25, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



layer one, whatever
layer two, whatever
layer three, positioned blank gif, sized to the image size, with an <a href around it.

charlieplane

5:07 pm on Sep 25, 2004 (gmt 0)

10+ Year Member



Well, the base layer is scrollable and the superimposed 2nd layer is fixed, so I can't integrate the hyperlinks into the 2nd layer...

Regards, Charles

SuzyUK

8:17 am on Sep 26, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



z-index and relative positioning possibly, tho how to implement it may depend on which order they are in, in the source code..

btw.. I just had this problem with Opera and making the div (layer) itself have a higher z-index didn't work I had to actually make the <p> element (inside the div) have the higher z-index.

example:


#fixed {
position: absolute;
top: 0;
left: 0;
width: 400px;
height: 400px;
background: #eee;
}
#text {position: relative; z-index: 500;}

HTML:
<div id="fixed">the fixed div</div>
<div id="text"><p>some text here with a <a href="#">link to test</a> end the paragraph</p></div>

Suzy