Overlapping Button Images

[Randomishlying]

How can I make a button image overlap without overlapping the selectable areas? My idea was to use the map and area tags to change the selectable area of each image but I don't know how to overlap the images.Honestly, I don't know if this is the best way to handle my problem and I would be more than happy to hear suggestions.

[eTianbun]

What are you trying to do? Your description is not Clear enough! Can you upload a more descriptive image?

[Randomishlying]

This image should better describe what my problem is: At the same time I would like the mouse over area of each button to not overlap any other button. That is why I was think that the map and area tags might come in handy, because I want the mouse over area for each button to be the very outside edge of the visible color, and not the edge of the image. Again I don't know if this is the best way to handle my problem. *shrug* I hope I helped clear up any confusion, and I hope to hear your suggestions.Thanks.

[eTianbun]

You can make use of css:

position:relative;

to place the image ontop of the other. Ex:CSS:

img.two{position:relative; left: 20px}img.two:hover:{position:static}

HTML:

<img src="image.png" class="two"/><img src="image.png"/>

In the above code, the image, with class="two", will move forward by 20px, and cover the gap. If you mouseover it, it will come back to its normal position.

[Randomishlying]

This was helpful, though I do feel that I'll run into some problems with this at some point (still being new at this). Thank you for your suggestions.