Jump to content

Recommended Posts

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?

Link to comment
https://forums.phpfreaks.com/topic/48955-transparency-in-images/
Share on other sites

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.

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.