'Here we can able to load another image into the Areashape area on Mouse-over.
Step 1:
Add map area around your selected part to the single image.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<img src="images/normal.gif" width="516" height="101" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="343,1,515,99" href="#" />
<area shape="rect" coords="174,1,344,99" href="#" />
<area shape="rect" coords="1,1,175,106" href="#" />
</map>
</body>
</html>
step 2:
Add javascript in to the header tag.Here we creating a DIV eleement on the top of the Areashape on Mouseover.
<script type="text/javascript">
function showDiv(left,top, href, clsname)
{
//alert(href);
var div = document.getElementById('overDiv');
div.style.display = "";
div.style.position="absolute";
div.style.display="block";
div.style.cursor="pointer";
div.style.zIndex=3000;
div.style.top = 0;
div.className= clsname;
div.setAttribute('onclick', 'window.location('+ href + ');'); //.onclick = navigate(href);
}
function hideDiv()
{
document.getElementById('overDiv').style.display = "none";
}
function navigate(href)
{
window.location(href);
}
</script>
Step 3:
Here we adding the DIV element(showDiv) on mouseover.
<div style="position:relative;">
<img src="images/normal.gif" width="516" height="101" border="0" usemap="#Map" /></div>
<map name="Map" id="Map">
<area shape="rect" coords="343,1,515,99" href="#" onmouseover="showDiv('0px','0px', this.href,'navtab3' )"
target="_self" alt="purple" />
<area shape="rect" coords="174,1,344,99" href="#" onmouseover="showDiv('0px','0px', this.href,'navtab2' )"
target="_self" alt="green" />
<area shape="rect" coords="1,1,175,106" href="#" onmouseover="showDiv('0px','0px', this.href,'navtab1' )"
target="_self" alt="red" />
</map>
Step 4:
Add the CSS class..
<style type="text/css">
.navtab1{ background: url(images/active.gif) no-repeat 0px top; left:0px;display:block; width:173px; height:97px;}
.navtab2{ background: url(images/active.gif) no-repeat -173px top; display:block; left:173px; width:173px; height:97px;}
.navtab3{ background: url(images/active.gif) no-repeat -345px top; display:block; left:344px; width:200px; height:97px;}
</style>
Final Result!!!
Developer View <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
function showDiv(left,top, href, clsname)
{
//alert(href);
var div = document.getElementById('overDiv');
div.style.display = "";
div.style.position="absolute";
div.style.display="block";
div.style.cursor="pointer";
div.style.zIndex=3000;
div.style.top = 0;
div.className= clsname;
div.setAttribute('onclick', 'window.location('+ href + ');'); //.onclick = navigate(href);
}
function hideDiv()
{
document.getElementById('overDiv').style.display = "none";
}
function navigate(href)
{
window.location(href);
}
</script>
<style type="text/css">
<!--
.navtab1{ background: url(images/active.gif) no-repeat 0px top; left:0px;display:block; width:173px; height:97px;}
.navtab2{ background: url(images/active.gif) no-repeat -173px top; display:block; left:173px; width:173px; height:97px;}
.navtab3{ background: url(images/active.gif) no-repeat -345px top; display:block; left:344px; width:200px; height:97px;}
-->
</style>
</head>
<body>
<div style="position:relative; display:block;"> <img src="images/normal.gif" width="516" height="101" border="0" usemap="#Map" />
<div id="overDiv" style="display: none;" onmouseout="hideDiv()"> </div>
</div>
<map name="Map" id="Map">
<area shape="rect" coords="343,1,515,99" href="#" onmouseover="showDiv('0px','0px', this.href,'navtab3' )"
target="_self" alt="purple" />
<area shape="rect" coords="174,1,344,99" href="#" onmouseover="showDiv('0px','0px', this.href,'navtab2' )"
target="_self" alt="green" />
<area shape="rect" coords="1,1,175,106" href="#" onmouseover="showDiv('0px','0px', this.href,'navtab1' )"
target="_self" alt="red" />
</map>
</body>
</html>
Enjoy :)
Greate Anil :))))
ReplyDeleteNice approch anil..........
ReplyDelete