Solved

Clickable image map

Posted on 2013-11-17
10
638 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 50

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
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 
LVL 83

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 25

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 50

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 25

Accepted Solution

by:
lenamtl earned 500 total points
ID: 39666241
0
 
LVL 50

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 25

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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

Suggested Solutions

A publishing tool, a Version Control System, or a Collaboration Platform! These can be some of the defining words for the two very famous web-hosting Git repositories: Bitbucket and Github. Git is widely used amongst the programmers and developers f…
Knowledge base software has turned out to be a quite reliable method for storing information, promoting collaborative work and for sharing valuable input and solutions.However, some organizations are trying to develop a knowledge base that works wit…
This video teaches users how to migrate an existing Wordpress website to a new domain.
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…

734 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