?
Solved

Clickable image map

Posted on 2013-11-17
10
Medium Priority
?
657 Views
Last Modified: 2013-11-22
I'm looking to make a rather large image map that responds in a similar manner to the Google Maps interface.  The source image(s) need to have user-defined link areas which lead to other sections of the image.  For example, it starts at point A, with displayed text.  Points B and C are "Yes" and "No" boxes.  Clicking on point B pans the image over to point D; point C leads to point E.  The text and flowcharting must be definable.  Bonus if this can easily hook into the Joomla framework.
0
Comment
Question by:Steve Bink
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +2
10 Comments
 
LVL 26

Expert Comment

by:David Brugge
ID: 39658528
I'm having difficulty seeing the question here. Can you narrow down the focus a bit for us?
0
 
LVL 38

Expert Comment

by:BillDL
ID: 39658728
I looked at the question yesterday, and my understanding is that routinet would like to create an interactive clickable flowchart.  HTML using the <map> tag, pure CSS like this tutorial, or Flash programming.
0
 
LVL 51

Author Comment

by:Steve Bink
ID: 39659868
BillDL has the right of it with his second link, but instead of a text caption, I'd like the flowchart to smoothly transition from one point to the next through panning once a hot spot is clicked.

Think of the Google Maps interface.  You start out centered on a map point.  If you click on another map point, the image re-centers to that point.  In my flowchart, the points are answers to questions we pose to the user.  The questions are in the image, as well.  As a user selects an answer, the image pans over to the next relevant question.  Basically, I'd like to recreate something like Prezi, but with a user-defined hierarchy of hot points, and inside a web page.

My one restriction in implementation is that it cannot be Flash.  That said, I'm not looking to reinvent the wheel.  I'm willing to explore any packages or APIs that can help to reproduce this.
0
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 
LVL 84

Expert Comment

by:Dave Baldwin
ID: 39660136
Google maps uses a lot of javascript on the client combined with calls to the server for things like new map image pieces.  Their map images don't carry any information as such.  Scaling from the server and the javascript is used to determine where to place items in the overlay.
0
 
LVL 26

Expert Comment

by:David Brugge
ID: 39660375
We had the guy over in Sweden that developed the application for Google contributing as and Expert for a while, but that was ages ago. I've tried to find him to give him a poke, but so far no luck.
0
 
LVL 26

Expert Comment

by:lenamtl
ID: 39665871
You can check in Joomla repository in Map section
http://extensions.joomla.org/extensions/maps-a-weather/maps-a-locations/maps

This one seems very popular
http://map.joocode.com/
0
 
LVL 51

Author Comment

by:Steve Bink
ID: 39666116
@lenamtl: Yes, something like that, but with an arbitrary image as the source data, and the ability to have user-defined hot points.  

Does anyone know how to leverage that interface?  Or perhaps something like a custom Prezi presentation?
0
 
LVL 26

Accepted Solution

by:
lenamtl earned 2000 total points
ID: 39666241
0
 
LVL 51

Author Comment

by:Steve Bink
ID: 39667428
@lenamtl: You are so full of win.  jmpress.js looks to be exactly what I want.  Any noob-friendly pointers on how it was improved from impress.js?
0
 
LVL 26

Expert Comment

by:lenamtl
ID: 39668799
Jmpress.js is a jQuery plugin so if you are familiar with jQuery you should use this version.

Jmpress.js includes all of the impress.js features and a lot more.
It has a better system for modules in the presentation.
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Recently, an awarded photographer, Selina De Maeyer (http://www.selinademaeyer.com/), completed a photo shoot of a beautiful event (http://www.sintjacobantwerpen.be/verslag-en-fotoreportage-van-de-sacramentsprocessie-door-antwerpen#thumbnails) in An…
In this article, we will look at our content management system as a whole, to get an idea of how we will start to manage these content items.
The goal of the tutorial is to teach the user how to add a water mark to there photo. Once you have a photo you like you have to go into the water mark setting and add a water mark to the image. You can either choose a text watermark or an image…
The goal of the tutorial is to teach the user what exposure is and how to use the exposure slider. Analyze the photo that you want to edit, then adjust the exposure slider to your liking.
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question