Jump to content

 
Photo

Easy creation of complex image maps?

- - - - -

  • Please log in to reply
4 replies to this topic

#1
David Medeiros

David Medeiros

    Hall of Fame

  • Validated Member
  • PipPipPipPipPipPipPip
  • 1,063 posts
  • Gender:Male
  • Location:Redwood City CA
  • Interests:Cartography, wood working, wooden boats, fishing, camping, overland travel, exploring.
  • United States

Hi all,

 

I'm looking for some recommendations on software or tutorials for creating image maps for webpages.

 

I want to create something simialr in function to the map linked below, where a mouse roll over loads a new image. But... rather than a single image  map, I want one for each state on a map of the US and each roll over would load a new version of the map.

 

http://www.radicalca...x.html?nycenter

 

I know this should be relatively easy to do in flash or HTML or something else. I've done a little bit of it in class lab.

 

What I'm looking for is a program that might make this more WYSIWYG or has very simple, well described instructions for the programmatically challenged  (me).

 

Also looking for good examples of the kind of multi image map I'm describing, using several image map spots on the image, with complex shapes, not just rectangles.

 

Thanks,

David


GIS Reference and Instruction Specialist, Stanford Geospatial Center.

 

www.mapbliss.com

 


#2
l.jegou

l.jegou

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 112 posts
  • Gender:Male
  • Location:Toulouse
  • Interests:Webmapping, thematical mapping.
  • France

The description of the requirements made me think about Adobe Fireworks, there is an example on their help pages :

 

http://help.adobe.co...0d35d-7fe6.html



#3
Matthew Hampton

Matthew Hampton

    Hall of Fame

  • Moderator
  • PipPipPipPipPipPipPip
  • 1,290 posts
  • Gender:Male
  • Location:Portland, Oregon
  • Interests:Playing in the mountains and rivers.
  • United States

I'm thinking this can be done rather efficiently in Illustrator using SVG  and different hover and click states.


Oregon Metro - Portland, OR
www.oregonmetro.gov


#4
Michael Schmeling

Michael Schmeling

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 204 posts
  • Gender:Male
  • Location:Kassel, Germany
  • Germany

If you want to do it with Javascript and HTML there is a number of good Javascript graphics libraries.

 

Here is an overwiew:

http://en.wikipedia....raphics_library

 

I think fabric.js would be a good choice.

But of course you need programming skills for all those libraries.


Michael Schmeling
Kassel, Germany
Arid Ocean Map Illustrations
http://maps.aridocean.com
Indie Cartographer
http://www.indiecartographer.com

#5
David Medeiros

David Medeiros

    Hall of Fame

  • Validated Member
  • PipPipPipPipPipPipPip
  • 1,063 posts
  • Gender:Male
  • Location:Redwood City CA
  • Interests:Cartography, wood working, wooden boats, fishing, camping, overland travel, exploring.
  • United States

I'm thinking this can be done rather efficiently in Illustrator using SVG  and different hover and click states.

 

Hi Matthew,

 

Are you are talking about the SVG Interactivity tools in AI? I've never looked at that tool set before. Trying to find some tutorial info online. Nothing great so far so let me know if you have any links that demonstrate how to use this to create image maps etc. I'll post back anything useful I can find.

 

Thanks.

 

Update: Turns out I have DreamWeaver on my machine and can do this pretty easily with the hotspot and behavior tools. this requires drawing each polygon hotspot manually though, so now I'm trying to figure out how to use an SVG file out of AI as the input for the hotspots.

 

I may go back and try the SVG interactivity tools in AI as well.

 

Thanks all.


GIS Reference and Instruction Specialist, Stanford Geospatial Center.

 

www.mapbliss.com

 





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

-->