September 28, 2009

AJAX / Javascript, All, HTML / CSS, Mootools, Scripts, Tutorials

Bookmarks

Sponsor list with CSS Sprites and Mootools 1.2

Article written by Jeeremie

Today, we are going to see how to create a sponsor list with CSS Sprites and Mootools 1.2 as seen on

Preview / Download

view demo Download(85.9 KiB, 4,416 hits)

This menu is released under a Creative Commons Attribution-Share Alike 2.0 License. Feel free to do whatever you d like with this menu or template, just please give credit where credit is do.

Step 1: The HTML

HTML code is pretty simple:

^?View Code HTML4STRICT

<div id="sponsors">
    <span>Our Sponsors:</span>
 
    <a class="mootools" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="drupal" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="technorati" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="jquery" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="miro" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="mozilla" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="nbc" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="twitter" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a>
    <a class="wordpress" title="Web-Kreation" href="http://web-kreation.con/index.php/blog"></a></div>

The same result could be done with an unordered list but I didn t see the necessity to add extra tags to my document.

Step 2: CSS Sprites

A sprite is basically multiple graphics combined into one single file. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed.

Google makes good use of CSS sprites on their search page:

nav_logo6

The main advantages of using sprites are:

Fewer images for the browser to download, which means less http requests.
Total images size is generally smaller.
Rollover image appears instanlty on mouseover.

For this example, we are going to create a color version and a grayscale version and merge them into one file as you can see below:

css sprites

Include the CSS code below in the head of your html document or in an external style sheet:

^?View Code CSS

<!--
#sponsors {
	width: 940px;
	display: block;
	clear: both;
	border: 1px solid #eee;
	padding: 10px 5px;
	margin: 15px auto;
	text-transform: uppercase;
	font-weight: bold;
	color: #666;
}
#sponsors span {
	display: block;
	float: left;
	padding: 0 10px;
	height: 20px;
	line-height: 20px;
}
#sponsors a {
	display: block;
	float: left;
	height: 20px;
	padding: 0 10px;
}
a.mootools {background: url(images/mootools.jpg) no-repeat 0 0; width:85px;}
a.drupal {background: url(images/drupal.jpg) no-repeat 0 0; width:74px;}
a.technorati {background: url(images/Technorati.Jpg) no-repeat 0 0; width:107px;}
a.jquery {background: url(images/jquery.jpg) no-repeat 0 0; width:63px;}
a.miro {background: url(images/miro.jpg) no-repeat 0 0; width:23px;}
a.mozilla {background: url(images/mozilla.jpg) no-repeat 0 0; width:63px;}
a.nbc {background: url(images/nbc.jpg) no-repeat 0 0; width:75px;}
a.twitter {background: url(images/twitter.jpg) no-repeat 0 0; width:87px;}
a.wordpress {background: url(images/wordpress.jpg) no-repeat 0 0; width:20px;}
 
	/*mouseover*/
	a:hover.mootools, 
	a:hover.drupal, 
	a:hover.technorati, 
	a:hover.jquery, 
	a:hover.miro, 
	a:hover.mozilla, 
	a:hover.nbc, 
	a:hover.twitter, 
	a:hover.wordpress {background-position: 0 -20px;} /* reveal color version */
-->

In the initial state, we only want to see the grayscale version. In order to do that, we set the background-position property to “0 0″ in our CSS. On mouseover, we change background-position to “0 -20px” to reveal the color version.

(If you want to learn more about sprites, check this excellent article from Smashing Magazine: The Mystery Of CSS Sprites: Techniques, Tools And Tutorials)

Step 3: the Javascript (js/colorize.js)

I have commented the JS. It should be self-explanatory but if you have any question, ask in the comments below.

^?View Code JAVASCRIPT

