Изменение map area при изменении размера картинки

Материал из rrv-wiki
Перейти к навигации Перейти к поиску

Для резинового дизайна, требуется иногда, что бы размер области со ссылками изменялся в зависимости от ширины окна, но в map area координаты задаются жестко в пикселях. Так вот что бы все динамически менялось надо воспользоватся скриптом взятым тут. Вот пример. Для работы требуется jQuery.


На всякий случай копирую исходные код соей страницы: 

<!DOCTYPE html>
 <html>
 <head>
 <style>
	#mydiv {
		width: 100%;
	}
	img[usemap] {
		border: none;
		height: auto;
		max-width: 100%;
		width: auto;
	}
 </style>
 </head>
 <body>
 <div id="mydiv">
 <img src="./img.jpg" alt="" width="1024" height="800"usemap="#myMap" />
 <map name="myMap" id="Map">
    <area alt="1" title="1" href="#" shape="poly" coords="69,390,68,59,567,58,567,389" />
    <area alt="2" title="2" href="#" shape="poly" coords="324,421,372,421,372,739,324,739" />
    <area alt="3" title="3" href="#" shape="poly" coords="523,700,775,396,839,449,585,752" />
 </map>
 </div>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script>
 ;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").load(function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);
 
 $(document).ready(function(e) {
	$('img[usemap]').rwdImageMaps();
 
 $('area').on('click', function() {
		alert($(this).attr('alt') + ' clicked');
 });

 });

 </script>
 </body>
 </html>

Здесь главная это упрощенный пример автора, у меня были ошибки на страницы пришлось упростить (он так тоже советовал): 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
;(function(a){a.fn.rwdImageMaps=function(){var c=this;var b=function(){c.each(function(){if(typeof(a(this).attr("usemap"))=="undefined"){return}var e=this,d=a(e);a("<img />").load(function(){var g="width",m="height",n=d.attr(g),j=d.attr(m);if(!n||!j){var o=new Image();o.src=d.attr("src");if(!n){n=o.width}if(!j){j=o.height}}var f=d.width()/100,k=d.height()/100,i=d.attr("usemap").replace("#",""),l="coords";a('map[name="'+i+'"]').find("area").each(function(){var r=a(this);if(!r.data(l)){r.data(l,r.attr(l))}var q=r.data(l).split(","),p=new Array(q.length);for(var h=0;h<p.length;++h){if(h%2===0){p[h]=parseInt(((q[h]/n)*100)*f)}else{p[h]=parseInt(((q[h]/j)*100)*k)}}r.attr(l,p.toString())})}).attr("src",d.attr("src"))})};a(window).resize(b).trigger("resize");return this}})(jQuery);

$('img[usemap]').rwdImageMaps();

</script>
Источник — https://i-rrv.ru/wiki/index.php?title=Изменение_map_area_при_изменении_размера_картинки&oldid=135