Alaa Badran

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>


Related posts:

Image lightbox (imageflow) and image enlargement with Jquery Crop image in PHP. New and Easy Gallery for jQuery Top 5 jQuery image galleries