Highlighting imagemap borders

Posted by & filed under Javascript.

So you have an imagemap and you want to show the border on mouseover – not the image border – the imagemap boarder.

To the rescue is a JQuery plugin by a guy called David Lynch. Here’s a working example:

<!-- http://davidlynch.org/js/maphilight/docs/ -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$.fn.maphilight.defaults = {
		// you HAVE to specify all options
		fill: true,
		fillColor: '000000',
		fillOpacity: 0.2,
		stroke: true,
		strokeColor: 'ff0000',
		strokeOpacity: 1,
		strokeWidth: 1,
		fade: true,
		alwaysOn: false,
		neverOn: false,
		groupBy: false
	}
	$('.map').maphilight();
});
</script>
<img class="map" src="images/intouch.jpg" alt="" height="516" width="232" border="0" usemap="#intouch" />

<map name="intouch">
	<area shape=rect coords="63,336,217,356" href="http://http://www.markflint.net">
</map>

Here’s a link to David’s documentation:
http://davidlynch.org/js/maphilight/docs/

One Response to “Highlighting imagemap borders”

Leave a Reply

  • (will not be published)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Bitnami