html - Cross-Browser Solution: Have links clickable when under image -
html - Cross-Browser Solution: Have links clickable when under image -
i have header in html page contains curve.
my problem: curve image & sits @ highest z-index. meant cutting off text below has highest z-index. result, none of links below image(curve) can clicked because image sits on top of them.
heres simple jsfiddle: http://jsfiddle.net/he7d5/2/
how can links below image clickable?
the easiest way know create image have css: pointer-events: none; but doesn't work in ie & looking cross-browser friendly solution.
<div id="headercontainer" style="position: relative; width: 100%; text-align: center; background-color: yellow;"> <div id="header" style="width: 1100px; height: 400px; padding-left: 30px; padding-right: 30px;"> <ul id="navbar" style="background-color: red; width: 800px; height: 40px; float: left;"></ul> <a id="logo" href="www.google.com" style="background-color: red; width: 190px; height: 40px; float: right; margin-top: 15px;">cant clicked</a> <br/> <div id="cutofftext"> <p style="padding: 0; margin: 0; font-size: 200px;">abcdefg</p> </div> </div> <div id="curveoverlay" style="z-index: 1; position: absolute; left: 0; top: 0; background-image: url('http://i44.tinypic.com/rs8y7m.png'); background-position: center bottom; background-repeat: no-repeat; width: 1100; height: 400px;"> </div> </div>
ps: if theres no way create links clickable when under image, can suggest html layout can utilize still accomplish have navbar links clickable?
simply set : can't. not without lot of effort. accomplish effect, you'd need image imagemap , create sure it's pixel-perfect stuff it's obscuring.
to honest, looks pretty bad idea, may have legitimate reason this
edit : looks duplicate of this
html css cross-browser
Comments
Post a Comment