Javascript
[Jquery] 이미지맵 반응형
- 2022.07.07 11:19:06
[!]jquery[/!]
$(document).ready(function(){
//이미지맵이 있는 경우 반응형 이미지맵 처리 var coords = new Array(); function imagemap_coords(type){ $('area[coords2]').each(function(idx){ if(type=='ready'){ coords[idx] = $(this).attr('coords'); } var map_id = $(this).parent('map').attr('name'); var $img = $('img[usemap="#'+map_id+'"]'); var org_width = parseInt($img[0].naturalWidth); var now_width = $img.width(); var coords2 = coords[idx].split(','); var coords_re = ''; for(var i=0;i<coords2.length;i++){ coords_re += ','+coords2[i]*(now_width/org_width); } coords_re = coords_re.substring(1); $(this).attr('coords',coords_re); }); } imagemap_coords('ready'); $(window).resize(imagemap_coords); }); * 맵 api를 사용하는 경우 usemap 문제 발생할 수 있음. * 그런 경우 area 에 attribute 추가해서 사용할 것 |