We help IT Professionals succeed at work.

How do I enlarge a specific area of an image?

vravi22 used Ask the Experts™
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
Watch Question

Do more with

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

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.
Top Expert 2014



@leakim971: Thanks a lot for the links. I appreciate it.
ok, so this is the idea behind what i want:
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
Top Expert 2014
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


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.


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