• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 719
  • Last Modified:

Clickable Image Map w/ Zoom

Here's what I want to do...

I have an exploded view of a transmission, and I want to use this as the base for an image map.  The problem is that the parts are so small at 800x600 that it's almost impossible to pick out the part you want.  I want to divide the image into 8 areas and make area zoomable.  Also I need to have the map coordinates remain clickable wether a specific area is zoom'd or wether the whole image is visable.

Any ideas?

Thanks :)
0
mikemaner
Asked:
mikemaner
  • 5
  • 4
  • 2
1 Solution
 
humeniukCommented:
There are a number of ways to accomplish this with Javascript, however you would have to break up the main image into smaller images rather than use an image map.

Examples:
www.codelifter.com/main/javascript/zoomimage.shtml
www.qiksearch.com/javascripts/zooom10.htm
www.javascriptkit.com/script/script2/imagezoom.shtml

A more impressive zooming script (but expensive):
www.artistscope.com/zoom/
0
 
mikemanerAuthor Commented:
While the zoom function is awesome on all of those (especially iZoom :) they don't offer the ability to make a hotspon on an image clickable, as in taking you to another page after the click.

Sorry if I wasn't clear.
0
 
humeniukCommented:
"Sorry if I wasn't clear." - my mistake, not yours.

To clarify, you want to be able to click an image hotspot in order to link to a new page with a larger sized detail image, yes?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
mikemanerAuthor Commented:
kinda...  What I want to do is show an image of aprox 800x600px that shows a series of parts used in a transmission.  Each part is labeled with a part number.  On the image map side I want to be able to click the part number or the part and have a hyperlink assigned to it.  That is fairly simple to do in Fireworks, I have some setup now at www.wittrans.net/shop/trans/gm/700r4.html - this is one to give you an idea.  

In addition to this I would like the image to be zoomable while maintaining the Hot Spot values.  Meaning that if the image is zoomed I still want it clickable so that the user can follow the hyperlink to actually purchase the part.  

I have looked all over and have not found anything that does both.  It may be that it doesn't exist, but here's hoping :)
0
 
joegassCommented:
Have you considered using Flash, you could place invisible buttons over the relevant areas?
You can zoom in and out of the movie using javascript http://www.moock.org/webdesign/flash/fscommand/
0
 
mikemanerAuthor Commented:
actually I have considered using flash, the only problem there is that; as far as I know; there's no way to mass produce the flash app.  I have almost 100 of the exploded views to work with.  Also I am not sure how you would use JS to zoom the movie.  I looked at the link, didn't find any examples.
0
 
joegassCommented:
You can dynamically load in jpgs into flash, but getting the invisible buttons in the right locations wouldn't be a walk in the park - tho' this could be done with duplicateMovieClip.

From that link
# SetZoomRect (x1,y1,x2,y2): Zoom on rectangle with the coordinates (top left: x1,y1) (bottom right: x2,y2). Units are TWIPS. There are 1440 TWIPS in an inch, and 20 TWIPS in a single point.
# Zoom(percent):Zoom in. Opposite of what you'd expect:
Zoom(50) = 2 times movie size
Zoom(200) = 1/2 movie size
Zoom(0) = back to original size

So you could get the x,y from where the user clicks and zoom to an area a certain number of pixels around that point with SetZoomRect

0
 
mikemanerAuthor Commented:
that sounds very promising, do you happen to know of examples I could I look at?
0
 
joegassCommented:
Sorry I haven't built anything like this myself, I've seen the auto generation of "hotspots" in a flash movie based on an xml file
The xml file was created by an admin area that recorded where the admin clicked on a dynamically loaded image and saved out the coordinates and their corresponding target urls.

It was for a map with placenames, but the principle is the same

Here's an example of duplicating a movie clip (for your hotspots) http://www.actionscripts.org/tutorials/beginner/DuplicateMovieClip/index.shtml

Good luck
0
 
mikemanerAuthor Commented:
This definately give me somewhere to start, thanks m8 :)
0
 
joegassCommented:
No problem glad I could help
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 5
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now