Solved

Clickable image map

Posted on 2013-11-17
10
630 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 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

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

Suggested Solutions

This article was inspired by a question here at Experts Exchange (http://www.experts-exchange.com/Software/Photos_Graphics/Images_and_Photos/Q_28629170.html). The requirements stated in that question are (1) reduce the file size of a large number of…
This article provides the solution to a question (http://www.experts-exchange.com/Software/Photos_Graphics/Images_and_Photos/Q_28674207.html) posed here at Experts Exchange. The asker of the question has many JPG images in many folders, and all of t…
The goal of the tutorial is to teach the user how to edit a basic portrait of someone. This tutorial shows how to edit two basic photographs, one of a car and one of a person.
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.

803 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