Image map hilight - animates an image map hotspots


/ Published in: jQuery
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>
  2. <script type="text/javascript">
  3. $(function () {
  4.  
  5. $('.mapHiLight').maphilight({ stroke: false, fillColor: '009DDF', fillOpacity: 1 });
  6.  
  7. });
  8. </script>
  9.  
  10. <asp:ImageMap ID="mapAreas" OnClick="mapAreas_Click" CssClass="mapHiLight" ImageUrl="/images/pic-directory-results-map.gif" Width="225" Height="159" runat="server">
  11. <asp:PolygonHotSpot HotSpotMode="PostBack" PostBackValue="15" AlternateText="Kearsley" Coordinates="224,142,224,141,224,141,223,140,221,136,221,131,220,131,217,129,214,128,211,126,210,126,205,125,205,124,202,123,197,120,195,122,192,123,191,124,190,124,190,124,190,124,190,122,190,122,189,123,188,124,188,124,186,125,186,125,185,127,185,127,185,127,183,127,182,127,183,130,183,130,182,130,182,130,179,130,179,130,178,130,177,130,177,130,176,139,176,139,179,141,185,147,189,149,195,151,200,153,201,152,211,156,214,152,212,151,212,150,212,150,212,150,212,149,212,148,211,147,212,146,213,146,213,146,212,145,212,145,213,145,213,144,215,144,216,143,215,142,218,141,221,142,222,144,224,146,224,145,225,143,224,142,224,142" />
  12. <asp:PolygonHotSpot HotSpotMode="PostBack" PostBackValue="7" AlternateText="Farnworth" Coordinates="176,130,176,130,176,130,176,130,177,129,177,129,178,129,178,130,179,130,179,130,182,130,181,127,181,127,181,127,183,127,185,127,185,125,186,125,186,125,187,124,189,123,190,122,190,122,191,120,191,119,191,119,192,118,192,117,190,116,189,116,187,116,187,116,187,115,186,114,186,114,185,114,185,114,184,115,184,114,183,113,183,112,183,110,183,109,182,108,181,109,180,109,180,109,177,108,176,107,175,106,174,107,174,108,173,109,172,109,171,109,170,109,171,110,174,113,174,113,174,113,173,113,173,113,172,113,172,113,172,113,171,113,171,114,171,114,169,112,169,113,170,114,170,114,169,116,169,116,169,116,168,116,168,116,168,116,168,115,166,116,165,116,165,118,165,122,165,122,167,125,167,125,167,126,167,126,160,126,161,130,160,130,160,130,160,136,160,136,162,137,164,138,168,139,168,140,174,140,175,139,176,130,176,130" />
  13. <asp:PolygonHotSpot HotSpotMode="PostBack" PostBackValue="16" AlternateText="Little Lever and Darcy Lever" Coordinates="202,101,201,100,200,99,200,99,198,98,197,98,196,98,197,97,187,97,187,98,187,98,184,98,184,98,184,98,184,97,180,97,180,97,180,97,180,96,179,94,176,92,176,93,175,94,174,93,173,94,171,94,171,95,170,96,170,96,170,96,169,96,169,97,169,97,169,97,168,97,168,97,168,97,168,97,168,97,167,97,167,97,167,98,167,98,167,98,166,99,166,99,167,100,168,100,169,101,170,101,171,100,171,101,171,101,172,102,172,102,173,102,173,102,173,102,174,102,174,103,174,103,174,103,173,105,171,106,171,107,172,109,173,109,174,108,174,107,176,106,176,107,177,108,180,109,180,109,182,108,183,109,183,110,183,112,184,113,184,114,184,115,185,114,185,114,186,114,186,114,187,115,187,116,188,116,188,116,188,116,190,115,193,117,193,117,192,118,192,119,191,120,191,120,190,123,190,124,190,124,192,123,194,121,197,120,196,120,198,119,200,120,203,120,205,117,206,117,206,118,207,121,210,119,210,117,210,116,209,115,210,111,209,108,209,107,209,107,208,105,206,101,205,102,202,101,202,101,202,101" />
  14. <asp:PolygonHotSpot HotSpotMode="PostBack" PostBackValue="4" AlternateText="Breightmet" Coordinates="183,75,183,76,182,77,182,77,181,76,180,76,178,74,178,74,176,73,176,75,177,76,177,76,178,77,177,79,177,79,177,79,178,81,178,81,177,81,177,82,177,82,177,82,177,82,177,82,178,82,178,83,177,84,177,86,178,86,178,87,177,87,175,88,175,90,176,91,176,91,176,91,176,91,176,92,176,92,177,92,179,94,180,95,180,96,180,97,184,97,184,97,184,97,186,97,187,97,187,97,197,97,197,96,197,95,197,95,197,94,197,94,197,92,197,91,197,89,196,89,196,88,196,88,196,87,196,86,195,85,194,83,195,83,195,82,195,81,195,80,195,79,196,78,195,78,195,76,195,76,195,74,196,74,196,72,195,72,195,71,194,69,194,69,194,68,192,67,190,67,190,68,187,68,185,67,185,69,184,69,184,69,182,70,183,70,183,72,183,72,183,74,183,75,183,75" />
  15. </asp:imagemap>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.