How to make a rounded image as a selected area of a link in css/php?

Question

I have some rounded images (png) and I would like to make them work as a clickable area for some links. I am trying to do that in the css:

a { color: #234c9e; text-decoration: none; line-height: inherit; display: block; border: 3px dashed #000;}

but it works for squared images only. Is it simple or do i need to seek for javascript for this?

Answer 1

It doesn't seem like this can be done with just CSS, but I could be wrong...

HTML supports it.

<img src="/images/usemap.gif" alt="usemap" border="0" 
     usemap="#tutorials"/>
<map name="tutorials">
   <area shape="circle" 
            coords="50,50,50"
            alt="PHP Tutorial"
        href="/php/index.htm" 
            target="_blank" />
</map>

Reference

Also seems possible with php:

<map id="schemaMap" name="schemaMap">
    <? for ($i=0;$i<3;$i++):?>
    <area shape="<?php echo $shape ?>"
          coords="<?php echo $coords[$i] ?>"
          <? if ($curretAction == $action [$i]):?>
          onclick ="return false;"
          <? else: ?>
          href ="<?php echo $links[$i] ?>"
          <? endif; ?>
          alt ="<?php echo $this->translate($alt[$i]); ?>"
          />
    <? endfor;?>
</map>

Reference

Also seems possible with jQuery:

$(document).ready(function() {
    if($('#location-map')) {
        $('#location-map area').each(function() {
            var id = $(this).attr('id');
            $(this).mouseover(function() {
                $('#overlay'+id).show();

            });

            $(this).mouseout(function() {
                var id = $(this).attr('id');
                $('#overlay'+id).hide();
            });

        });
    }
});

Reference here.