Wednesday, July 28, 2010

20+ Advanced jQuery Effects Demos

Introduction of the iPad, with its lack of the Flash Player, there’s an acceleration in the web development world to use alternative technologies to Flash, such as jQuery, Ajax and others.

Although Flash is still a very powerful and useful tool, which works great on many cases, several of the effects that web designers are accustomed to creating in Flash, can be just as easily implemented using jQuery.

Here we have collected some jquery advance effects demo, enjoy!!!

1. Flip! A jQuery plugin

This demo mimics the popular card flip technique which can rotate an element 360 degrees around its own x or y-axis.

2. jQuery Quicksand plugin

This is a great plugin for sorting an array of elements/icons on a page with nice fade-in/fade-out and animation effects.

3. ImageFlow

This image viewer is similar to Apple’s CoverFlow interface that has become so familiar in their various products and applications.

4. Building an interactive map with jQuery instead of Flash

This demo joins the power of jQuery with Ajax to really create an engaging interface.

5. Slideout Tips With jQuery & CSS3

Clicking on the “+” symbols reveals additional information with a nice smooth animation effect.

6. Zoomer Gallery

In this demo, what appears to be a regular static image gallery is given some extra interactivity by using a multi-layer zoom effect when hovering over an image.

7. jQuery Circulate

This demo shows the much used Flash effect of circling an image around a page – all done using jQuery.

8. Photo Zoom Out Effect

This demo looks deceptively simple, but upon further examination you will find there are several layers to the complexity of the zoom-out effect.

9. Sliding Boxes and Captions with jQuery

Here we get to see how powerful transitions can be created using jQuery, a technique once reserved for Flash developers only.

10. CSS3 Lightbox Gallery

This plugin looks like it was written specifically for social-media. Dragging and dropping a photo on top of the “share box” will open a modal window that can be the interface to call an API via AJAX which can allow the user to share a photo on Flickr, Twitter, Facebook, and other sites.

11. Making a Photoshoot Effect With jQuery & CSS

Although this demo may seem like eye-candy at first glance, it could be a very powerful tool for working with large images when coupled with AJAX or HTML5 local storage.

12. Awesome Bubble Navigation

Here the developer makes good use of color transitions and animation to produce a very attractive and interactive menu.

13. Beautiful Background Image Navigation

In this demo each user action triggers several transitions which all act to fully immerse the user in the interface.

14. AviaSlider

AviaSlider uses classic Flash-like transition effects to enhance what would appear to be a standard slider interface.

15. Background Image Slideshow

Animated backgrounds are one of the areas where Flash used to dominate in web design. Here is an example using jQuery instead.

16. Panning Slideshow

Another unique take on the typical slideshow interface. Here the author adds diagonal navigation to spice up the interface and to make it stand out.

17. jqFancyTransitions

This plugin can be used to display your photos as a slideshow with fancy Flash-like transition effects.

18. iCarousel – Horizontal images slider

Another slideshow that adds just a touch of easing to make the transitions really stand out. It’s no wonder that they chose to showcase sexy Mac products in this demo.

19. Making an Interactive Picture with jQuery

This demo can be used to take advantage of websites where there is lots of screen space. Clicking on a section of the website reveals a modal box which displays more information about the clicked section.

20. Cloud Zoom

A plugin that looks like it was designed with eCommerce in mind. Cloud Zoom is easy to implement and can really enhance the user’s experience.

21. Apple-like Retina Effect

Anyone who has used an iPhone, iPod touch, or iPad is familiar with the “Retina View” that will enlarge a small area on the screen when you touch the area for an extended period of time. This demo implements this effect for the desktop.


Friday, July 16, 2010

SEO Techniques in Off-page Optimization

Off-page optimization helps your site to get high ranking in major search engine. Over 75% of your traffic is based on inbound links.

Here are some effective ways to create inbound links for your website:
  • Listing your business on local directories (, Google maps, Yahoo! local,, etc),
  • Promoting your business on social media outlets (Facebook, Twitter, LinkedIn, Hi5, Stumble Upon etc)
  • Promoting your blog through blog & article marketing - This ensures your website carries an extensive web presence on the Internet. Furthermore, it will bring extra opportunities for prospects to find your company by adding greater visibility for your business on the World Wide Web.

