/    Sign up×
Community /Pin to ProfileBookmark

Linking transparent images

Copy linkTweet thisAlerts:
Nov 22.2006

Hey, I’ve searched for this on google and it’s probably not possible, but here’s my question:

When using a transparent GIF and making it a link (<a href=””><img src=””></a>) is it possible via CSS (or anything else) to make it so that only the visible parts are clickable.

Because when you hover over an invisible part of the image now, it stil works as a link.

Any suggestions? Or perhaps confirmation that this is in fact not possible? ?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLANov 22.2006 — You might try this:
<i>
</i>&lt;div style="background: url(file.gif) no-repeat; width: ###px; height: ###px;"&gt;
&lt;a href="" title="Name of Link"&gt;
&lt;span style="width: ###px; visibility: hidden; margin: 0 #px;"&gt;&amp;nbsp;&lt;/span&gt;
&lt;/a&gt;
&lt;/div&gt;
You'd need to put the width of the image in the span, and both width and height in the div, and the horizontal margin needed to avoid the transparency sections.
Copy linkTweet thisAlerts:
@IcelineauthorNov 22.2006 — Thanks, I'll really have to rebuild my code for that, but I'll give it a try ?
Copy linkTweet thisAlerts:
@IcelineauthorNov 23.2006 — I'm not quite sure how to convert my code into yours. I have something like this:

<div style="position:absolute;z-index:5;top:135px;left:264px;"><img src="positioner.gif" border="0"></div>

and that's displayed 48 times, but at different positions. About half of the positioner image is transparent and shouldn't be clickable
Copy linkTweet thisAlerts:
@IcelineauthorDec 04.2006 — anyone?
×

Success!

Help @Iceline spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...