I love jQuery and the way it makes developer's life easier. Although it took me a while to accept it and I still prefer to write my own stuff, I can't deny its advantages. Recently I had a project that demanded a rollover image preview. You know, one of those tooltip-like bubble popups that appears when you roll over link or a thumbnail. Since we were already using jQuery on that project I decided to take it easy and investigate what can be done with that extraordinary library. So I came up with a script so simple it hurts! The best thing yet is that it can be applied for a variety of purposes. Today I will show you 3 examples of using the same very, very simple script.
Download all 3 tricks in a bundle
Features and Principle
What this script does is adds an element to the body when you roll over a certain object. That element's appearance is predefined with css (positioned absolute and styled) so all we need to do is fill the element with content, calculate mouse position and make it move accordingly. When cursor is moved over he object, element moves with it and when cursor roll out, the element is deleted.
Here are couple of examples where you can see this script in action.
Example 1: The Simplest jQuery Tooltip Ever
The script takes a title attribute of an A tag and place it inside the popup element.
Html looks like this:
Roll over for tooltip
Example 2: Image Preview Gallery
Here we have a bunch of thumbnails. When each thumbnail is rolled over, script will load an image that we have linked in HREF attribute of an A tag. That makes this method accessible as well, because user can still access the target image even with disabled JavaScript.
Html:
or if you want to use caption add a title attribute:
Roll over to preview
Example 3: Links With URL Preview
This demands a bit more effort but it might be worth it as an extra feature to add to your sites. What you'll need here is a small size screenshot of the target url. You'll put screenshot image location in in REL attribute of the A tag and script will do the rest.
Like so:
Css Globe
again, if you wish to use caption add a title attribute:
Css Globe
No comments:
Post a Comment