CODEWITHSUNDEEP
htmlcssphotoshop
john
john

Reputation: 37

Create an image button that allows you to only click the non-transparent part

I have a wierdly shaped image on my Photoshop file. I made the background transparent. I then made the file an image button on my website. The only problem is i can still click the transparent part of the image when it is on my site. I basically only want to be able to click the part that isn't transparent for my image button. I have tried html mapping but that did not work for me mainly because when you clicked the portion you have mapped a blue line comes up which is annoying.

Any tips would be extremely helpful. I have been stuck on this issue for a few days

Here is a link to the image that i created: http://picpaste.com/TheBestThingEver-s3LLpUPk.jpg

Upvotes: 1

Views: 256

Answers (3)

Pixel Rubble
Pixel Rubble

Reputation: 1101

The blue line that appears, sounds like the dotted line when a button has focus. If that is your problem, you can solve that by using this bit of code :focus { outline: 0; -moz-outline-style: none; }

Upvotes: 1

mpalencia
mpalencia

Reputation: 6047

You may try HTML shape Attribute, you just have to know the position of your image

<img src='/TheBestThingEver-s3LLpUPk.jpg' border='0'  width="145" height="126"  alt="circle_image" usemap="#circle_image">
<map name="circle_image">
    <area shape="circle" coords="124,100,100" href="nextPage.html'" alt="circle">
</map>

Upvotes: 0

tobitobitobi
tobitobitobi

Reputation: 194

I am not sure, but maybe you can solve your blue line problem with the css :active property?

Upvotes: 0

Related Questions