将图像分成不同的部分

I am trying to divide an image into different parts so that i can create effects like- if i hover over the top part of the image i need changes to take place and if i hover the bottom part i would like some other changes see this http://jsfiddle.net/fc3nb5rL/11/

我试图将图像划分为不同的部分,以便我可以创建效果,如果我将鼠标悬停在图像的顶部,我需要进行更改,如果我将鼠标悬停在底部,我希望其他一些更改,请参阅此http ://jsfiddle.net/fc3nb5rL/11/

here i made this possible by creating two divs on top of the image but is there any other way to do this?

在这里我通过在图像上创建两个div来实现这一点,但还有其他方法可以做到这一点吗?

here is my code

这是我的代码

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

1 个解决方案

#1

As I told in the comment, You can use <map> tag to divide the image area into two parts. After that you can use jquery for hover functionality and display the content as you like it.

正如我在评论中所说,您可以使用

<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