Skip to content

Instantly share code, notes, and snippets.

/gist:559756

Created Aug 31, 2010
Embed
What would you like to do?
<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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.