A Map of States: Creating a Complex Set of Buttons
i creating map of wherein each state ideally own button. trigger event makes state bigger. how can set up? have map laid out in illustrator states on individual paths.
the problem maps each state image has square or rectangle boundary if there transparency in png files. therefore overlap each others.
i solved problem using html map tag.
if that, pain because have find each x , y axis when lines change direction. when have done can set click event , load symbols of states whichever easing or animation want to.
here code explanation:
// find coordinates of each shape placing temporary rectangle on map , move around shape - take x , y axis every time
// , separate commas.
$('<img id="usmap" width="551" height="379" src="images/states_imgmap.png" usemap="#usmap">'+
'<map name="usmap">'+
// polygone use shape="poly"
'<area id="california" shape="poly" title="california region:west" coords="13,83,48,94,41,129,79,190,72,219,15,159,9,107"/>'+
// rectangle shape use shape="rect"
'<area id="colorado" shape="rect" title="colorado region: mountain" coords="143,128,202,184"/>'+
'</map>').appendto("#stage");
// here box use click event whatever want do.
// have symbols animation each state deleted click event example.
$('#usmap').css("cursor", "help");
sample: colorado, california
https://www.box.com/s/yahlzbzzkz85i9f360ax
also joel had given me example using same system:
More discussions in Edge Animate CC
adobe
Comments
Post a Comment