javascript - CSS + HTML custom shape buttons - Stack Overflow

admin管理员组

文章数量:1333201

I'm developing a game, it displays a map with clickable countries. The fact that you can click on countries is giving me a headache. I can use an image per country and use absolute positioning and attach an onclick event, however, I'd have to stream 100 images to each user, I'd be unable to use sprites and a couple more things. I could mess with javascript, but I'm guessing it's going to be a real mess. Is there any other way to implement this? Perhaps simpler, more elegant?

I'm developing a game, it displays a map with clickable countries. The fact that you can click on countries is giving me a headache. I can use an image per country and use absolute positioning and attach an onclick event, however, I'd have to stream 100 images to each user, I'd be unable to use sprites and a couple more things. I could mess with javascript, but I'm guessing it's going to be a real mess. Is there any other way to implement this? Perhaps simpler, more elegant?

• javascript
• html
• css

Share Improve this question Follow asked Jul 26, 2011 at 22:46 arg20arg20 4,99111 gold badge5353 silver badges7575 bronze badges 3

• 1 Well you can use Image maps i guess. It creates a linkable polygon on an image. Illustrator can do this pretty easily. You can also check out www.image-maps. – Matt Commented Jul 26, 2011 at 22:48
• change images name to country name and set each button id with that name and load via javascript – xkeshav Commented Jul 26, 2011 at 22:48
• image maps: htmlcodetutorial./images/images_famsupp_220.html – sled Commented Jul 26, 2011 at 22:48

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

You could use SVG maps, Wikipedia has plenty available: http://en.wikipedia/wiki/Wikipedia:Blank_maps

And here's an example of clickable geography in SVG: http://raphaeljs./australia.html

Use an plain old HTML image map. This allows you to specify parts of the image as polygons, each of which are distinct clickable links.

(You may have heard statements that you should not use image maps for accessibility reasons — this is irrelevant, as do-it-yourself options like CSS sprites are worse for this purpose.)

You can use jVectorMap plugin for displaying interactive world map. It's based on vector graphic (SVG and VML), works great in all browsers.

Have the client load one single image and use CSS sprites to display each individual country.

本文标签： javascriptCSSHTML custom shape buttonsStack Overflow