Css Globe

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

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:

<a href="http://cssglobe.com" class="tooltip" title="Web Standards Magazine">Roll over for tooltip</a>

View this script in action

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:

<a href="1.jpg" class="preview"><img src="1s.jpg" alt="gallery thumbnail" /></a>

or if you want to use caption add a title attribute:

<a href="image.jpg" class="preview" title="Great looking landscape">Roll over to preview</a>

View this script in action

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:

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg">Css Globe</a>

again, if you wish to use caption add a title attribute:

<a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">
Css Globe</a>

View this script in action

Download all 3 tricks in a bundle

Enjoyed the article?

Subscribe to our RSS feed or share it with your friends.

Delicious | Digg | Stumble | Reddit | Float | Subscribe to RSS Feed

Comments

• David Appleyard on 8 May, 2008 wrote:

  Great article - that's an incredibly easy way of achieving effects which would seem complicated at first glance.

• Steph on 8 May, 2008 wrote:

  Neat! I really like example #3!

• Boris on 8 May, 2008 wrote:

  Woldn't it be better to make a plugin out of it :)

• YellowLlama on 9 May, 2008 wrote:

  Very cool.. nicely done :)

• Janko on 9 May, 2008 wrote:

  Goog examples. I started to use jQuery recently and I am glad there is more and more articles about it.

• Ivan on 9 May, 2008 wrote:

  Nice article, very useful...

• Dragon on 10 May, 2008 wrote:

  Plug and play!

• Josh Darville on 10 May, 2008 wrote:

  Great site, if you ever wanted to add a great presentation to your site please contact me. I'd love to work with you. I create custom website videos that infuse graphics, text and sound.
  
  www.TheMediaZoo.com
  
  my name is Josh
  JoshD@themediazoo.com

• Subash on 11 May, 2008 wrote:

  A CSS freak just got new ticks up his sleeves ;)
  
  Thanks Alen.

• webpixelkonsum on 11 May, 2008 wrote:

  My favorit is example three.
  Thank you for your nice work.
  
  Ralph

• AndreiZ on 11 May, 2008 wrote:

  Great article- i searched it for a lon time. Thanks you

• Senko on 12 May, 2008 wrote:

  Great script! I reworked it into a plugin:
  http://blog.senko.net/static/jquery.csstooltip.js

• Osvaldo on 13 May, 2008 wrote:

  Excellent article! Good samples.

• Juan on 14 May, 2008 wrote:

  Great script! Thank you!
  Sorry as I'm a newbie with Javascript: How could I make the big image displaying on top or to the left instead of to the right of the small image?

• paul on 16 May, 2008 wrote:

  very nice relevant scripts, thanks!

• snetcher on 17 May, 2008 wrote:

  Give please, how to add a couple of variable - meaning in the href attribute