Semitransparent rollovers made easy with JQuery

Posted on | February 3, 2007 | 44 Comments

I’m continuing to enjoy working with jQuery. This article shows a simple method for enabling semi-transparent rollovers which actually work on IE 6. Yes, you could use a .gif file for a crude version, but many effects, especially “glowing” effects just look much better if you use a format which supports alpha channel transparency.

jQuery and pngfix to the rescue

Update: See an example of this technique.

How to use my solution:

  • Make your images and rollovers. Put them in the same directory, and make sure to name the rollover images with an “_on.png” suffix. For example, if your main image is “btn_home.png”, your rollover image should be named “btn_home_on.png”.
  • Markup your image tags with IDs that match the stem of the button name. For example, if your button is named “btn_home.png”, then the id should be “home”. Note that you need the height and width for the images, as pngfix requires that information. Then, wrap those images in a list tage, all surrounded with an element of class “nav”. Example:
<ul class="nav"> <li><a href="index.php"><img id="home" src="media/images/btn_home.png" height="27" width="62"/></a></li> <li><a href="store.php"><img id="store" src="media/images/btn_store.png"/>< height="27" width="128"/a></li> <li><a href="stories.php"><img id="stories" src="media/images/btn_stories.png"/>< height="27" width="81"/a></li> <li><a href="lessons.php"><img id="lessons" src="media/images/btn_lessons.png" height="27" width="86"/></a></li> </ul>
  • Get pngfix.js – That will enable you to use .png graphics in IE6 with support for transparency.
  • Link my script in the header, and load pngfix.js if it is needed. Thanks "bobosola". Note that the conditional comment is needed to tell the script that you are using IE.
<script type="text/javascript" src="media/js/jq-flash.js"></script> <!--[if lt IE 7.]> <script defer type="text/javascript" src="media/js/pngfix.js"></script> <script type="text/javascript">SSS.IE6 = true;</script> <![endif]--> <script type="text/javascript" src="media/js/site.js"></script>
  • Call the jQuery preloader and initialize the menu. When you are calling the preloader, you need to put the "prefix" as the first argument. In the example below, I am preloading: media/images/btn_home_on.png, media/images/btn_store_on.png, etc.
$(function() { SSS.preloadimages("media/images/btn_", "home_on.png", "store_on.png", "stories_on.png", "lessons_on.png", "boomer_on.png", "company_on.png", "careers_on.png", "contact_on.png"); SSS.menuinit(); })

The code:

/*
Copyright 2007 Bruce Kroeze 

This work is licensed under a Creative Commons Attribution
2.5  License, Please see the license text at: 

http://creativecommons.org/licenses/by/2.5/

*/
SSS = {
// prefix for all "over" images
imagebase : 'media/images/btn_',

// flag for IE
IE6 : false,
			
// Initialize all menus for rollover
menuinit : function() {
	if (SSS.IE6) {
		selector = 'span';
	} else {
		selector = 'img';
	}

	$('.nav li ' + selector).hover(function() {
		SSS.over(this);
	}, function() {
		SSS.out(this);
	});
},
	
// Swap image to non-rolled-over state
out : function(elt) {
	SSS.setpng(elt, SSS.imagebase + $(elt).attr('id') + '.png');
},
	
// Swap image to rolled-over state
over : function(elt) {
	SSS.setpng(elt, SSS.imagebase + $(elt).attr('id') + '_on.png');
},

// Preload rollover images and set the image name prefix.
preloadimages : function() {
	base = arguments[0];
	SSS.imagebase = base;
		
	for(var i = 1; i").attr("src", base + arguments[i]);
	}
},
	
// Set the source png for an element.
setpng : function(elt, src) {
	if (SSS.IE6) {
		// this is the magic which loads a png, preserving
		// transparency.
		$(elt).css('filter', "progid:DXImageTransform." +
                          + "Microsoft.AlphaImageLoader(src=\'"
                           + src + "\', sizingMethod='scale');");
	} else {
		$(elt).attr('src', src);
	}
}
}

// put this part in your site.js file.  Call preload with the "base" of
// your image file first, then list the files.
// in the example below, I am preloading: 
// media/images/btn_home_on.png, media/images/btn_store_on.png, etc.
/*
$(function() {
	SSS.preloadimages("media/images/btn_", "home_on.png", 
		"store_on.png", "stories_on.png", "lessons_on.png", 
		"boomer_on.png", "company_on.png", "careers_on.png", 
		"contact_on.png");
	SSS.menuinit();
});
*/

Technorati Tags: , , ,

Category: Javascript, Open Source, Tips

Comments

