Semitransparent rollovers made easy with JQuery

February 3rd, 2007 · 25 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>  <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: javascript, png, rollover, jquery

Tags: Tips · Open Source · Javascript

Bookmark this article

del.icio.us:Semitransparent rollovers made easy with JQuery

digg:Semitransparent rollovers made easy with JQuery

spurl:Semitransparent rollovers made easy with JQuery

wists:Semitransparent rollovers made easy with JQuery

simpy:Semitransparent rollovers made easy with JQuery

newsvine:Semitransparent rollovers made easy with JQuery

blinklist:Semitransparent rollovers made easy with JQuery

furl:Semitransparent rollovers made easy with JQuery

reddit:Semitransparent rollovers made easy with JQuery

fark:Semitransparent rollovers made easy with JQuery

blogmarks:Semitransparent rollovers made easy with JQuery

Y!:Semitransparent rollovers made easy with JQuery

smarking:Semitransparent rollovers made easy with JQuery

magnolia:Semitransparent rollovers made easy with JQuery

segnalo:Semitransparent rollovers made easy with JQuery

gifttagging:Semitransparent rollovers made easy with JQuery

25 responses so far ↓

1 John Resig // Feb 3, 2007 at 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 // Feb 3, 2007 at 11:47 pm

Thanks for your compliment. I corrected the layout which was pretty messed up from all the code blocks.
3 Bruce // Feb 3, 2007 at 11:47 pm

Good idea to make an example. I’ll definitely slap one together.
4 Riddle // Feb 4, 2007 at 6:55 am

Demo… yeah, that’d be awesome.
5 Chris Blow // Feb 4, 2007 at 9:58 am

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

sounds really nice.
6 Bruce // Feb 4, 2007 at 10:01 am

Demo is up.
7 Eoghan Murray // Mar 2, 2007 at 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 // Mar 4, 2007 at 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 // Mar 30, 2007 at 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 // Apr 9, 2007 at 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 // Sep 26, 2007 at 6:03 am

[…] Site : http://coderseye.com/2007/semitransparent-rollovers-made-easy-with-jquery.html […]
12 ScottDavis // Nov 23, 2007 at 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 // Nov 23, 2007 at 10:44 am

is less than arguments.length semi-colon i plus plus
14 Webmaster 38 » Blog Archive » Semitransparent rollovers at ajax scripts compound // Jan 3, 2008 at 6:06 pm

[…] Semitransparent rollovers […]
15 Все о jquery на одной странице :: TermiT's Blog // Feb 1, 2008 at 12:58 pm

[…] Semi-transparent Rollovers […]
16 65 Excellent jQuery Resources (tutorials,cheat sheets,ebooks,demos,plugins…) | Speckyboy - Wordpress and Design // Apr 2, 2008 at 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 // Apr 9, 2008 at 8:00 am

[…] Semitransparent rollovers -A simple method for enabling semi-transparent rollovers which actually work on IE […]
18 37个更加出色的jQuery插件 | 帕兰映像 // Apr 9, 2008 at 10:54 pm

[…] Live Demo of LabelOver: Here 4) Semitransparent rollovers -一个简单的脚本，让图像实现半透明效果 […]
19 e-octante » 37 plugins para jQuery // Apr 10, 2008 at 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 // Apr 11, 2008 at 2:52 am

[…] de imágenes: , Semitransparent rollovers y Creating A Sliding Image Puzzle […]
21 Как сделать полупрозрачный ролловер на jQuery | JSToolbox // Apr 12, 2008 at 1:59 am

[…] Брюсом Крозе (Bruce Kroeze), статью которого можно найти здесь.Шаг 1: создание изображенийДля начала нужно создать […]
22 37 More Shocking jQuery Plugins | SEO & Web Design // May 6, 2008 at 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 6, 2008 at 12:02 am

[…] Semitransparent rollovers -A ultimate method for sanctioning semi-transparent rollovers which actually impact on IE […]
24 Kevin T // May 8, 2008 at 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 // Jun 25, 2008 at 6:45 pm

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

Coder’s Eye

A site about one of the three passions in my life.