1 Reply Latest reply on Jun 12, 2014 8:08 AM by jgunderson

    Image Maps with rollovers

    jgunderson

      I am trying to create some interactive image maps and I'm new to Edge Animate. I've used the code supplied in another thread (https://forums.adobe.com/message/4803761) but I don't understand how to attach this to a mouseover event.

       

      $('<img width="524" height="647" src="africa-assets/Africa.png" usemap="#Map" style="opacity: 0.0;">'+

        '<map name="Map">'+

               '<area shape="poly" title="s-africa-map" coords="440,430,446,467,442,477,402,513,405,549,387,566,381,592,353,627,328,639,274,647,2 66,623,254,597,240,553,234,533,222,499,219,466,233,441,233,426,231,409,226,392,237,386,259 ,387,264,409,279,406,285,398,297,402,302,435,333,442,354,453,358,443,348,432,348,414,359,4 08,387,422,392,438,412,439,438,429" href="#southern-africa" target="_top" alt="Southern Africa">'+

               '<area shape="poly" title="e_africa_map" coords="437,427,424,382,438,361,476,320,497,297,513,261,520,245,519,227,468,239,432,192,4 18,155,412,133,405,126,391,142,323,138,322,155,318,160,254,125,248,130,253,154,253,180,238 ,209,245,230,248,250,248,269,260,290,256,307,268,341,256,367,244,375,231,380,265,387,269,4 00,287,391,303,395,308,428,324,435,342,440,342,423,342,410,357,400,393,416,396,431,413,433 " href="#" alt="Eastern Africa"><area shape="poly" coords="261,383" href="#">'+

      // and so on...

               '</map>').appendTo("#Stage");

       

      Do I need to define the image maps as symbols? I'm certainly a rookie when it comes to JavaScript so any help is greatly appreciated.

       

      Thanks!