3

我一直在研究一个标题中带有大圆形徽标的网站。徽标是一个锚标记，设置如下：

<a id="siteLogo" href="#" shape="circle" coords="157,155,147"><i>Site Logo</i></a>

相关CSS如下：

i { 
   visibility: hidden; }
#siteLogo {
   background-image: url(../imgs/sprites_main2.png);
   background-position: 1000px 1000px;
   background-repeat: no-repeat;
   border: none;
   border-radius: 100%;
   display: block;
   height: 294px;
   left: 10px;
   position: relative;
   top: 8px;
   width: 294px; }
#siteLogo:hover {
   background-position: -15px -324px; }

在锚标记上设置shapeandcoords属性会给我一个链接，在 Opera 和 Firefox 中带有一个圆形可点击（与普通正方形相对）区域。Chrome、Safari 和 IE 不支持锚标记上的这些属性。我做了一些检查，似乎 HTML5 也不支持这些属性（如果我错了，请纠正我）。

我向社区提出的问题很简单。无论如何，我是否可以在不使用图像映射或在我的 HTML 中添加任何图像标签的情况下实现与 HTML5 兼容并受主要浏览器支持（我可以在没有 IE 支持的情况下生活）的类似结果？

Javascript 或 jQuery 解决方案是可以接受的。

4

2 回答 2

0

我建议使用 padding 属性来增加可点击区域的大小..

于 2012-09-13T11:34:12.150 回答
0

This may be a little late, but you can use a <div>, etc, with rounded corners. E.g.

<div style="border-radius:50px; border:1px solid black; 
  width:100px; height:100px;"  
  onclick="merry_go()">Stuff goes here</div>

gets you a 100px circle.

于 2015-08-26T19:09:00.757 回答