Viewing Thread:
"Fading images with CSS and jQuery"

Ever wanted to create something like this?

http://www.t1mmie.verycool.co.uk/

This transition uses only one image, which you can find here. It does this by changing the position of the image when you move over the button, and the fade effect is made by adding a new class to your navigation when users hover over it.

Here we are using a javascript library called
jQuery which you will need to download and put on your web server, and then include on your page using code similar to this:


<script type="text/javascript" src="http://freeola.com/js/jquery.js"></script>


Where "freeola.com" is obviously your website and not Freeola :D

With this next part of code, we are adding the 'hovered state' class to the code, only when the user moves over a button. So when they move on it > make this class fade in > this changes the background position, changing the button to blue.

On mouse out > fade out the class we had > changes the button back. We also check whether the browser is IE7 or higher. If it isn't, then the fade will not work, but they will still change as they should!


<script type="text/javascript" >
$(function () {
if ($.browser.msie && $.browser.version < 7) return;
$('#navigation li')
.removeClass('over')
.find('a')
.append('<span class="hover" />').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
});
</script>


Now that's done, we need to add our CSS. The comments here can be removed when you make your navigation - they are just there to help you understand what is going on.

Here, we basically create our buttons - setting the height, width, indicating what image to use, lining the buttons up and telling the image to change when someone hovers over a button.


/* First set the general height, width and image used */

#navigation a, #navigation a .hover {
height:30px;
width:100px;
background:url('nav.jpg');
display:block;
}

/* We're using a list for our navigation, but you don't have to.
Float them all left so that they appear left to right */

#navigation li {
list-style:none;
float:left;
}

/* We are using one image for our navigation, so we need to
move the image along for each separate button, where
one button begins and another ends */

#navigation a.home {
background-position:0 0;
}
#navigation a.about {
background-position:100 0;
}


/* Here we change the background position of the images when
the mouse hovers over each button. Each button will have
its own different position.

I have made the image for my buttons an easy-to-use size,
of 200x60 for this example. Each of my buttons are 100px
wide, and 30px high, making it easy to work out where to
position each image.

.over will be removed if JS is enabled */

#navigation .over a.home:hover, #navigation a.home .hover {
background-position: 0 30px;
}
#navigation .over a.about:hover, #navigation a.about .hover {
background-position: 100px 30px;
}

/* Don't forget to hide the text on each link, as we're using images not text */

#navigation span {
display:none;
}


I have used a list for my navigation, which is just the way that things are generally done with pure CSS navigations. You don't have to use

and
• tags, but remember to alter take it out of all of your code here, should you wish to.
  
  Finally, we add the HTML to the page:
  
  
<ul id="navigation">
<li class="over"><a href="#" class="home"><span>Home</span></a></li>
<li class="over"><a href="#" class="about"><span>About</span></a></li>
</ul>

  
  Here, we have created two buttons. If you wish to add more, simply replicate the code for each one and give it a new name instead of 'home' or 'about'.
  
  Remember to find my working example at
  http://www.t1mmie.verycool.co.uk/. The source code for this page is very easy to follow and everything is commented as it is above.
  
  If you have any problems with this then please let me know! I hope this tutorial helps you on your way to being a fully-fledged web designer :D
  
  Thanks!

Eccles wrote:
> Also you forgot to add % or px units to your
> background-positions.:P

Ah yeah, thanks for pointing that out Eccles ^_^

Thanks Moto, hope you found it useful!

Nice guide!

Just a quick note.
If you are using the latest version of jQuery (which you should be! Currently v.1.3.2) then you can't use old style browser sniffing like
$.browser.msie && $.browser.version < 7 as it's been deprecated in favour of the Sizzle CSS engine. Just remove the 'if' statement surrounding the rest of the code and it should work ok.

Also you forgot to add % or px units to your background-positions.:P

Nice guide Tim ! Not like you to give away your coding secrets :0 ! I may have to try this when I am at home...

Ever wanted to create something like this?

http://www.t1mmie.verycool.co.uk/

This transition uses only one image, which you can find here. It does this by changing the position of the image when you move over the button, and the fade effect is made by adding a new class to your navigation when users hover over it.

Here we are using a javascript library called
jQuery which you will need to download and put on your web server, and then include on your page using code similar to this:


<script type="text/javascript" src="http://freeola.com/js/jquery.js"></script>


Where "freeola.com" is obviously your website and not Freeola :D

With this next part of code, we are adding the 'hovered state' class to the code, only when the user moves over a button. So when they move on it > make this class fade in > this changes the background position, changing the button to blue.

On mouse out > fade out the class we had > changes the button back. We also check whether the browser is IE7 or higher. If it isn't, then the fade will not work, but they will still change as they should!


<script type="text/javascript" >
$(function () {
if ($.browser.msie && $.browser.version < 7) return;
$('#navigation li')
.removeClass('over')
.find('a')
.append('<span class="hover" />').each(function () {
var $span = $('> span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(500, 1);
}, function () {
$span.stop().fadeTo(500, 0);
});
});
});
</script>


Now that's done, we need to add our CSS. The comments here can be removed when you make your navigation - they are just there to help you understand what is going on.

Here, we basically create our buttons - setting the height, width, indicating what image to use, lining the buttons up and telling the image to change when someone hovers over a button.


/* First set the general height, width and image used */

#navigation a, #navigation a .hover {
height:30px;
width:100px;
background:url('nav.jpg');
display:block;
}

/* We're using a list for our navigation, but you don't have to.
Float them all left so that they appear left to right */

#navigation li {
list-style:none;
float:left;
}

/* We are using one image for our navigation, so we need to
move the image along for each separate button, where
one button begins and another ends */

#navigation a.home {
background-position:0 0;
}
#navigation a.about {
background-position:100 0;
}


/* Here we change the background position of the images when
the mouse hovers over each button. Each button will have
its own different position.

I have made the image for my buttons an easy-to-use size,
of 200x60 for this example. Each of my buttons are 100px
wide, and 30px high, making it easy to work out where to
position each image.

.over will be removed if JS is enabled */

#navigation .over a.home:hover, #navigation a.home .hover {
background-position: 0 30px;
}
#navigation .over a.about:hover, #navigation a.about .hover {
background-position: 100px 30px;
}

/* Don't forget to hide the text on each link, as we're using images not text */

#navigation span {
display:none;
}


I have used a list for my navigation, which is just the way that things are generally done with pure CSS navigations. You don't have to use

and
• tags, but remember to alter take it out of all of your code here, should you wish to.
  
  Finally, we add the HTML to the page:
  
  
<ul id="navigation">
<li class="over"><a href="#" class="home"><span>Home</span></a></li>
<li class="over"><a href="#" class="about"><span>About</span></a></li>
</ul>

  
  Here, we have created two buttons. If you wish to add more, simply replicate the code for each one and give it a new name instead of 'home' or 'about'.
  
  Remember to find my working example at
  http://www.t1mmie.verycool.co.uk/. The source code for this page is very easy to follow and everything is commented as it is above.
  
  If you have any problems with this then please let me know! I hope this tutorial helps you on your way to being a fully-fledged web designer :D
  
  Thanks!