You can draw a polygon using canvas tag. Canvas is cross-browser.
1) A polygon tuto.
2) Edge code (compositionReady).
$('<canvas id="myPolygon" />').appendTo(sym.$("Rectangle"));
var myPolygon = document.getElementById('myPolygon').getContext('2d');
myPolygon.fillStyle = '#f00';
3) File attached.
joel_pau's reply is a good idea.
If you had an external html file with an imagemap, you could create an iframe programmtically and load your html into this iframe.
var my_iframe = $("<iframe src='http://your_imagemap_file.html' width='400' height='400'></iframe>");
But note, that - unfortunately - interactions with the imagemap only work in Chrome, Safari, and Boat (Win, Android, iOS) At least, these are my experiences.
Where do I insert this code?
Lets say I have a simple rectangular shape with a mouseover "get symbols..." And it's doing what I want it to do.
How can I swap out my "rectangular poly" with the externally created image map with out touching my "triggers mouseovers etc..."
1 person found this helpful
You can stick your code in any event, but you'd probably want to stick it into compositionReady, which will fire when your composition has completed loading.
Regarding your second question, you can massage your actions file to use the new element name. In the code panel, you can edit the Stage and change the name of the element from your rectangle to your new image.
Finally, I've found a way to get html5 canvas to work in Edge Animate. I'm trying to create a line graph but when it seems to be cropping my line to a specific 300px x 150px box and I can't see any of the line outside of that box. Any ideas as to why it would be doing this. I've tried everything! Here's my code and the result (the red grid lines is just a visual reference for pixels...
$('<canvas id="myPolygon" />').appendTo(sym.$("Stage"));
var myline = document.getElementById('myPolygon').getContext('2d');
myline.lineWidth = 2;
myline.strokeStyle = '#333';