Think of all these inbound links you just created as hundreds of possibilities for people to find you on the web. However, it will be time consuming to create these accounts and then on top of that, to keep them going. Having high ranking (well traveled) inbound links to your site gives your greater visibility and lets search engines know your site is worth being listed. The majority of businesses don’t have the time to do what is required to make a difference, which is why they hire someone for their SEO needs. You too can do the same if you don’t want to be left behind in the SEO race.

Finally, here are some SEO techniques that you can use to get a better search engine ranking:
  • Directory Submissions:
  • Article Submission:
  • Forum:
  • Blogging:
  • Social Bookmarking and Q and A Postings:

A careful analysis of your competitors’ inbound links can help you to find ways where you can usurp them to emerge as the leader. You can also give your business some leverage via online PRs. However, all these will need careful planning and strategizing. What’s more, you will have to come back to review your progress from time to time and fine tune your strategies to make them attuned to the changing times and demands of your clients. May people find these to be a daunting task. If you too belong to this league, don’t fret - you can hire a professional SEO consultant who will do the hard work on your behalf.


Wednesday, July 7, 2010

More than 30 Things You Have to Know about being a Freelancer

Wanting to be a freelancer? – there are many things you need to be aware of. In this article I will list many things for you to think through and consider before jumping into the freelance business. I hope this list will be a valuable tool for you to evaluate the current situation and being prepared for possible challenges along the way.

It’s hard work

Picture by Zsuzsanna Kilian

If anyone tell you otherwise, they’re wrong. It’s that simple. So if you’re looking for an easy option to a normal day job, freelancing is not for you.

You won’t be rich in a day or two

You can be 100% sure that going over to freelancing wont make you rich overnight. There are possibilities of making a decent living, yes, but it will take hard work over time.

Most people can’t make a living from freelancing right away

If you start freelancing thinking that it will give you a good paycheck from week one, that’s very unlikely. Because of this, my tip is to consider combining it with either a part-time job to begin with, a loan of some kind or the best option – that you have savings you can live from for a while. If you are able to live from the first paycheck you get, then good for you – but it’s very rare.

Working harder than a regular employee to receive the same results

Picture by Eva Schuster

When you freelance you will have to consider many different aspects of everything you do. This means extra work and extra hours to output the same amount of work that you’d do at a normal job.

You have to be your own boss

As wonderful as it may sound to work alone, it means you will have to do the job your boss did before, and more. You will have to be a bit hard on yourself at times to make sure that things get done the right ways and to the right times.

No one will kick you out of bed in the mornings

Picture by Diego Jaimovich

As mentioned, you will have to be your own boss. This also means that no one will kick you out of bed in the morning. You will need discipline and still continue to get up early to start doing your daily tasks – just as you would have done when you had to go to your normal workplace. This is a point that quickly will show if you have the required backbone to deal with it. Many wannabe freelancer fall out of it already here.

You have to stay on top of every financial matter

Even if you haven’t had to deal with any financial stuff before, you will have to now. Obviously you could hire someone to help out with this, but that costs money. So at least in the beginning you should aim to do as much as possible of this yourself. Not only should you do this to save money, but also to keep on top of things. You want to know what everything costs to make good calculations of how much you have to earn to be able to pay your bills and also make a profit that you can live from.

It takes hard work to gain a reputation

Being a freelancer, and a new freelancer, your name won’t immediately have the same ring to it as a company name. This means that it’s not likely clients will come running to you. You will have to gain a good reputation through hard work in order for them to choose you in the future.

Every single client counts more

Picture by Barunpatro

For a multimillion dollar company, you could say that a single client doesn’t necessarily mean everything. For you as a freelancer though, every client counts. Remember this when you take on new projects and treat them thereafter. One client more or less can mean the difference between failure and success – every single month.

You have to save for rainy days

Picture by Jakub Krechowicz

To save for slow times means a lot. When you’re a regular employee you know that your paycheck comes at given dates and how much you will get paid. Being a freelancer is completely different. If you don’t have any money in the bank in month with few paid projects, this could mean the end of your freelancing career.

You won’t automatically be insured (for injuries, sickness and so on)

Depending on your region/country you will have to check out what kinds of insurance you can/should have. When you’re an employee, the company you work for have to have some sort of insurance that makes sure you get paid almost no matter what happens. Being a freelancer this responsibility falls on yourself. Different countries have different options, so make sure to check this out BEFORE you start-up.

You need somewhere to work from

Picture by Wilton Rodrigues

When you’re employed somewhere, you know where to go to work. You don’t have to pay for electricity, phone bills or furniture. Now though, you will have to consider these things. Before you start-up you need to think through where you will be working from to make sure you can actually afford it. A home office or some sort of office collaboration can many times be the cheaper solutions to begin with.

It can be hard to set the limit between work and hobby

If you’re going for working freelance, one of the reasons for doing this will quite likely be that you will be able to do what you love. This means that you sometimes will be doing work-related things very many hours of each day. This can mean many challenges, remember to try not to get burned out..

YOU have to pay for repairs

When something gets broken, you can’t go to your boss to get it fixed. You will have to do whatever it takes to get it fixed, and most importantly be able to pay for it.

YOU have to pay for new equipment

Picture by Zebra31

Just like with repairs, you will also have to be able to pay for new equipment when it’s needed. In some cases insurances could cover things that can’t be properly repaired but don’t count on it.

The first 3-6 months will be REALLY hard

At least the 3-6 first months will be extra hard. Not only do you have to adjust to a completely new way of working and thinking – but you need to get a base of clients that have work for you to do. You have to be prepared, both mentally and financially.

At times you’ll be at work 24/7

Picture by Manu Mohan

When you are a freelancer YOU ar your business. This means that if something doesn’t get finished within the regular work hours you’ve set, YOU will be the one that needs to step in and get it done in time. Sometimes this could mean that you for days can be working almost 24/7.

You have to always think ahead

When you’re a regular employee, someone else usually does the planning. Freelancing you have to make plans ahead all the time to make sure to get enough time for reaching deadlines.

You will have to do things you don’t like

You probably choose your freelance career to be doing something you love. This doesn’t mean that you will always be doing only fun things. Every now and then you will have to do projects you find extra challenging, or sometimes even static and boring to make ends meet.

You will have to deal with difficult clients

We are all different. When you freelance you are always the one being in touch with every single client and they are also very different in personalities and in how they prefer to get things done. Not everyone will like you and vice versa, that’s just the way it is. Try to deal with that as smoothly as possible.

You have to think through what you say (and don’t)

Picture by Arte_Ram
You are your own business’ face outwards. This means that you will more than ever before be having to think through things before you say them. Remember that a single sentence said without being thought of can possibly ruin contracts and have you lose valuable income.

Prepare to work longer hours for less pay…for a long time

Picture by Nick Colomb
When you work for yourself you will see that you many times get less paid for every actual hour worked. This is because clients pay for what you do for them and not for your own accounting and planning. Thankfully though, you will be able to adjust your rates to fit this over time. But in the beginning it will be hard. So don’t give up right away.

All markets have ups and downs

Depending on your niche/market you will experience some ups and downs due to changes in the market. This isn’t anything you can do much about other than actually being prepared as good as possible.

Not all people understand that freelancing actually is hard work

Don’t expect everyone to understand what it’s like to do your work. Many new freelancers experience communication problems with family and friends who think freelancing is easy money and little work. It can also many times be hard for them to understand when you’re working and not. Make sure to do all you can to be prepared for this.

There are many laws/rules you have to read up on

It’s rarely as easy as just deciding what you want to do with your business and starting to do it. In most countries there are rules and regulations on many aspects of various businesses. You have to figure out what will apply to you so that you can do things they way they’re supposed to be done.

Taxes and VAT can have special rules in your country, make sure you know them!

Just as with all other rules and regulations there are rules for how to pay taxes and more. If you don’t know these you could be in for a very expensive surprise. This could eventually cost you your business.

You always need to have a plan B

Picture by Flaviu Lupoian

What many times separates the best from the rest, is the ability to adapt to challenges. This means that you have to keep a plan B ready at all times. What will you spend time on when there are slow days? What will you do if the client changes his mind about something in the last-minute and how will you be able to catch up lost hours if you get sick?

Slow times don’t mean less work, it often means more

If you have a day or three without paid projects, this definitely doesn’t mean that you can just sit back and relax. These are the days when you should do various other tasks, – both in order to get new clients and to take care of your own business. If you take advantage of these days it can mean an ocean of difference when the new projects start coming in again.

There are always many competitors

Picture by Gabriella Fabbri
When you enter the freelance world, you will quickly see that your competitors are many. This means that you can’t slack and expect for clients to stick to you. You always have to do your best and then some to be able to compete with everyone else.

You have to be able to make adjustments fast

Clients can require last-minute changes, meetings sometimes have to be rescheduled, you or the client can get sick for a few days. The options are many and you have to be able to adjust fast to make it.

Being a freelancer can be very expensive

As you probably understand from all these points, Freelancing can be quite expensive at times.

You will make more each hour, but also have more expenses

Picture by Sephen Hyun
Its easy math, but not always easy to remember. The bill your clients pay will equal a higher price each hour compared to what you get paid as a regular employee. Remember though, that this is supposed to cover for all your expenses.

You will have to say NO to some business opportunities

The ability to say No can prove to be a very important thing for you, or you will work 24/7 still not being able to finish everything. This will affect the quality of your work, your physical and mental health and your clients.

You will have to say NO to personal projects at times

Picture by StillSearc
If something didn’t go according to plan and someone need to put in extra work last-minute to get something finished, that person would be you. This means that you will have to say No to many other things sometimes, that’s the hard reality of being a freelancer.


Saturday, July 3, 2010

CSS Image Maps with change map color on rollover

In this tutorial, we're not only going to get you up to speed on how to create a CSS image map, but, we're also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a "tooltip" like popup.

view demo


In the days of table based web design, using image maps in your web layouts were quite common. They were used to define clickable areas, or "hotspots", within several sliced images (coming together to form one image). During this time, these hotspots were used mostly for navigational purposes. Today, image maps created in CSS are not only a much leaner and cleaner markup, but they're also easily editable and are often used for displaying additional content when hovered, not just as a means of navigation.

Before we get started, let's take a look at an old school image map using tables. First of all, the majority of interface designers used an image editing program like Fireworks or Photoshop to slice the image into its separate sections, and then exported it into HTML using tables.

tutorial image

What you'd end up with is 17 images, a spacer gif, and a mess of table rows and very un-semantical markup.

If you take a look at the page, you'll notice it does exactly what it's supposed to do. It's when you look "under the hood" you'll see the mess, not to mention, adding additional functionality to the image map, like hover states, usually requires javascript.

Semantics and the taboo of table based web design aside, how much of a nightmare is it to edit that? I mean, if you decided to change the source image whatsoever there's a lot of legwork to be done to re-export it into HTML, especially if your 17 images becomes 25 images. My stomach turns just to think about it.
What we're going to do is cut the HTML into a fraction of what you see above, while using only one image and CSS.

First, we'll be recreating the above mess in a much leaner, easily manageable, and semantic way. Once we get our feet wet and get comfortable with how CSS image maps work, we'll kick it up a notch and use a CSS background image sprite to add some hover states to our image map. Lastly, as if that wasn't enough, we'll take it even one step further and demonstrate how an image map's use is not necessarily restricted to its navigational purposes, but proves to be quite useful in providing additional information about specific sections of the image map using a "tooltip" like pop-up.
As pointed out in the comments, I don't want to confuse a beginner with the HTML map tag and image slicing. I refer to the above example as "image map" when, in all actuality, it is a way of slicing and image into a table and creating its hotspots that way. I have always just referred to both ways as image mapping, and I apologize for any confusion.

Recreate our image map using CSS

In the table based image map, I used Photoshop to slice my continents map into 17 different images to be used for my 6 hotspots, or clickable links. In our CSS image map, we're only going to use one image.

tutorial image

Apparently Wikipedia didn't want to include Antarctica in the continents map so we'll be working with 6 instead of 7! Oh well, the important lesson here is CSS image maps, not geography.

What we're going to do is create an unordered list and use our map-color.png as its background-image. Fire up your text-editor of choice and create a new html document with the following markup in it:

1.<ul id="continents">
2.    <li id="northamerica"><a href="">North America</a></li>
3.    <li id="southamerica"><a href="">South America</a></li>
4.    <li id="asia"><a href="">Asia</a></li>
5.    <li id="australia"><a href="">Australia</a></li>
6.    <li id="africa"><a href="">Africa</a></li>
7.    <li id="europe"><a href="">Europe</a></li>

What we have here is a simple unordered list containing our 6 continents and links to their information on

Let's add some basic styles to our ul element.

01.ul#continents {
02.  list-style: none;
03.  background: url(images/map-color.png) no-repeat 0 0;
04.  position: relative;
05.  width: 580px;
06.  height: 268px;
07.  margin: 0;
08.  padding: 0;
Some basic styles here, nothing special. We removed the list-style, added a background image, declared its width and height to be the same as our background image, and reset the margins and padding. The important declaration to pay attention to here is its position value of relative. This will allow for us to absolutely position our li elements next. You should have something like this.

Now we need to position our li elements according to their size and location on the continents map.

tutorial image

To make it easier for positioning our li elements, I recommend adding a 1px border to each li element, to guide us as a wireframe. We can remove the border when we're done positioning our li elements. Also, because all of our li elements will have this border AND also have a position value of absolute, rather than repeating ourself on each element's declarations, let's add them to all the li elements in our unordered list. Below your ul#continents styles add the following styles:

1.ul#continents li {
2.  border: 1px solid #000;
3.  position: absolute;

If you look at the page now, you'll see all of our li elements all bunched up in the left hand corner, overlapping one another. This is because they all have an absolute position, but there aren't any left, top, right, or bottom property values declared yet. We'll do that next.

Right below the ul#continents li styles, add the following styles:

01.#northamerica {
02.  width: 227px;
03.  height: 142px;
04.  top: 2px;
05.  left: 0px;
08.#southamerica {
09.  width: 108px;
10.  height: 130px;
11.  top: 131px;
12.  left: 76px;
15.#africa {
16.  width: 120px;
17.  height: 140px;
18.  top: 83px;
19.  left: 209px;
22.#europe {
23.  width: 120px;
24.  height: 84px;
25.  top: 1px;
26.  left: 211px;
29.#asia {
30.  width: 215px;
31.  height: 175px;
32.  top: 1px;
33.  left: 283px;
36.#australia {
37.  width: 114px;
38.  height: 95px;
39.  top: 152px;
40.  left: 432px;

All we did was give each li element its respected height and width values, and also positioned each of them using the left and top properties.
An easy way to get an idea of where to start with our left and top properties, I simply used Photoshops rectangle marquee selection tool and the "info" panel to give me an estimate. Once I had an approximate value from there, I fine tuned it in the CSS declarations.

tutorial image

Now if you take a look at our page, you'll see a nice little wireframe of our image map. This is where the borders come in handy for fine tuning the positions. I think it looks good where it is, let's move on!

Right now, our li elements are only "clickable" within the text area of each anchor element. We want our entire li element to be clickable, so we need to add some styles to our anchor elements. I've highlighted the new styles needed. 

01.ul#continents {
02.  list-style: none;
03.  background: url(images/map-color.png) no-repeat 0 0;
04.  position: relative;
05.  width: 580px;
06.  height: 268px;
07.  margin: 0;
08.  padding: 0;
11.ul#continents li {
12.  border: 1px solid #000;
13.  position: absolute;
16.ul#continents li a{
17.  display: block;
18.  height: 100%;
19.  text-indent: -9000px;
22.#northamerica {
23.  width: 227px;
24.  height: 142px;
25.  top: 2px;
26.  left: 0px;
29.#southamerica {
30.  width: 108px;
31.  height: 130px;
32.  top: 131px;
33.  left: 76px;
36.#africa {
37.  width: 120px;
38.  height: 140px;
39.  top: 83px;
40.  left: 209px;
43.#europe {
44.  width: 120px;
45.  height: 84px;
46.  top: 1px;
47.  left: 211px;
50.#asia {
51.  width: 215px;
52.  height: 175px;
53.  top: 1px;
54.  left: 283px;
57.#australia {
58.  width: 114px;
59.  height: 95px;
60.  top: 152px;
61.  left: 432px;

First thing we did was declare our display property value as block, instead of its default of inline, allowing for us to give it a height value, in which case we're giving it a value of 100%. We also gave it a negative text-indent value, because we want our text to only exist if CSS is disabled, otherwise we don't want it shown on our image map.

That's it! You can now remove the border values from your li elements and you'll have a simple CSS image map. 

Not only is the markup cleaner, and easier to read, but, it's also a lot easier to make modifications to. For instance, if we went in and added Antarctica to the map, we'd simply need to create another li element and position it accordingly.

Add hover states to our map

So far we have demonstrated how to implement a simple image map using CSS, but, from a presentational standpoint, there doesn't seem to be much of a difference between the two image maps (table based vs. CSS). Where CSS image maps stand out is the ability to use a CSS background image sprite to add hover states to our image map.

I used another map from wikipedia to create a simple image sprite.
tutorial image

As you can see, I created a new image called map.png. I'm going to replace the map-color.png in my ul#continents styles with my new sprite image.

01.ul#continents {
02.  list-style: none;
03.  background: url(images/map.png) no-repeat 0 0;
04.  position: relative;
05.  width: 580px;
06.  height: 268px;
07.  margin: 0;
08.  padding: 0;

If you were to look at your page with the new background image, you wouldn't see a difference. What we need to do is add background image to our anchor elements, but only when they are hovered. What we're going to do is use the same background image as our ul#continents element on our anchor elements when they are hovered. We'll then need to position the background image according to its position within the sprite.

tutorial image

Let's go ahead and start with North America. At the bottom of your styles, add the following CSS rules:

1.ul#continents li a:hover {
2.  background: url(images/map.png) no-repeat 0 0;
5.ul#continents li#northamerica a:hover {
6.  background-position: 0 -270px;

What we've done is added our background image (map.png) to all of our anchor elements within the continents unordered list. We then declared the background position on our anchor element inside of the li#northamerica. If you take a look at our image map now, you'll see when you hover North America, it has a nice little hover state letting you know you're hovering over North America. If you hover the other continents, you'll see a piece of the the colored version of North America, because we haven't changed their background-positions yet. We'll do that now.

Below the last CSS rules you just put in your styles, go ahead and add the rest of the background position values. 

01.ul#continents li#southamerica a:hover {
02.  background-position: -226px -273px;
05.ul#continents li#africa a:hover {
06.  background-position: -209px -417px;
09.ul#continents li#europe a:hover {
10.  background-position: -22px -427px;
13.ul#continents li#asia a:hover {
14.  background-position: -363px -268px;
17.ul#continents li#australia a:hover {
18.  background-position: -412px -455px;
Take a look at our image map now, and you'll see the background positions itself accordingly, when you hover over each continent.

How easy was that?! That's a nice little image map, with minimal markup, done 100% with CSS, and no javascript. 

Here's our image map CSS and HTML up to this point:

001.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
002.<html xmlns="">
004.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
005.<title>CSS Image Maps - With Hover States</title>
006.<style type="text/css">
007.ul#continents {
008.  list-style: none;
009.  background: url(images/map.png) no-repeat 0 0;
010.  position: relative;
011.  width: 580px;
012.  height: 268px;
013.  margin: 0;
014.  padding: 0;
017.ul#continents li {
018.  position: absolute;
021.ul#continents li a{
022.  display: block;
023.  height: 100%;
024.  text-indent: -9000px;
027.#northamerica {
028.  width: 227px;
029.  height: 142px;
030.  top: 2px;
031.  left: 0px;
034.#southamerica {
035.  width: 108px;
036.  height: 130px;
037.  top: 131px;
038.  left: 76px;
041.#africa {
042.  width: 120px;
043.  height: 140px;
044.  top: 83px;
045.  left: 209px;
048.#europe {
049.  width: 120px;
050.  height: 84px;
051.  top: 1px;
052.  left: 211px;
055.#asia {
056.  width: 215px;
057.  height: 175px;
058.  top: 1px;
059.  left: 283px;
062.#australia {
063.  width: 114px;
064.  height: 95px;
065.  top: 152px;
066.  left: 432px;
069.ul#continents li a:hover {
070.  background: url(images/map.png) no-repeat 0 0;
073.ul#continents li#northamerica a:hover {
074.  background-position: 0 -270px;
077.ul#continents li#southamerica a:hover {
078.  background-position: -226px -273px;
081.ul#continents li#africa a:hover {
082.  background-position: -209px -417px;
085.ul#continents li#europe a:hover {
086.  background-position: -22px -427px;
089.ul#continents li#asia a:hover {
090.  background-position: -363px -268px;
093.ul#continents li#australia a:hover {
094.  background-position: -412px -455px;
101.<ul id="continents">
102.    <li id="northamerica"><a href="">North America</a></li>
103.    <li id="southamerica"><a href="">South America</a></li>
104.    <li id="asia"><a href="">Asia</a></li>
105.    <li id="australia"><a href="">Australia</a></li>
106.    <li id="africa"><a href="">Africa</a></li>
107.    <li id="europe"><a href="">Europe</a></li>

Create a "tooltip" like pop-up when hovering our continents

By now, you should probably have a pretty good feeling about CSS image maps and how to implement them. What we're going to do now is take it one step further and create a "tooltip" like pop-up to each of our continents when they are hovered. First thing we need to do is remove the negative text-indent declaration from our anchor elements.

01.ul#continents {
02.  list-style: none;
03.  background: url(images/map.png) no-repeat 0 0;
04.  position: relative;
05.  width: 580px;
06.  height: 268px;
07.  margin: 0;
08.  padding: 0;
11.ul#continents li {
12.  position: absolute;
15.ul#continents li a{
16.  display: block;
17.  height: 100%;

Now when you view your image map, you'll notice that all the country named anchors are visible again. We're going to take care of that now.

In the HTML of our image map, wrap the text content of each of our anchor elements in a <span> tag. So our html in the body should now look like this:

1.<ul id="continents">
2.    <li id="northamerica"><a href=""><span>North America</span></a></li>
3.    <li id="southamerica"><a href=""><span>South America</span></a></li>
4.    <li id="asia"><a href=""><span>Asia</span></a></li>
5.    <li id="australia"><a href=""><span>Australia</span></a></li>
6.    <li id="africa"><a href=""><span>Africa</span></a></li>
7.    <li id="europe"><a href=""><span>Europe</span></a></li>

If you look at our image map now, you won't see any changes in our layout. Now, as I said, we only want text to show when we hover over one of our continents. So what we need to do is hide our span elements until our anchor element has been hovered. We will do this by using the display property.

Add the following CSS rules at the bottom of your styles:

1.ul#continents li a span {
2.  display: none;
5.ul#continents li a:hover span {
6.  display: block;

What we're telling the browser to do is hide all span elements (display: none) until its parent anchor element is hovered, in which, it will change from display: none to display: block

Take a look at our image map now and hover each continent. You'll now see the text will only show when its parent anchor element has been hovered. Let's make this thing look better, and add some useful information to the span elements, rather than just the country's name.

Note: I changed the way my HTML markup looks in the unordered list code for readability, it will not render the page any differently. 

01.<ul id="continents">
02.    <li id="northamerica">
03.        <a href="">
04.            <span>
05.                <strong>North America</strong>
06.                Population: 528,720,588
07.            </span>
08.        </a>
09.    </li>
10.    <li id="southamerica">
11.      <a href="">
12.            <span>
13.                <strong>South America</strong>
14.                Population: 385,742,554
15.            </span>
16.        </a>
17.    </li>
18.    <li id="asia">
19.      <a href="">
20.            <span>
21.                <strong>Asia</strong>
22.                Population: 3,879,000,000
23.            </span>
24.        </a>
25.    </li>
26.    <li id="australia">
27.      <a href="">
28.            <span>
29.                <strong>Australia</strong>
30.                Population: 21,807,000
31.            </span>
32.        </a>
33.    </li>
34.    <li id="africa">
35.        <a href="">
36.        <span>
37.            <strong>Africa</strong>
38.            Population: 922,011,000
39.        </span>
40.        </a>
41.    </li>
42.    <li id="europe">
43.        <a href="">
44.            <span>
45.                <strong>Europe</strong>
46.                Population: 731,000,000
47.            </span>
48.        </a>
49.    </li>

What we've done is wrap <strong> tags around our each of our continents' names and added each of their respected population counts.

Now we need to add some styles to our new elements and we're done. First thing we want to do is remove the underline from our anchor elements. Go ahead and find your ul#continents li a rules in your styles and add the highlighted style declaration.

1.ul#continents li a{
2.  display: block;
3.  height: 100%;
4.  text-decoration: none;
Now we need to add some more rules to our span elements. Add the highlighted styles.

01.ul#continents li a:hover span {
02.  display: block;
03.  padding: 5px;
04.  width: 150px;
05.  background: #000;
06.  position: relative;
07.  top: 50%;
08.  font: 11px Arial, Helvetica, sans-serif;
09.  opacity: .75;
10.  filter:alpha(opacity=75);
11.  color: #FFF;
What we're doing here is giving our span elements (when they're parent anchor element is hovered) some styles to make our content look a little better and more like a tooltip.
If you're not familiar with the opacity or filter:alpha properties, they're simply being used to drop the opacity of our span elements. Please note that these two declarations will cause your CSS to not validate. You could use javascript (jQuery) to apply the opacity settings if you wanted to, but for the sake of this demonstration I'm not going to worry about my CSS validating. Just know, without these two declarations your CSS and HTML to this point will certainly validate. 

Take a look at our image map now, and you'll see we have implemented a nice little tooltip, when hovering each continent, giving us each of their populations!