Image map with zoom

User 2781295 Photo


Registered User
6 posts

Hello,

I'm wishing to create an image map with very large and very small areas. Is there a way to zoom in and out, while preserving the image map hot spot areas?

Ideally, the image will be served on a webpage with 80% zoom. The user can then choose to zoom in (either by pinching the screen or perhaps with a button). Upon zooming the map hotspots would adjust accordingly.

I'm not a fan of making the map responsive as the small areas of the image map will be difficult to interact with.

What do you think my best approach would be?

Cheers,
David
User 187934 Photo


Senior Advisor
18,123 posts
Online Now

It all depends on how you want your zoom to work. I used Colorbox on one page. Take a look at this thread.
http://www.coffeecup.com/forums/image-m … te-option/

You can also take a look athis thread where I used JQuery tooltip.
http://www.coffeecup.com/forums/image-m … post238039
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2781295 Photo


Registered User
6 posts

Hi Eric,

I'll explain a bit better what I'm after.

The image map is a map of Africa. Some countries are large - some are small. If I show the imagemap as responsive the user won't be able to click on the small countries (like Rwanda). Because that segment will be too small to touch.

But if I show the map as unresponsive (i.e @100%) it's not a great user experience because the user can't view the whole African continent on screen at the same time.

That's why I'm wondering if it's possible to let the user zoom and and out.

The user will also be viewing the image map on a mobile device, so they won't have a mouse.
User 187934 Photo


Senior Advisor
18,123 posts
Online Now

Mobile users can pinch and scroll to zoom in and navigate the image map.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2781295 Photo


Registered User
6 posts

OK. So does that mean I can create large image map - and serve the map in a browser window set to 75% zoom

... and the image map regions will align correctly as the user zooms in and out? Perhaps something like this:
http://www.doogal.co.uk/zoomable.php

(but allowing the user to scroll left and right)

Otherwise I'll have to create the map at a reduced size and the user will zoom in to a pixelated image.
User 187934 Photo


Senior Advisor
18,123 posts
Online Now

Can w see your image? It may help figure out what would be the best route to take.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2781295 Photo


Registered User
6 posts

Hi Eric,

Here's the base image. No image map yet, as I'm trying to get the macro factors right first.

http://i.imgur.com/rMq0ILG.jpg
User 187934 Photo


Senior Advisor
18,123 posts
Online Now

I don't see a problem with just using it as is first, the make adjustments if necessary.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
http://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
http://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personnel site used for testing and as an easy way to share photos.(RLM imported to RSD)
http://ericrohloff.com
http://ericrohloff.com/property/
User 2781295 Photo


Registered User
6 posts

Great. Thanks Eric. All good.

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.