How do I enlarge a specific area of an image?
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
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
Tom Beck
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.
Check this plugin : http://www.mind-projects.it/projects/jqzoom/
another one : http://jdbartlett.github.com/loupe/ or http://www.mikekeran.com/webdev/the-jquery-magnifier
another one : http://jdbartlett.github.com/loupe/ or http://www.mikekeran.com/webdev/the-jquery-magnifier
ASKER
@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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
ASKER
Even though it wasn't what i wanted, it was a good solution. So I just changed my logic instead