基于jquery自定义图片热区效果

2020-05-22 16:05:15易采站长站整理

border:’1px solid transparent’
});
var map_name = $(this).attr(‘usemap’).replace(‘#’,”);
if(map_name !=”){
var index = 1;
var _link_conrainer = _img_conrainer.find(‘.link-conrainer ul’);
var _position_conrainer = _img_conrainer.find(‘.position-conrainer’);
var image_param = $(this).attr(‘name’) == ” ? ” : ‘[‘+ $(this).attr(‘name’) + ‘]’;
container.find(‘map[name=’+map_name+’]’).find(‘area[shape=rect]’).each(function(){
var coords = $(this).attr(‘coords’);
$(this).attr(‘ref’,”1″);
_link_conrainer.append(‘<li ref=”‘+index+'” class=”map-link”><span class=”link-number-text”>热点’+index+'</span>: <input type=”text” size=”60″ name=”link’+index+'” class=”linkHref” value=”‘+$(this).attr(‘href’)+'” /><input type=”hidden” class=”rect-value” name=”rect’+index+'” value=”‘+coords+'” /></li>’);
coords = coords.split(‘,’);
_position_conrainer.append(‘<div ref=”‘+index+'” class=”map-position” style=”left:’+coords[0]+’px;top:’+coords[1]+’px;width:’+(coords[2]-coords[0])+’px;height:’+(coords[3]-coords[1])+’px;”><div class=”map-position-bg”></div><span class=”link-number-text”>热点’+index+'</span><span class=”delete”>X</span><span class=”resize”></span></div>’);
index++;
});
}
});
});
$container.find(‘.button-conrainer .addHot’).live(“click”,function(){
var _link_conrainer = $(this).parent().parent().find(‘.link-conrainer ul’);
var _position_conrainer = $(this).parent().parent().find(‘.position-conrainer’);
var index = _link_conrainer.find(‘.map-link’).length +1;
var _coordsMap = $(this).parent().parent().next(‘map’);
var image = $(this).parent().parent().find(‘img[ref=imageMaps]’).attr(‘name’);
image = (image == ” ? ” : ‘[‘+ image + ‘]’);
_link_conrainer.append(‘<li ref=”‘+index+'” class=”map-link”><span class=”link-number-text”>热点’+index+'</span>: <input type=”text” size=”60″ name=”link’+index+'” class=”linkHref” value=”” /><input type=”hidden” class=”rect-value” name=”rect’+index+'” value=”300,80,500,150″ /></li>’);
_position_conrainer.append(‘<div ref=”‘+index+'” class=”map-position” style=”left:300px;top:80px;width:200px;height:70px;”><div class=”map-position-bg”></div><span class=”link-number-text”>热点’+index+'</span><span class=”delete”>X</span><span class=”resize”></span></div>’);