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>

Reference

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

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.

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

1 个答案: