We help IT Professionals succeed at work.

How do I enlarge a specific area of an image?

vravi22
vravi22 used Ask the Experts™
on
Hello,
I've an image with 9 areas in it. I've marked the co-ordinates with the html area tag giving me 9 image maps. On clicking one of these image maps, I should be able to enlarge only the specific portion of the image and that part should be displayed in a popup.  Is it possible? Thanks in advamce
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2015

Commented:
This would be no different than clicking on a thumbnail to bring up an enlargement. A larger version of each section of the image map would be saved as a separate image file on the server and called up and opened in a popup when the user clicked on an area on the map.
leakim971Multitechnician
Top Expert 2014

Commented:

Author

Commented:
@leakim971: Thanks a lot for the links. I appreciate it.
ok, so this is the idea behind what i want:
http://www.mind-projects.it/projects/jqzoom/demos.php#demo1
BUT, instead of mouse over, it should be a click event. Note that the co-ordinates are already specified in the area tag. I should just zoom into those co-ordinates.  Hope I'm clear though
 
Multitechnician
Top Expert 2014
Commented:
download the plugin. edit the file jqzoom.pack.1.0.1.js (js folder)

replace : hover by click
replace : mousemove by click

now do a test with the demo

Author

Commented:
I would still have to have two different sized images for the zoom effect to work. I could just link the area to the bigger image. I was just wondering if I could avoid using two images.  I would have to think of an alternate approach.
use CSS to make the smaller image use the bigger image as source, just force the dimensions - only one image then but a bit inefficient with respect to load time.

Author

Commented:
Even though it wasn't what i wanted, it was a good solution. So I just changed my logic instead