jQuery Image Map

Your ads will be inserted here by

Easy Plugin for AdSense.

Please go to the plugin admin page to
Paste your ad code OR
Suppress this ad slot.

Hi reader,
Today i have experienced something new with images.
I created HTML page contains image. This image was mapped by using <MAP tag.

Actually,
You can’t find these areas when are browsing this page.. Because these areas (dimensions) are hidden and have nothing to be identified.

So, I was looking for way to identify these areas with something till i had an idea of adding borders or creating a floating DIV with 0.3 opacity to tell the visitor that you are pointing to this area.

I started applying this by adding actions (onmouseover) on the Map area and applying a javascript function to put a DIV over the image with area’s dimensions.
This DIV is transparent and has a border of 2px with black color.

To view the demo of this image Map, Please click here.

I have used this code

// Javascript Code:
function hovers(isover, y,x,w,h,m){
if(isover){
// showing div in position
$("#odiv").css({top:x+'px', left:y+'px', width:w+'px',height:h+'px',opacity:1}).show().click(function (){
window.open(m,"Jordan Map");
});
} else {
// hiding this div.
$("#odiv").hide().unbind('click');
}
}



/* CSS code */
#imgContainer{
width:800px;
height:991px;
position:relative;
}
#odiv{
position:absolute;
top:0;
left:0;
cursor:pointer;
border:#000 solid 2px;
display:none;
z-index:999;
}


// HTML Code
<div align="center"><div id="imgContainer"><div id="odiv" onmouseout="hovers(false)"></div><img src="jordanmap.jpeg" width="800" height="991" border="0" usemap="#Map" /></div>
&nbsp <map name="Map" id="Map">
   <area shape="rect" coords="132,227,297,460" href="map1.jpg" target="_blank" alt="North of Jordan" onmouseover="hovers(true, 132,227,165,233,'map1.jpg')" />
   <area shape="rect" coords="120,416,285,628" href="map2.jpg" target="_blank" alt="Middle of Jordan" onmouseover="hovers(true, 120,416,165,212,'map2.jpg')" />
   <area shape="rect" coords="111,574,270,795" href="map3.jpg" target="_blank" alt="Middle of Jordan" onmouseover="hovers(true, 111,574,159,221,'map3.jpg')" />
   <area shape="rect" coords="50,685,200,888" href="map4.jpg" target="_blank" alt="South of Jordan" onmouseover="hovers(true, 50,685,150,203,'map4.jpg')" />
   <area shape="rect" coords="20,262,159,450" href="map5.jpg" target="_blank" alt="North of Israel" onmouseover="hovers(true, 20,262,139,188,'map5.jpg')" />
   <area shape="rect" coords="18,406,132,556" href="map6.jpg" target="_blank" alt="Middle of Israel" onmouseover="hovers(true, 18,406,114,150,'map6.jpg')" />
   <area shape="rect" coords="17,544,123,744" href="map7.jpg" target="_blank" alt="South of Israel" onmouseover="hovers(true, 17,544,106,200,'map7.jpg')" />
  </map>
</div>

By Alaa Badran

Front-End and Web developer

10 replies on “jQuery Image Map”

Leave a Reply

Your email address will not be published. Required fields are marked *