Jump to content

Half circle Button Click


TheEagle

Recommended Posts

Hi,

 

I know how to design half circle image (or full circle the same problem) with transparent background.But my problem is how to make only the half circle clickable and not the whole image square using CSS?

In other words how to make the transparent part unclickable as it doesn't exist?

Link to comment
Share on other sites

I believe the only way to do that is through an image map or the user of something like Flash. Otherwise, you're stuck using a square or rectangular click area.

I heared that image mapping is not practical as CSS but I like to check it out.Can you provide me an article or tutorial link about how to solve this problem using image mapping.

Edited by TheEagle
Link to comment
Share on other sites

http://www.w3schools.com/TAGS/tag_map.asp

 

The difficulty with an image map is that it can be difficult to figure out where the coordinates need to go. Dreamweaver makes this process easier.

 

Well unfortunately I never use Dreamweaver.Thank you for the reference.

I will try the mapping solution.

If you know any websites,tutorials about creating menu using Flash MX it will be very useful.

Is there any risk in using Flash menu?Will all visitors be able to use it?

Link to comment
Share on other sites

http://www.w3schools.com/TAGS/tag_map.asp

 

The difficulty with an image map is that it can be difficult to figure out where the coordinates need to go. Dreamweaver makes this process easier.

In the w3schools the map is bound to the image element.In my case I'm using the image as a background.Is it possible to bind it to an anchor () element?

Link to comment
Share on other sites

Yes, except that it's not an image map, you use a different principle. See item 2a here:-

http://www.wickham43.net/imagemaps.php

The container dl tag #imap has a background image. The areas over the two swans that need to be links have ordinary dd anchor tags with display: block so that the whole area of the dd anchor tag is clickable. You don't have to use dl and dd list tags, you can use divs instead.

Link to comment
Share on other sites

Yes, except that it's not an image map, you use a different principle. See item 2a here:-

http://www.wickham43.net/imagemaps.php

The container dl tag #imap has a background image. The areas over the two swans that need to be links have ordinary dd anchor tags with display: block so that the whole area of the dd anchor tag is clickable. You don't have to use dl and dd list tags, you can use divs instead.

 

Thank you for sharing us in this thread...

 

But the clickable area is square shape not half circle as I need?

Edited by TheEagle
Link to comment
Share on other sites

You can cheat! This will work if your willing to do the labor. http://www.visibilityinherit.com/projects/rounded-anchor.html

 

The blue is the li (it holds your round image). The red is the anchor. The green area is how you fake it with all the b's. You should get the idea. You just have to keep going all the way to each corner of the image. You could go as fine as 1px each if you wanted to to completely follow the lines of the image. As is, it works everywhere but in IE6. IE6 would need classes on each b instead.

Edited by Eric
Link to comment
Share on other sites

  • 6 months later...

Updating this thread. Here is the full/completed demo for "irregular shaped anchors". http://www.visibilityinherit.com/code/irregular-shaped-anchor-demo.php :)

 

Wow..The result is great but it requires alot of work..I mean I hope it will be easier in the future.

However I wonder why is the anchor link red border smaller than the b's green borders ? I mean <a> includes <b> so <a> border should looks bigger right?

 

Thank you for making this thread more interesting.

Hope to all of us more success...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  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.

Loading...
×
×
  • Create New...