통합검색

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 추가해서 사용할 것