Thierry Posted April 27, 2007 Share Posted April 27, 2007 I'm having trouble with transparent parts of images. For instance, I have two images (gif's) with transparent parts in them. If you click or hover over the images, an action will occur, but it should only happen when you click in a non-transparent area. Right now, if you hover over any part of the image (including the transparent parts), the action happens. Is it possible that the transparent parts are ignored? Quote Link to comment Share on other sites More sharing options...
Thierry Posted April 27, 2007 Author Share Posted April 27, 2007 This is what I'm trying to test it out with: <body> <div id="zomg" style="z-index:1; position:absolute; left:0px; top:0px;"><a href="whatever.php">Test link</a></div> <div id="lol" style="z-index:2; position:absolute; left:0px; top:0px; height:100px; width:100px; background-image:url(images/test.gif); background-position:inherit; background-color:transparent;"></div> </body> Basicly, I need the transparent part of the image (where you can see the link text) to allow for clicking the link under it. Right now, the div itself prevents anything under it from being clicked. The only other way I can imagine doing it besides getting this to work somehow is to do it with the Clip attribute, going at it one pixel width (or height) at a time. Quote Link to comment Share on other sites More sharing options...
mainewoods Posted May 2, 2007 Share Posted May 2, 2007 far as i know, there is no way to directly tap into the difference between the transparent part and the non transparent part of graphics. css doesn't know it, javascript doesn't know it. You would probably have to prepare an image map for the graphic or write a bunch of custom javascript. The javascript would be complex because capturing the mouse position is one of the worst areas of cross browser compatability differences. Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted May 2, 2007 Share Posted May 2, 2007 you would probably need to use an imagemap to get what you want... Have a look at this article http://www.alistapart.com/articles/sandbags/ there may be a way you could modify that to acheive your goal. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.