image - 如何将圆形图像作为css/php中链接的选定区域？

Question

我有一些圆形图像（png），我想让它们作为一些链接的可点击区域。我正在尝试在 css 中做到这一点：

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

但它仅适用于平方图像。这很简单还是我需要为此寻找javascript？

Answer 1

似乎这不能只用 CSS 来完成，但我可能是错的......

HTML 支持它。

<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>

参考

似乎也可以使用 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>

参考

使用 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();
            });

        });
    }
});

参考这里。