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

  • 3 mins
  • 1908 views

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 effects; things become messy. To solve this situation we have two different approaches but they both fail in some aspects.

Option 1

Adding diagonal images to the rectangular Divs- When we add diagonal images to the Divs; the visuals look 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 the Overlapping Area. The hovering link at the overlapped area will too be dominated by the div with higher Z-index and hence this method 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');
});

 

3 Responses to “ CSS Image Map with Independent Diagonal Hover Area: The Complete Tutorial ”

  1. Sumit

    WoW!! it’s really great to see your efforts. Keep it up.

  2. himanshu

    +1 for your effort. ….

  3. chandra shekhar

    Well done Dharmendra

Comments

13 May 2013
  • *

    Enter the Text from the image below:
    (Text on image is not case sensitive)

Recent Posts