44 Responses to “Semitransparent rollovers made easy with JQuery”

  1. John Resig
    February 3rd, 2007 @ 9:13 pm

    Great walkthrough – do you have a demo setup some where?

    (Also, it seems as if your formatting may have gotten jumbled halfway through your post.)

  2. Bruce
    February 3rd, 2007 @ 11:47 pm

    Thanks for your compliment. I corrected the layout which was pretty messed up from all the code blocks.

    ?
  3. Bruce
    February 3rd, 2007 @ 11:47 pm

    Good idea to make an example. I’ll definitely slap one together.

    ?
  4. Riddle
    February 4th, 2007 @ 6:55 am

    Demo… yeah, that’d be awesome. :-)

  5. Chris Blow
    February 4th, 2007 @ 9:58 am

    would love to see an example before setting it up myself.

    sounds really nice.

  6. Bruce
    February 4th, 2007 @ 10:01 am

    Demo is up.

    ?
  7. Eoghan Murray
    March 2nd, 2007 @ 9:18 am

    Nice example. There is definitely a noticeable delay though before the rollover glow shows in the demos (using firefox). Is this down to .png or jQuery? As a benchmark, it would be constructive to include a second row of links which use a:hover to change the background colour.

  8. Michael
    March 4th, 2007 @ 1:05 pm

    Code above seems to have an error. The first script tags seem to be not correct: src=”media/js/jq-flash.js”
    From your example it appears it should be “pngrollover.js”

  9. charlie inman
    March 30th, 2007 @ 2:24 pm

    Hello, I am looking for a way to make semi transparent images to use for the foreground of my forum instead of colors.

    Do I have to use some kinda script, to do this, or can I just make some transparent .png images somehow and replace regular images?

  10. Bruce
    April 9th, 2007 @ 9:40 am

    Michael, ignore that include. It is from another requirement for the site from which I lifted the demo.

    Charlie, I probably can’t help you very much. This solution probably isn’t for you. The best thing I can advise is for you to explore Photoshop or Imageready. Either will make fine semitransparent PNG files.

    ?
  11. NouvelleBulle d’Ajax » Blog Archive » Transparence de PNG avec rollovers sous JQuery
    September 26th, 2007 @ 6:03 am

    [...] Site : http://coderseye.com/2007/semitransparent-rollovers-made-easy-with-jquery.html  [...]

  12. ScottDavis
    November 23rd, 2007 @ 10:41 am

    Very helpful!
    Are we sure that jQuery(“”).attr(“src”, base + arguments[i]); actually preloads the images? In FF, the first rollover has a lag, subsequent rollovers the timing is instantaneous.

    In SSS.preloadimages(), please help with the first parameter; if no prepended root to the image name, should this value be “/images/” or “images/” or “”?

    There may be a typo in your description above: for(var i = 1; i“).attr(”src”, base + arguments[i]); is different from script pngrollover.js which has for(var i = 1; i

  13. ScottDavis
    November 23rd, 2007 @ 10:44 am

    is less than arguments.length semi-colon i plus plus

  14. Webmaster 38 » Blog Archive » Semitransparent rollovers at ajax scripts compound
    January 3rd, 2008 @ 6:06 pm

    [...] Semitransparent rollovers [...]

  15. Все о jquery на одной странице :: TermiT's Blog
    February 1st, 2008 @ 12:58 pm

    [...] Semi-transparent Rollovers [...]

  16. 65 Excellent jQuery Resources (tutorials,cheat sheets,ebooks,demos,plugins…) | Speckyboy - Wordpress and Design
    April 2nd, 2008 @ 4:04 am

    [...] 11. Rounded Corners 12. Getting Around The Minimum Height Glitch 13. Multiple Fancy Drop Caps 14. Semitransparent rollovers made easy with JQuery 15. Using JQuery to modify presentation while preserving document semantics 16. Fancy Drop Cap 17. [...]

  17. 37 More Shocking jQuery Plugins
    April 9th, 2008 @ 8:00 am

    [...] Semitransparent rollovers -A simple method for enabling semi-transparent rollovers which actually work on IE [...]

  18. 37个更加出色的jQuery插件 | 帕兰映像
    April 9th, 2008 @ 10:54 pm

    [...] Live Demo of LabelOver: Here 4) Semitransparent rollovers -一个简单的脚本，让图像实现半透明效果 [...]

  19. e-octante » 37 plugins para jQuery
    April 10th, 2008 @ 10:51 pm

    [...] de imágenes: , Semitransparent rollovers y Creating A Sliding Image Puzzle [...]

  20. 37 plugins para jQuery « Think Free - Linux.Php.Java.ME.Movies
    April 11th, 2008 @ 2:52 am

    [...] de imágenes: , Semitransparent rollovers y Creating A Sliding Image Puzzle [...]

  21. Как сделать полупрозрачный ролловер на jQuery | JSToolbox
    April 12th, 2008 @ 1:59 am

    [...] Брюсом Крозе (Bruce Kroeze), статью которого можно найти здесь.Шаг 1: создание изображенийДля начала нужно создать [...]

  22. 37 More Shocking jQuery Plugins | SEO & Web Design
    May 6th, 2008 @ 12:02 am

    [...] Semitransparent rollovers -A ultimate method for sanctioning semi-transparent rollovers which actually impact on IE [...]

  23. 37 More Shocking jQuery Plugins | SEO & Web Design
    May 6th, 2008 @ 12:02 am

    [...] Semitransparent rollovers -A ultimate method for sanctioning semi-transparent rollovers which actually impact on IE [...]

  24. Kevin T
    May 8th, 2008 @ 2:05 am

    I have problem with the javascript.. it sort clash with Prototype Framework and Scriptaculous Effects Library. Its either one that wont work.

    Any idea how to solve it.

  25. Recursos jQuery el futuro del JavaScript. | RemediosGraphic Blog de diseño grafico en español
    June 25th, 2008 @ 6:45 pm

    [...] Semitransparent rollovers made easy with JQuery [...]

  26. 20 Amazing jQuery Plugins and 65 Excellent jQuery Resources | Speckyboy - Wordpress and Design
    July 21st, 2008 @ 1:15 am

    [...] 11. Rounded Corners 12. Getting Around The Minimum Height Glitch 13. Multiple Fancy Drop Caps 14. Semitransparent rollovers made easy with JQuery 15. Using JQuery to modify presentation while preserving document semantics 16. Fancy Drop Cap 17. [...]

  27. Graham
    January 16th, 2009 @ 5:25 am

    I need to be able to make one of the menu items selected so its always on the _on state. any ideas?

  28. Daniel
    January 28th, 2009 @ 4:20 pm

    The example link seems to be dead. Do you have the example somewhere else?

  29. sascha
    February 7th, 2009 @ 5:50 am

    Example is down!

  30. 37 More Shocking jQuery Plugins at Expertz
    April 3rd, 2009 @ 7:03 pm

    [...] Demo of LabelOver: Here 4) Semitransparent rollovers -A simple method for enabling semi-transparent rollovers which actually work on IE [...]

  31. jQuery Howto
    April 16th, 2009 @ 2:30 am

    Great article and walkthrough. Thanks for the share. I also would like to share more about the image swapping with jQuery. Since I came across this article searching for exactly this. I hope this would be useful for those who came to this website throught google…

    jQuery Howto’s last blog post..Get geographical location (geolocation) by IP address using jQuery

  32. Best jquery plugins examples,Jquery-css gallery, css scripts showcase ,php scripts,ajax scripts,CMS Drupal,CMS Joomla,CMS WordPress:W3CGallery.com
    October 21st, 2009 @ 5:18 am

    [...] Semitransparent rollovers -A simple method for enabling semi-transparent rollovers which actually work on IE 6. [...]

  33. 37 More Shocking jQuery Plugins | VNAMEDIA Sharing Center
    November 9th, 2009 @ 7:38 pm

    [...] Demo of LabelOver: Here 4) Semitransparent rollovers -A simple method for enabling semi-transparent rollovers which actually work on IE [...]

  34. Rodri
    December 10th, 2009 @ 2:08 pm

    only EI and very slow.

  35. 25+ jQuery plugins
    December 15th, 2009 @ 2:23 pm

    [...] Semitransparent rollovers made easy with JQuery-A simple method for enabling semi-transparent rollovers which actually work on IE 6. [...]

  36. Semitransparent rollovers | jQuery | Ajaxmint - Endless Ajax samples on jQuery, MooTools, ExtJS, Dojo, Prototype and PHP
    December 31st, 2009 @ 1:12 am

    [...] Tutorial  Posted in ajax | Tags: effect, jquery, rollovers, Semitransparent, transperant [...]

  37. 37 More Shocking jQuery Plugins « PSD to HTML , Slicing PSD to HTML
    January 10th, 2010 @ 10:27 am

    [...] Semitransparent rollovers -A simple method for enabling semi-transparent rollovers which actually work on IE [...]

  38. Semitransparent rollovers made easy with JQuery | Niniku 'S Blog
    March 3rd, 2010 @ 6:50 pm

    [...] from:coderseye.com [...]

  39. 37 ???????? jQuery ???????? ? ???????? « WorldSeo
    March 6th, 2010 @ 6:16 am

    [...] 4) ?????? ????????? [...]

  40. 37 ???????? jQuery ???????? ? ???????? « WorldSeo
    March 6th, 2010 @ 6:24 am

    [...] 4) ?????? ????????? [...]

  41. 37 ???????? jQuery ???????? ? ???????? « WorldSeo
    March 6th, 2010 @ 6:30 am

    [...] 4) ?????? ????????? [...]

  42. 37 ???????? jQuery ???????? ? ???????? « WorldSeo
    March 6th, 2010 @ 6:31 am

    [...] 4) ?????? ????????? [...]

  43. dimatter
    March 13th, 2010 @ 2:49 pm

    demo is down. demo is down. demo is down you stupid “message is too short” parser

  44. Bruce
    March 16th, 2010 @ 7:30 am

    Thanks, I re-activated the plugin that provides my downloads and demos.

    ?

Leave a Reply





CommentLuv Enabled

Video & Audio Comments are proudly powered by Riffly