Initial commit

Author: stowball

README.md

@@ -0,0 +1,10 @@
+jQuery RWD Image Maps
+==============================
+
+### Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
+
+* * *
+
+Usage:
+
+$('img[usemap]').rwdImageMaps();

jquery.rwdImageMaps.js

@@ -0,0 +1,38 @@
+/*
+* rwdImageMaps jQuery plugin v1.0
+*
+* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
+*
+* Copyright (c) 2012 Matt Stow
+* http://mattstow.com
+* Licensed under the MIT license
+*/
+(function($) {
+	$.fn.rwdImageMaps = function() {
+		var $img = this;
+		var rwdImageMap = function() {
+			$img.each(function() {
+				if (typeof($(this).attr('usemap')) == 'undefined')
+					return;
+				var w = $(this).attr('width'), h = $(this).attr('height'), wPercent = $(this).width()/100, hPercent = $(this).height()/100, map = $(this).attr('usemap').replace('#', ''), c = 'coords';
+				$('map[name="' + map + '"]').find('area').each(function() {
+					if (!$(this).data(c))
+						$(this).data(c, $(this).attr(c));
+					var coords = $(this).data(c).split(','), coordsPercent = new Array(coords.length);
+					
+					for (var i = 0; i < coordsPercent.length; ++i) {
+						if (i % 2 === 0)
+							coordsPercent[i] = parseInt(((coords[i]/w)*100)*wPercent);
+						else
+							coordsPercent[i] = parseInt(((coords[i]/h)*100)*hPercent);
+					}
+					$(this).attr(c, coordsPercent.toString());
+				});
+			});
+		};
+		rwdImageMap();
+		$(window).resize(function() {
+			rwdImageMap();
+		});
+	};
+})(jQuery);

jquery.rwdImageMaps.min.js

@@ -0,0 +1,10 @@
+/*
+* rwdImageMaps jQuery plugin v1.0
+*
+* Allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize
+*	 
+* Copyright (c) 2012 Matt Stow
+* http://mattstow.com
+* Licensed under the MIT license
+*/
+(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var d=a(this).attr("width"),f=a(this).attr("height"),e=a(this).width()/100,i=a(this).height()/100,g=a(this).attr("usemap").replace("#",""),j="coords";a('map[name="'+g+'"]').find("area").each(function(){if(!a(this).data(j)){a(this).data(j,a(this).attr(j))}var l=a(this).data(j).split(","),k=new Array(l.length);for(var h=0;h<k.length;++h){if(h%2===0){k[h]=parseInt(((l[h]/d)*100)*e)}else{k[h]=parseInt(((l[h]/f)*100)*i)}}a(this).attr(j,k.toString())})})};b();a(window).resize(function(){b()})}})(jQuery);