How make one image into multiple buttons and some other stuff

问题

Ok, I'm making an app with this kind of of disk in it: http://dl.dropbox.com/u/8051037/disk_full.png

I have the two rings as separate images, but I need to figure out a way to position them like they are in the image, first off. I'm not great at figuring out layouts, so I don't really know where to start with that.

Also, I need each section defined by the black lines to be a different imagebutton. I've been everywhere looking for an answer to this, but no one's been able to help me so far.

Thanks for any help, been stuck on this problem for a few days now!

回答1:

You'll need an image map (which follows this basic structure) to create the click-able bits (example):

<map name="map-name">
<area shape="rect" coords="135,180,200,185" href="webpage1.html">
<area shape="circle" coords="49,300,42" href="webpage2.html">
<area shape="poly" coords="24,35,55,20,90,42,91,80,60,105" href="webpage3.html">
</map>
<img src="image.gif" usemap="#map-name">

For your positioning you can't superimpose images very easily and still keep the click-able regions working well. Is there no way for you to combine the images from the start (in photoshop)?

来源：https://stackoverflow.com/questions/5385033/how-make-one-image-into-multiple-buttons-and-some-other-stuff