window.addEvent('domready', function(){
 
	var sponsors = $$('#sponsors a').setStyle('opacity', 0.5); // Set opacity to 0.5 for grayscale image
 
	sponsors.set('tween',{duration:200, wait:false}).addEvents({
 
		//On mouseenter
		'mouseenter': function(){
			this.setStyle('background-position','0 -20px'); //Reveal color image
			this.get('tween').start('opacity',1); //set opacity to 1
		},		
 
		//on mouseleave
		'mouseleave':function(){
			this.setStyle.delay(500,this,['background-position','0 0']); //set back initial background-position for grayscale image
			var tween =  this.get('tween');
			tween.start.delay(500, tween,['opacity',0.5]); //set back initial opacity
		}
 
	});
});

Step 4: Make it happen!

Finally, add links to the Mootools 1.2 and colorize.js in the head of your html document:

^?View Code HTML4STRICT

1 2	<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"><!--mce:0--></script> <script src="js/colorize.js" type="text/javascript"><!--mce:1--></script>

Test your page in a browser and you will be all set.

The Author

Article written by Jeeremie:

Hi, My Name is Jeremie Tisseau. I am a French UI/UX Designer, Event Organizer and Web Entrepreneur based in Bangkok, Thailand, since January 2009. I design beautiful and functional web and mobile apps for early stage startups.

Want to become a guest author on this blog?

Create Code Snippets in Aptana to Improve Productivity

Hidden jQuery Drop Down Menu for Minimalist Design

Next/Previous Post Top ↑ ↓ Form

30 Comments

Alex says:

28 Sep, 2009

Really nice tutorial, already plans to use it :). I think the technique can be used for other stuff as well.
Alex says:

28 Sep, 2009

Question, can you do a tutorial that involves jquery instead of mootools?
Eric Hamby says:

5 Oct, 2009

Great tutorial always. be better if it used J-Query though.
mad max says:

19 Oct, 2009

Simple but effective.
Great work, as usual!
mad max says:

19 Oct, 2009

@Eric Hamby and @Alex
Here is my jquery version:

$(document).ready( function() {
$(‘#sponsors a ).css(‘opacity ,0.5); // Set opacity to 0.5 for grayscale image

$(‘#sponsors a ).mouseover(function(){
//On mouseenter
$(this).stop().animate({ ‘background-position': 0 -20px }, “fast”); //Reveal color image
$(this).stop().animate({‘opacity':1}, ‘fast ); //set opacity to 1
//on mouseleave
}).mouseout(function(){
$(this).stop().animate({ ‘background-position': 0 0′ }, “fast”); //set back initial background-position for grayscale image
$(this).stop().animate({‘opacity':0.5}, ‘fast ); //set back initial opacity
});
});

Rember to include jquery (1.3.2) instead of mootools.

Hope can be useful.

Regards
mirko says:

30 Oct, 2009

@mad max
Is this really the right code for colorize.js. Doen t work for me…
dreamweaver puts out a syntax error (I ve implented the jquery132)
mad max says:

30 Oct, 2009

@mirko
Can you cut&paste the syntax error given by Dw? It works for me and inspecting code with firefox+firebug, doesn t give me any error. You can chek it out live, here:

http://www.w3b.it/demos/sponsor_list/

It is exactly the same demo posted by Jeremie Tisseau, with the jquery implementation above.
bye
Jeremie Tisseau says:

30 Oct, 2009

@mad max, thx for providing the jQuery version. The jQuery effect seems to be smoother, no?
mad max says:

30 Oct, 2009

@Jeremie Tisseau
Yes, it gives me the same impression.
mirko says:

30 Oct, 2009

@madmax
error given in DW4 is only: “There is a syntax error on line2″
Line 2 is: “$( #sponsors a ).css( opacity ,0.5); // Set opacity to 0.5 for grayscale image
I try to use it on a Joomla site. Joomla 1.5x uses mootools 1.1 and above mootools-version doesn t work with it cause of conflicts
I m trying something else and report the result here later. Stay tuned. Have a nice weekend so far…
mad max says:

30 Oct, 2009

@mirko
Try to include the opacity value between single or double quote or swap single with double; for example:

$( #sponsors a ).css( opacity , 0.5′);
or
$(“#sponsors a”).css(“opacity”,”0.5″);

I don t use Dw so I don t really know what kind of js rules or conventions it follows.

But, apart from Dw errors, does this JS work in browsers for you?
Have a nice week-end you too!
xpla says:

1 Nov, 2009

Hi,

i have the same problem with Joomla 1.5. I can t use the curret version of Jquery as a vital part of the page won t work anymore. I tried to exchange the current version of mootools in the media folder of Joomla but i wasn t able to get the whole thing to work. Didn t got any error, it just simple didn t work.
- Jeremie Tisseau says:
  
  2 Nov, 2009
  
  You can try to use jQuery noconflicts with Mad Max s script above. This script “helps to make sure that jQuery doesn t conflict with the $ object of other libraries” and some users even reported it helps with different versions of jQuery. Let us know if it works for you.
mad max says:

2 Nov, 2009

That s right Jeremie Tisseau. There s also a plugin for joomla 1.5 that does the job:

http://extensions.joomla.org/extensions/style-&-design/scripts/7230/details

I haven t try it yet, but it seems to be a simple and working solution.
xpla says:

3 Nov, 2009

I already tried jQuery noconflicts, this doesn t solves the problem, that it didn t work with Jquery 1.3.2 and added an additional problem that antoher thing stopped working with the new version of Jquery.

So even with mootools replaced with the new version it didn t work.
mirko says:

3 Nov, 2009

There is a limitation in Joomla 1.5x Core. It will not run properly with mootools above ver. 1.1.
Joomla 1.6 will have the new mootools lib… and jquery is still not working…
mirko says:

3 Nov, 2009

You can turn off loading the mootools lib in Joomla by putting this in the template after :

getHeadData();
reset($headerstuff[‘scripts ]);
foreach($headerstuff[‘scripts ] as $key=>$value){
unset($headerstuff[‘scripts ][$key]);
}
$this->setHeadData($headerstuff);
?>

This works but it s not a perfect solution…
mirko says:

3 Nov, 2009

Damn code-scissor…. maybe now

You can turn off loading the mootools lib in Joomla by putting this in the template after :

getHeadData();
reset($headerstuff[‘scripts ]);
foreach($headerstuff[‘scripts ] as $key=>$value){
unset($headerstuff[‘scripts ][$key]);
}
$this->setHeadData($headerstuff);
?>
mirko says:

3 Nov, 2009

Nope. the snippet doesn t work…
try to google it for the right php-code
Pozycjonowanie Stron says:

4 Nov, 2009

Very good tutorial
Jeremie Tisseau says:

4 Nov, 2009

@mirko, you can paste code as explained right before the Submit button on this page:

<pre lang=”php” colla=”-“>…</pre>
Danang Sukma says:

1 May, 2010

Like it… I had been looking for tutorials like this, thank you very much for your hard work
Chris Quinn says:

13 Jun, 2010

Nice thanks, I needed a good tutorial on sprites, i think its great how you can combine the images, this really helps with SEO too, because Google is ranking faster web pages higher.
Hans says:

2 Feb, 2011

Thank you for this tutorial. I personally like the jQuery selectors more that the mootools ones.
Renzo Reinoso Alcas says:

21 Apr, 2011

Gracias muy bueno
Seb says:

11 Aug, 2011

Sympa le tuto. Par contre je ne vois pas comment faire si l on utiliser une seule image en guise de sprite pour TOUS les sponsors.
Normallement on fait varier le background-position mais vu que celui ci n est pas dynamique dans ton script c est un peu tendu du slip…Ca serait tellement mieux que d avoir charger un max d images…
Web dizajn says:

6 Oct, 2011

Very good tutorial
Thank you!
KB says:

13 Oct, 2011

Another cool implementation of CSS sprite: Dynamic CSS Sprite implementation to give a painting effect. Read how to implement it by reading an easy to follow tutorial at http://blog.kunals.com/dynamic-css-sprite-implementation-gives-a-painting-effect/
Ecricket says:

21 Nov, 2011

More interesting animations can be created using Jquery plugins and they simpler to create and manage.
Noida says:

21 Nov, 2011

I had been working on jquery from a long time and want to learn moo tools but i cant find the perfect place to start with your article helps but still want to know more about moo tools do you have any resource(link, pdf etc.) for it ? plz reply