2014-09-29 70 views
0

我想將圖像劃分爲不同的部分,以便我可以創建效果,例如,如果我將鼠標懸停在圖像的頂部,則需要進行更改,如果我將鼠標懸停在底部我想一些其他的變化看到這 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; 
} 
+0

看起來很精緻。 Otherway是你可以使用''並在地圖區域應用懸停樣式。 – 2014-09-29 12:06:27

+0

@SureshPonnukalai你能告訴我它是如何完成的嗎?我是新的 – Akshay 2014-09-29 12:07:13

回答

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

+0

Divs比他們更長的地圖更好:)謝謝你的回答 – Akshay 2014-09-29 12:37:03