How to zoom image on mouseover at some XY coordinate?

Question

I display set of images(small). I need to show the larger image(300*300) at some XY co-ordinate when mouseover event occurs on an image while mousout larger image has to disappear . Please give some solution.

Answer 1

You thus actually want an image map . Since I've never used this I can't tell the details from top of head, but the link should help you further. You can for example make use of HTML <map> and <area> elements , or go ahead with a pure CSS approach.

There is no standard JSF component which can represent the <map> and <area> elements. The Sun JSF tutorial however (by coincidence) covers a custom component example with which you can represent them using pure JSF.