Friday, 15 April 2016

Image Map Highlighter

Image Map Highlighter

Image map is used to provide different type of links on image at a any specific place.

Image map help you to provide many links on a single image which is requirement of many fields. I am going to show you an example of e paper for a print paper which is totally based on image map ..


Code :

<html>
<head>
<title>
Girfa : Imagemap Highlighter
</title>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
 <script type="text/javascript" src="jquery.maphilight.js"></script>
<script language="javascript">
$(function() {
        $('.map').maphilight({
            fillColor: '008800'
        });
     
    });
</script>

</head>
<body>
<center>
<div class="yuvabottombar"  id="Div1" >
<img src="main.jpg" usemap="#mymap" id="img" class="map" />
<map name="mymap" >
  <area id="area01" shape="rect" coords="0,0,748,190" href="1.JPG" alt="Sun" title="Banner Gunj Uthi Ranbheri" target="_blank"  >
  <area shape="rect" coords="20,190,748,790" href="2.jpg" alt="Sun" title="Click to read in zoom mode " target="_blank" >
    <area shape="rect" coords="0,790,748,1111" href="3.JPG" alt="Sun" title="Click to read in zoom mode " target="_blank">
  </map>
  </div>
</center>
</body>
</html>