Question

如果你有能力帮助我，并且你掌握了所需的知识，那么请考虑一下：

我的网站上有一个圆形徽标，是否可以将锚标记的可点击区域变成圆形以匹配图像？

以下是相关代码：

HTML：

        <div class="container clearfix">
        <div class="hheader">
            <a id="logo" href="#" title="Return to home">
            <img src="http://i.imgur.com/sfKCJEY.png" alt="Density Art Logo">
            </a>
            <img id="motto" src="http://i.imgur.com/qN6f4fZ.png" alt="We make websites, art and more">
        </div>

CSS：

#logo {
display:inline;
position: absolute;
margin: -30px 0px 0px 10px;
}

#logo:hover {
background: black;
}

#motto {
display:inline;
float: right;
margin-top: -20px;

}

.hheader {
background-color: #005073;
background-image: url(images/header.png), -webkit-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Safari 5.1 to 6.0 */
background-image: url(images/header.png), -o-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Opera 11.1 to 12.0 */
background-image: url(images/header.png), -moz-linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* For Firefox 3.6 to 15 */
background-image: urk(images/header.png), linear-gradient(rgba(0,60,80,.8) 0%, rgba(0,80,105,.8) 50%, rgba(0,60,80,.8) 100%); /* Standard syntax */
box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4); /* Standard syntax */
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0,0,0,0.4);
border-style: solid;
border-width: 1px;
border-color: black;
margin-bottom: 25px;
margin-top: 15px;
height: 195px;
}

.container {
width: 960px;
padding: 0 10px;
margin: 0 auto;
}

https://jsfiddle.net/uedwp4be/

我在悬停时将区域设为黑色，这样你就可以看到我的意思了。

P.S非常新的CSS和HTML所以请只输入初学者友好的建议。

非常感谢任何知识渊博的会员，他们会帮助我。

Answer 1

您可以使用图像映射来完成此操作。请注意当您将鼠标悬停在徽标外时，黑色是如何显示的，当您将鼠标悬停在徽标上时，光标会切换到指针：

<div class="container clearfix">
    <div class="hheader">
        <img id="logo" src="http://i.imgur.com/sfKCJEY.png" alt="Density Art Logo" usemap="#logomap">
        <map name="logomap">
            <area shape="circle" coords="130,125,110" alt="Return to home" href="#">
        </map>
        <img id="motto" src="http://i.imgur.com/qN6f4fZ.png" alt="We make websites, art and more">
    </div>
</div>

coords的{{1}}是x轴，y轴，半径。要在中心获得“可以”的区域：

从左侧中途测量（您的图像宽约260像素，因此“130”）
从顶部中途测量（图像高约250像素，因此“125”）
添加半径（您的圆圈直径为~220px，因此“110”）

另请注意，图片现在有一个新属性<area shape="circle">，而usemap="#logomap"的名称是“logomap”。

https://jsfiddle.net/uedwp4be/7/

将图像锚点击区域设置为圆圈

1 个答案: