3 Replies Latest reply on Mar 8, 2013 7:34 AM by AmintaAdobe

    Non-rectangle hit/hover states?

    mark@liquid.com.au

      Hey guys,

       

      I'm creating an interactive map, similar to the Mobile Marketplace example: http://html.adobe.com/edge/animate/showcase/mobilebrowser/mobile_marketshare.html

      In that example, they've just used (skewed) divs as the "buttons" for the continents.

       

      My map will have a lot more detail and I'll need "buttons" that have more than 4 points. Is there any way to do this in Edge?

      Only alternative I can think of is using Image Map polygons but I don't think this is supported in Edge.

       

      Thanks in advance, Mark.

        • 1. Re: Non-rectangle hit/hover states?
          elainecc Adobe Employee

          Hi, Mark-

           

          Not at the moment, sorry!  We're currently not using canvas on the back end due to inconsistent browser support, so you won't be able to use the draw function to create a polygon.  Your best bet is to use a combination of square and round transparent divs to cover your shapes.

           

          Cheers,

           

          -Elaine

          • 2. Re: Non-rectangle hit/hover states?
            Phildsb Level 1

            I had a similar sort of problem and opted to create the map using raphael.js (http://raphaeljs.com). First I drew the map in Illustrator, then saved as svg (make sure you name each of the layers in your map that you want to use as buttons becuase it will be difficult to identify them once they're converted to svg). You then need to convert the svg to javascript objects and depending on the complexity you may either want to do this manually or using an svg to raphael converter - there is a good one at at http://www.readysetraphael.com. Once you have the javascript objects you can draw these into the DOM using raphael.js, apply mouseover/click events to individual elements, etc. Have a look at the following jsfiddle for an example: http://jsfiddle.net/allankiezel/FJrNN/

             

            You can open the html page that contains this in Edge, and manipulate the div that contains your svg, but unfortunately Edge itself isn't able to select the DOM elements within it. I'd love it if this was to be implemented at some point. Any chance of seeing this in the future?

            • 3. Re: Non-rectangle hit/hover states?
              AmintaAdobe

              Hi Phildsb, I would thank you to made me discover this beautiful plugin!!! It renders perfectly on mobile and on old browsers also and the converter is simply fantastic I've just donated 10 $ to the creators!

               

              About Edge implementation, you can create in Edge a rectangle-Div called "Rsr" so you can to select it but no luck to manage directly in Edge the Svg drawed into the Div....

               

               

              Still thanks!

               

              Davide