Solved

Clickable image map

Posted on 2013-11-17
10
622 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
 
LVL 82

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
Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

 
LVL 24

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 24

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 24

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

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…
It’s a strangely common occurrence that when you send someone their login details for a system, they can’t get in. This article will help you understand why it happens, and what you can do about it.
It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.
In this sixth video of the Xpdf series, we discuss and demonstrate the PDFtoPNG utility, which converts a multi-page PDF file to separate color, grayscale, or monochrome PNG files, creating one PNG file for each page in the PDF. It does this via a c…

707 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now