Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    May 2011
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Interactive Image Map

    I'm not sure if I am in the right forum, but I am looking to create something similar to this image:http://www.ohl.com/interactive-supply-chain-overview It was done in Flash, which I don't want to use because I want it to work on iOS devices.

    Does anyone know if there is a tutorial or framework on this anywhere? Another forum?

    Thanks for your help.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,084
    Thanks
    23
    Thanked 593 Times in 592 Posts
    This was done back in the day with HTML and still can be. It's an image with hot spots(areas that are clickable)
    I didn't spend much time here, but it does look like the proper way to do it. Called interactive maps BTW.

    http://coursesweb.net/html/image-map
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    349
    Thanks
    9
    Thanked 51 Times in 50 Posts
    A HTML-image-map might be required, if you want some areas in the big image to react on an event. It's commonly used when these areas are complex in shape, i.e. not regular rectangles.

    So for that flash you posted, HTML-image-map technique might not be required since all the click-and-select menus are in rectangles.

    I can't figure out though how to replicate that blinking-shadow of a certain area/ spot (when a menu is selected)... layers of stacked image, perhaps?

    Hint: if you need to code this yourself, then jQuery might ease your way


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •