1

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?

T J
  • 42,762
  • 13
  • 83
  • 138
Datacrawler
  • 2,780
  • 8
  • 46
  • 100

1 Answers1

0

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.

Community
  • 1
  • 1
Scott Solmer
  • 3,871
  • 6
  • 44
  • 72
  • Yes. It worked. But you forgot the "" within the img src. Try to edit it to show it correctly. You helped me a lot :) I had a 100x100 pixel image so I had to put cords = 50,50,50 (it was rounded). – Datacrawler Oct 13 '13 at 10:33