I've never tried doing anything other than saving simple slices in any Adobe apps. They mostly suck for anything web-related and right now I'm pretty much using Illustrator since it's much better than Photoshop for web graphics.

Anyway, the issue right now is that I can't seem to change the z-value of the image map. Well, I've been able to do it one way, but then it became a plain rect and lost its circular region. Odd.

Here's my CSS for the non-map case (using a plain anchor):
Code:

---

#buyticket, #buyticket a, #buyticket img { position: relative; top: 60px; left: 520px;
 width: 125px; height: 124px; margin-bottom: -124px; display: block; }
#buyticket a, #buyticket img { position: absolute; top: 0; left: 0; z-index: 10; }
#buyticket a { z-index: 30;}

---

And the HTML:
Code:

---

<div id="buyticket" >
	<a title="Buy your ticket online" href="/test.html"></a>
	<img src="images/btn_buyticket.png" width="125" height="124" />
</div>

---

HTML with an image map instead:
Code:

---

<div id="buyticket" >
	<a title="Buy your ticket online" href="/test.html"></a>
	<img src="images/btn_buyticket.png" width="125" height="124" usemap="#buyticketc233080f" />
	<map name="buyticketc233080f"><area shape="circle" coords="62,62,62" href="/test.html" /></map>
</div>

---

For now I've left it as a normal link since I still have to create the PayPal button to see what additional crap I may have to deal with.