28
Sep
2009
Sponsor list with CSS Sprites and Mootools 1.2
By jeeremie. Posted in AJAX / Javascript, TutorialsToday, we are going to see how to create a sponsor list with CSS Sprites and Mootools 1.2 as seen on JamieWhinCup:
View Demo
Before we start, have a look for yourself: view demo »
Download
Download (85.5 KiB, 783 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:
<div id="sponsors"> <span>Our Sponsors:</span> <a href="http://web-kreation.con/index.php/blog" title="Web-Kreation" class="mootools"></a> <a href="http://web-kreation.con/index.php/blog" title="Web-Kreation" class="drupal"></a> <a href="http://web-kreation.con/index.php/blog" title="Web-Kreation" class="technorati"></a> <a href="http://web-kreation.con/index.php/blog" title="Web-Kreation" class="jquery"></a> <a href="http://web-kreation.con/index.php/blog" title="Web-Kreation" class="miro"></a> <a href="http://web-kreation.con/index.php/blog" title="Web-Kreation" class="mozilla"></a> <a href="http://web-kreation.con/index.php/blog" title="Web-Kreation" class="nbc"></a> <a href="http://web-kreation.con/index.php/blog" title="Web-Kreation" class="twitter"></a> <a href="http://web-kreation.con/index.php/blog" title="Web-Kreation" class="wordpress"></a> <div class="clearfix"></div> </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:
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:
Include the CSS code below in the head of your html document or in an external style sheet:
<style type="text/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 */ </style> |
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.
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:
<head> <script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script> <script src="js/colorize.js" type="text/javascript"></script> </head> |
Test your page in a browser and you will be all set.
Popularity: 2% [?]
September 28th, 2009 at 8:42 pm
Really nice tutorial, already plans to use it
. I think the technique can be used for other stuff as well.
September 28th, 2009 at 8:43 pm
Question, can you do a tutorial that involves jquery instead of mootools?
October 3rd, 2009 at 5:28 pm
[...] View Demo: http://web-kreation.com/demos/sponsor_list_with_mootools_1.2/ View Tutorial: http://web-kreation.com/index.php/tutorials/sponsor-list-with-css-sprites-and-mootools-1-2/ [...]
October 5th, 2009 at 8:25 am
Great tutorial always. be better if it used J-Query though.
October 19th, 2009 at 2:56 pm
Simple but effective.
Great work, as usual!
October 19th, 2009 at 3:39 pm
@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
October 30th, 2009 at 1:54 pm
@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)
October 30th, 2009 at 2:36 pm
@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 jeeremie, with the jquery implementation above.
bye
October 30th, 2009 at 2:45 pm
@mad max, thx for providing the jQuery version. The jQuery effect seems to be smoother, no?
October 30th, 2009 at 2:53 pm
@jeeremie
Yes, it gives me the same impression.
October 30th, 2009 at 2:55 pm
@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…
October 30th, 2009 at 4:33 pm
@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!
November 1st, 2009 at 4:46 pm
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.
November 2nd, 2009 at 9:31 am
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.
November 2nd, 2009 at 3:18 pm
That’s right Jeeremie. 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.
November 3rd, 2009 at 5:22 am
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.
November 3rd, 2009 at 8:17 pm
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…
November 3rd, 2009 at 8:24 pm
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…
November 3rd, 2009 at 8:26 pm
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);
?>
November 3rd, 2009 at 8:27 pm
Nope. the snippet doesn’t work…
try to google it for the right php-code
November 4th, 2009 at 8:41 am
Very good tutorial
November 4th, 2009 at 10:24 am
@mirko, you can paste code as explained right before the Submit button on this page:
<pre lang=”php” colla=”-”>…</pre>