?
Solved

Clickable image map

Posted on 2013-11-17
10
Medium Priority
?
667 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
  • 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 39

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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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 27

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 27

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 27

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
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…
The goal of the tutorial is to teach the user how to use import presets downloaded from the internet into Adobe Lightroom. Once you downloaded the presets go into the preset folder and press import then import your preset and your set it to go.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…
Suggested Courses

850 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