CSS Image Map with Independent Diagonal Hover Area: The Complete Tutorial

In this post of mine; I am going to discuss about the tutorial to develop a CSS Image map with independent Diagonal Hover area. More over I had also explained the basic fundamental behind the concept so that you can easily use it or tweak it as per your design requirement.

Need of the innovation

It is really an easy task to create two adjacent rectangular Image Maps but if we want to create separate Diagonal Hover area effect; the things becomes messy. To solve this situation we have two different approach but they both fail in some aspect.

Option 1

Adding diagonal images to the rectangular Divs- When we add diagonal images to the Divs; the visuals looks fine but when we hover the area; we still have the Rectangular effect (blank space) and hence this method fails.

first image

Option 2

Fusing two Divs together- We can get the desired visuals by combining two divs together but it will raise the problem of Overlapping Area. The hovering link at the overlapped area will too be dominated by the div with higher Z-index and hence this method too fails.
Second image

My Idea

After being failed while trying the already defined conventional methods; I was left with no options rather than crafting a new approach. The code of the tutorials for designing CSS Image Map with unwrapped Diagonal Hover Effect is given below:

Final Design

Final Image

demo_button

Coding Part of the Tutorial

HTML

<div class="page"> <img width="964" height="182" border="0"
 class="transparent" usemap="#Map" alt="transparent" 
src="transparent.png">
<map name="Map"><area shape="poly"
 coords="-6,170,418,172,538,1,1,1,1,170"
 title="chopper" href="https://www.csschopper.com/" class="map_area" >
<area shape="poly" coords="430,172,550,1,959,0,959,172" href="#"
 title="sparxitsolutions" 
href="http://www.sparxitsolutions.com/"
 class="map_area">
</map>
<a class="anos position our-site" id="chopper" 
href="https://www.csschopper.com/"> 
<strong class="design-text">CSSCHOPPER</stron> 
<small>PSD to HTML service integration by CSSCHOPPER.</small>
<span>CSSCHOPPER</span> </a> 
<a class="texture our-site" id="sparxitsolutions" 
href="http://www.sparxitsolutions.com/"> 
<strong class="design-text">Sparx IT Solutions</strong>
 <small>Sparx IT Solutions is a renowned offshore company.</small>
 <span>Sparx IT Solutions</span> </a> 
</div>
</div>

CSS

.page{
margin:80px auto; width:1000px; position:relative;
}
.transparent {
position:absolute;
left:0px;
top:0px;
}
.design-cores {
position:relative;
padding-left:23px;
overflow:hidden;
}
.anos small, .texture small {
display:block;
font-size:16px;
line-height:30px;
color:#b39d7a;
}
.anos .design-text, .texture .design-text {
display:block;
font-size:55px;
position:static!important;
line-height:56px;
color:#305168;
font-weight:normal;
letter-spacing:-2px;
}
.texture a, .anos a {
float:right;
white-space:0px;
}
a.anos {
display:block;
height:121px;
background: url("../images/design1_hover.png")
 no-repeat scroll left top transparent;
padding: 41px 69px 16px 19px;
width:451px;
}
.anos, .texture {
position:static;
float:left;
}
.anos span, .texture span {
background: url("../images/plus-icon.png") 
no-repeat scroll 331px top transparent;
bottom: 0;
color: #B0B0B0;
display: block;
font-size: 12px;
height: 65px;
line-height:73px;
margin-top:-14px;
padding:0px 120px 2px 0px;
text-align:right;
}
.texture span {
background: url("../images/plus-icon.png") 
no-repeat scroll 353px top transparent;
padding-right: 80px;
}
.texture.active span {
background:url(../images/plus-hover.png)
 353px top no-repeat;
display:block;
}
.texture {
background: url("../images/cores-bg-img_hover.png")
 no-repeat scroll left top transparent;
height: 121px;
margin-left: -109px;
padding: 40px 0 16px 103px;
width:427px;
}
.anos.active .design-text, .texture.active .design-text {
color:#FFFFFF;
}
a.anos.active {
background:url(../images/design1_hover.png) left -184px no-repeat;
}
a.texture.active {
background:url("../images/cores-bg-img_hover.png")
 no-repeat scroll left -182px transparent;
}
.anos.active span {
background:url(../images/plus-hover.png)
 331px top no-repeat;
display:block;
}

JQuery

$('.map_area').hover(function() {
var this_attr=$(this).attr('title')
$('#'+this_attr).addClass('active');
},function() {
$('.our-site').removeClass('active');
});

download

About the Creative Mind

Dharmendra Bisht

Dharmendra Bisht

Hi! I am Dharmendra Bisht. I am a professional web developer and currently working with Sparx IT Solutions. I am a tech enthusiast and love to expand the boundaries of possibilities. When not on my desk; you can find me playing snooker or listening to music.

Simply Share
Share on Google+8Pin on Pinterest0Share on Facebook0Tweet about this on Twitter

Recent Posts