/gist:559756

## gistfile1.txt
<style>
.highlight, tr:hover  { background-color: #aaa; }
</style>

<script type="text/javascript" src="../scripts/js/jquery.maphilight.js"></script>

<script>
function highlight(theid) { if (theid != null) document.getElementById(theid).className = "highlight"; }
function dehighlight(theid) { if (theid != null) document.getElementById(theid).className = ""; }
$(function() {
        $('.map').maphilight();
    });

   $("table tbody tr").mouseover(function(e) {
       $('#'+$(this).attr("name")).mouseover();
   }).mouseout(function(e) {
       $('#'+$(this).attr("name")).mouseout();
        }).click(function(e) { e.preventDefault(); });
 });

</script>
</head>
<html>
<table>
<tr id="myrowA" name="spotA">
  <td>spot1 or A in map</td><td>handy other facts or links</td>
</tr>
<tr id="myrowB" name="spotB">
  <td>spot2 or B in map</td><td>handy other facts or links</td>
</tr>
</table>

 <div id="imgmapdiv">
     <map name="imgmap">
         <area id="spotA" name="myrowA" shape="poly" coords="50,45,65,43,74,77,45,80,50,47" href="#" alt="1">
         <area id="spotB" name="myrowB"shape="poly" coords="48,82,70,80,75,109,46,113,49,83" href="#" alt="2">
     </map>
 </div>
<div width=400>
   <p>
       <img id="diagram" src="my_pic.jpg" width=400 style="width:400px" usemap="#imgmap">
</div>


diff from maphighlight 1.2.2:
***************
*** 179,185 ****

                        mouseover = function(e) {
                                var shape, area_options;
-                               highlight($(this).attr('name'));
                                area_options = options_from_area(this, options);
                                if(
                                        !area_options.neverOn
--- 179,184 ----
***************
*** 227,233 ****
                                                }
                                        }
                                });
!                               $(map).find('area[coords]').mouseover(mouseover).mouseout(function(e) { clear_canvas(canvas); dehighlight($(this).attr('name'));});
                        }

                        img.before(canvas); // if we put this after, the mouseover events wouldn't fire.
--- 226,232 ----
                                                }
                                        }
                                });
!                               $(map).find('area[coords]').mouseover(mouseover).mouseout(function(e) { clear_canvas(canvas); });
                        }

                        img.before(canvas); // if we put this after, the mouseover events wouldn't fire.
	<style>
	.highlight, tr:hover { background-color: #aaa; }
	</style>

	<script type="text/javascript" src="../scripts/js/jquery.maphilight.js"></script>

	<script>
	function highlight(theid) { if (theid != null) document.getElementById(theid).className = "highlight"; }
	function dehighlight(theid) { if (theid != null) document.getElementById(theid).className = ""; }
	$(function() {
	$('.map').maphilight();
	});

	$("table tbody tr").mouseover(function(e) {
	$('#'+$(this).attr("name")).mouseover();
	}).mouseout(function(e) {
	$('#'+$(this).attr("name")).mouseout();
	}).click(function(e) { e.preventDefault(); });
	});

	</script>
	</head>
	<html>
	<table>
	<tr id="myrowA" name="spotA">
	<td>spot1 or A in map</td><td>handy other facts or links</td>
	</tr>
	<tr id="myrowB" name="spotB">
	<td>spot2 or B in map</td><td>handy other facts or links</td>
	</tr>
	</table>

	<div id="imgmapdiv">
	<map name="imgmap">
	<area id="spotA" name="myrowA" shape="poly" coords="50,45,65,43,74,77,45,80,50,47" href="#" alt="1">
	<area id="spotB" name="myrowB"shape="poly" coords="48,82,70,80,75,109,46,113,49,83" href="#" alt="2">
	</map>
	</div>
	<div width=400>
	<p>
	<img id="diagram" src="my_pic.jpg" width=400 style="width:400px" usemap="#imgmap">
	</div>



	diff from maphighlight 1.2.2:
	***************
	* 179,185 **

	mouseover = function(e) {
	var shape, area_options;
	- highlight($(this).attr('name'));
	area_options = options_from_area(this, options);
	if(
	!area_options.neverOn
	--- 179,184 ----
	***************
	* 227,233 **
	}
	}
	});
	! $(map).find('area[coords]').mouseover(mouseover).mouseout(function(e) { clear_canvas(canvas); dehighlight($(this).attr('name'));});
	}

	img.before(canvas); // if we put this after, the mouseover events wouldn't fire.
	--- 226,232 ----
	}
	}
	});
	! $(map).find('area[coords]').mouseover(mouseover).mouseout(function(e) { clear_canvas(canvas); });
	}

	img.before(canvas); // if we put this after, the mouseover events wouldn't fire.