Dynamic imagemap with javascript/jquery

24.11.10
I had some difficulty in finding a cross browser method for creating image map dynamically, somehow managed to do with following code, I am not sure if a better cross-browser solution exists.

if ($.browser.msie){
map=$('<map name="somename_map"></map>');}
else{
map=document.createElement('map');
$(map).attr({'name':'somename_map'});
}

Later we can catch this element using following code.




map=$('map[name="somaname_map"]');


You can add map areas dynamically in following way.

var area=document.createElement('area');
$(area).attr({
'shape':'poly',//or shape you like
'coords':'10,20,30,23,22,78....etc',
'href':'#',
'title':'something'
}).click(function(){
//do something on maparea click or set href above,as you wish
return false;
});


And then just append it to map

$(map).append(area);


If you want many areas to be added, yu can do it with a loop or so as per your requirement.

Related Posts by Categories



Widget by Hoctro | Jack Book

0 Responses: