Jump to content
Stef's Coding Community
TheEagle

Half circle Button Click

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?

Share this post


Link to post
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

Share this post


Link to post
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?

Share this post


Link to post
Share on other sites

I wouldn't do menus in Flash. It's inaccessible, potentially may not work if the user doesn't have Flash installed. and search engines can't read the links within Flash navigation. I'd make your navigation using unordered lists. Do a web search for "suckerfish" menus -- that's the best I've found so far.

Share this post


Link to post
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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

To be honest, I don't think there is a way to do what you want to achieve with a background image. Either you'll need to accept that it'll have to have a square click area, like Wickham's example, or change the design so it can use a regular image rather than a background image so you can use an image map.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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...

Share this post


Link to post
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...