TheEagle Posted March 2, 2010 Report Share Posted March 2, 2010 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? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 2, 2010 Report Share Posted March 2, 2010 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. Quote Link to comment Share on other sites More sharing options...
TheEagle Posted March 2, 2010 Author Report Share Posted March 2, 2010 (edited) 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 March 2, 2010 by TheEagle Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 2, 2010 Report Share Posted March 2, 2010 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. Quote Link to comment Share on other sites More sharing options...
TheEagle Posted March 2, 2010 Author Report Share Posted March 2, 2010 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? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 2, 2010 Report Share Posted March 2, 2010 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. Quote Link to comment Share on other sites More sharing options...
TheEagle Posted March 2, 2010 Author Report Share Posted March 2, 2010 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? Quote Link to comment Share on other sites More sharing options...
Wickham Posted March 2, 2010 Report Share Posted March 2, 2010 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. Quote Link to comment Share on other sites More sharing options...
TheEagle Posted March 2, 2010 Author Report Share Posted March 2, 2010 (edited) 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 March 2, 2010 by TheEagle Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 2, 2010 Report Share Posted March 2, 2010 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 2, 2010 Report Share Posted March 2, 2010 (edited) 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 March 2, 2010 by Eric Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 5, 2010 Report Share Posted March 5, 2010 Updating this thread. Here is the full/completed demo for "irregular shaped anchors". http://www.visibilityinherit.com/code/irregular-shaped-anchor-demo.php Quote Link to comment Share on other sites More sharing options...
TheEagle Posted September 14, 2010 Author Report Share Posted September 14, 2010 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... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.