Hi,

I fear I have an impossible problem, but I thought I would throw it out there. 
I am working on a site for dyslexics. Some dyslexics find it easier to read 
print if they place a red or green plastic overlay over the page (it apparently 
stops the letters from 'moving'). I developed a small Javascript widget that, 
when clicked, puts a similar overlay over a webpage.

It does it by appending a <div> to the <body> element, expanding it to 100% 
width and height, and then applying a semi-transparent PNG as a background 
image. Sample code below:

<body>
<p>this is my content! <a href="index.html">This is a link!</a></p>
<div id="overlay" 
style="position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(overlay.png);"
 />
</body>

This works as I intended, except of course I didn't think that div#overlay 
would prevent the user from interacting with the page. In the example above, 
the user is unable to click through the div to reach the link.

Can anyone think about how to get the result I want?

Thanks!

Chris
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Reply via email to