Hello all.
I'm using the ImageMap control that displays a .jpg and places a
number of RectangleHotSpots around it. Some of the images I'm using
are quite large/small so ideally I'd like to Zoom, Zoom Out and Pan. I
can do this via JavaScript but obviously the HotSpots are then not at
the correct position.
Does any know of a way / have done something similar? I don't mind
what the solution is, Server-side or Client-side, it all helps!
javaScript is certainly an option, especially if you want this to be
seemless for users. But, it will potentially have some artifacts.
Without knowing your exact specs, I cannot suggest a "better" way than
JavaScript or using some plug-in (Flash, Zilverlight, etc.)
One clever potential way of doing this is DeepZoom, which allows you to
create different resolution pictures (a low res one for the non-zoomed
view that takes little time to download, for example). It will then
handle all of the zoom, pan, etc. for you.
The con here (versus pro, not as in convict) is you end up biting off
some Silverlight, which you may not want (Flash is another option).
If you go this route, the DeepZoom Composer (which preps the image(s))
is free:
http://bit.ly/15dqzu
The second part is setting up the Silverlight bit for the image. This is
a bit more difficult, if you do it by hand. My suggestion is to download
the Expression Web 3 trial and use the bits to embed DeepZoom (found
under media in the toolbox).
The trial is good for 60 days, so you don't have to commit now. As
almost anything is eligible for the upgrade pricing of $79 (including
any full office product - many new computers ship with Works plus Word
(which is eligible)) so it is likely you will not have to pay full
retail for Expression Web 3 if you decide this route works for you.
There are a couple of ways to do this, if it is a gallery.
Easy
Put all of the images in a single collage and allow the user to zoom in
on the one's he wants. The CMT Music Fest site has a good example of
deep zoom used in this manner, as does the hard rock cafe site.
More complex
Set up the Deep Zoom viewer and use the thumbnails to "send" the image
to the "viewer" so the user can zoom.
