How to create a round magnifying glass & additional infos for mouse over picture?
Hi Experts,
I'm trying to offer the user the following:
1. Site displays a minimized version of a class photograph
2. User moves the mouse over the picture
3. The picture is magnified in a circular area around the mouse
4. If the mouse is over a face of a classmate, some details (additional <div> e.g. First name, a newer picture, etc) are shown at another position of the screen
So far, I tried several jQuery plugins (magnifier, jZoom, ...) and plain javascripts, but:
a) the plugins used interfere (i.e. when loading jQuery BeautyTips, magnifier refuses to work).
b) I did not find anything to display a !circular! magnifying area
c) I'm stuck with the tricky details (i.e. still learning:-)
I'm hoping you could help me identifying alternatives to achieve the above use case (not to solve my current technical probs - that's filed as learning:-), either by other jQuery Plugins, plain javascripts or any other technology that is available under MIT/GNU licenses and supports clean CSS/HTML (i.e. I don't want to edit/create flash).
Many thanx in advance!
Volker
I'm trying to offer the user the following:
1. Site displays a minimized version of a class photograph
2. User moves the mouse over the picture
3. The picture is magnified in a circular area around the mouse
4. If the mouse is over a face of a classmate, some details (additional <div> e.g. First name, a newer picture, etc) are shown at another position of the screen
So far, I tried several jQuery plugins (magnifier, jZoom, ...) and plain javascripts, but:
a) the plugins used interfere (i.e. when loading jQuery BeautyTips, magnifier refuses to work).
b) I did not find anything to display a !circular! magnifying area
c) I'm stuck with the tricky details (i.e. still learning:-)
I'm hoping you could help me identifying alternatives to achieve the above use case (not to solve my current technical probs - that's filed as learning:-), either by other jQuery Plugins, plain javascripts or any other technology that is available under MIT/GNU licenses and supports clean CSS/HTML (i.e. I don't want to edit/create flash).
Many thanx in advance!
Volker
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
very cute.
Now tell us their names when clicking :)
Now tell us their names when clicking :)
Then you would have to compute the location of the two <divs> relative to the images, and display the magnified section in the "window" (no small feat, to be sure).