6 Replies Latest reply on Jan 8, 2014 10:52 AM by scottyh

    Imagemap / Polygon hotspot

    richtelford

      For a project. I need to be able to have a map of the UK which is split regionally e.g. northeast, northwest, southeast, southwest, London, etc. The user needs to be able to hover over each region and on doing so a popup is shown with data relevant to that region. You can see what I mean here: http://matchtech.kinodev.co.uk/confidence-index/question-1/ (submit the form with a yes/no answer to see the map).

       

      I can do this easily with an imagemap (area, map) but I'd love to be able to achieve the same within Adobe Edge. It would require polygon hotspots I would imagine but I have no idea how to achieve this with Edge. Can anyone think of a way to achieve this?

       

      Many thanks,

       

      Richard

        • 1. Re: Imagemap / Polygon hotspot
          joel_pau Level 5

          Hello,

           

          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';

          myPolygon.beginPath();

          myPolygon.moveTo(0, 0);

          myPolygon.lineTo(100, 50);

          myPolygon.lineTo(50, 100);

          myPolygon.lineTo(0, 90);

          myPolygon.closePath();

          myPolygon.fill();

           

          3) File attached.

           

          Canvas I

           

          Canvas II

          • 2. Re: Imagemap / Polygon hotspot
            roti62 Level 1

            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>");

             

            sym.$("your_iframe_container_object").append(my_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.

            • 3. Re: Imagemap / Polygon hotspot
              stijill2 Level 1

              Where do I insert this code?

              • 4. Re: Imagemap / Polygon hotspot
                stijill2 Level 1

                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..."

                • 5. Re: Imagemap / Polygon hotspot
                  elainecc Adobe Employee

                  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.

                   

                  changeelement.png

                   

                  Thanks,

                   

                  -Elaine

                  1 person found this helpful
                  • 6. Re: Imagemap / Polygon hotspot
                    scottyh

                    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';

                    myline.beginPath();

                    myline.moveTo(0,0);

                    myline.lineTo(550,400);

                    myline.stroke();

                     

                    Screen Shot 2014-01-08 at 11.50.15 AM.png