html - 将图像分成不同的部分

Question

我正在尝试将图像分成不同的部分，以便我可以创建效果，例如 - 如果我将鼠标悬停在图像的顶部，我需要进行更改，如果我将鼠标悬停在底部，我想要一些其他更改看到这个 http://jsfiddle.net/fc3nb5rL/11/

我在这里通过在图像顶部创建两个 div 使这成为可能，但是还有其他方法可以做到这一点吗？

这是我的代码

HTML

 <div id="top_part">
 <div id="up">UP</div>
 </div>
 <div id="bottom_part">
 <div id="bottom">BOTTOM</div>
 </div>
 <a href="second"><img src="http://placekitten.com/300/300" class="back"></a>

CSS

.container img {
  position:absolute;
  width:300px;
height:300px;
}

#top_part{
position:absolute;
width:300px;
height:150px;
background-color:transparent;
}

#bottom_part{
position:absolute;
width:300px;
height:150px;
margin-top:150px;
background-color:transparent;
}

#up{
width:300px;
background-color:black;
opacity:.9;
color:white;
text-align:center;
visibility:hidden;
}

#bottom{
width:300px;
background-color:black;
opacity:.9;
color:white;
text-align:center;
margin-top:132px;
visibility:hidden;
}
#bottom_part:hover #bottom{
visibility:visible;
}

#top_part:hover #up{
visibility:visible;
}

Answer 1

正如我在评论中所说，您可以使用 <map>标记将图像区域分为两部分。之后，您可以使用 jquery 实现悬停功能并根据需要显示内容。

<div id="common"><div id="up">UP</div></div><div id="bottom">BOTTOM</div><a href="second"><img src="http://placekitten.com/300/300" class="back" usemap="#Map"></a></div>
<map name="Map">
 <area id="first" shape="rect" coords="1,0,300,153" href="#">
 <area id="second" shape="rect" coords="2,150,299,301" href="#">
</map>

DEMO