CODEWITHSUNDEEP
htmlcss
Akshay
Akshay

Reputation: 14348

Dividing an image into different parts

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/

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

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

Upvotes: 0

Views: 6753

Answers (1)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13978

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

Upvotes: 1

Related Questions