How to get jQuery maphilight to work?

Question

How to get jQuery maphilight to work?

4.2k Views Asked by dbaker6 At 04 April 2025 at 05:53

I cant get Mapilight http://davidlynch.org/projects/maphilight/docs/ to work!

These are my script links in the head of my html.

<script type="text/javascript" src="/js/jquery.js"></script> 
<script type="text/javascript" src="/js/jquery.maphilight.min.js"></script>
<script type="text/javascript">
   $('.map').maphilight()
   
</script>

$('.map').maphilight()

here is my img and map

<img class="map" title="Knight Campus, Warwick - Third Floor" src="/about/floorplans/knight/images/3rd_flr_2013_layout2.png" alt="Knight Campus, Warwick - Third Floor" usemap="#simple" />

<map name="simple">
  <area href="#" data-state="VT" data-full="Vermont" shape="rect" coords="377,34,407,43" />
  <area href="#" data-state="MA" data-full="Massachusetts" shape="rect" coords="358,47,406,56">
  <area shape="poly" coords="211,3,121,67,112,53,95,103,146,108,136,92,229,25" href="#" alt="arrow">
  <area shape="poly" coords="78,83,70,100,52,104,64,115,61,133,78,124,94,133,91,116,104,102,87,101,79,88" href="#" alt="star">
  <area shape="poly" coords="248,126,222,150,202,122,233,105,239,118,249,125,250,128" href="#" alt="a square">
  <area shape="poly" coords="151,249,175,225,182,222,167,193,136,221,153,250" href="#" alt="another square">
  <area shape="rect" coords="250,250,290,290" href="#" alt="Shadow for some">
</map>

PLEASE HELP!

Thanks

Original Q&A

There are 1 best solutions below

**Slippery Pete** · Answer 1

Wrap your call to maphilight() in document.ready():

$(document).ready(function() {
  $('.map').maphilight();
});

The following works perfectly for me:

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script type='text/javascript' src='http://davidlynch.org/projects/maphilight/jquery.maphilight.js'></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('.map').maphilight({ alwaysOn: true });
            // uncomment this line for normal hover highlighting
            //$('.map').maphilight();
        });   
    </script>
</head>
<body>
    <img class="map" title="Knight Campus, Warwick - Third Floor" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Big_Sur_June_2008.jpg/1024px-Big_Sur_June_2008.jpg" alt="Knight Campus, Warwick - Third Floor" usemap="#simple" />
    <map name="simple">
      <area href="#" data-state="VT" data-full="Vermont" shape="rect" coords="377,34,407,43" />
      <area href="#" data-state="MA" data-full="Massachusetts" shape="rect" coords="358,47,406,56">
      <area shape="poly" coords="211,3,121,67,112,53,95,103,146,108,136,92,229,25" href="#" alt="arrow">
      <area shape="poly" coords="78,83,70,100,52,104,64,115,61,133,78,124,94,133,91,116,104,102,87,101,79,88" href="#" alt="star">
      <area shape="poly" coords="248,126,222,150,202,122,233,105,239,118,249,125,250,128" href="#" alt="a square">
      <area shape="poly" coords="151,249,175,225,182,222,167,193,136,221,153,250" href="#" alt="another square">
      <area shape="rect" coords="250,250,290,290" href="#" alt="Shadow for some">
    </map>
</body>
</html>

How to get jQuery maphilight to work?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in HTML

Related Questions in MAPHILIGHT

Trending Questions

Popular # Hahtags

Popular Questions