Semitransparent rollovers made easy with JQuery

semitransparent-rollovers-made-easy-with-jquery

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 pngrollover.js from pngrollover.js.zip 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(); }) pngrollover.js.zip:

/*
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<arguments.length; i++) {
		jQuery("").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();
});
*/
 
FOLLOW US ON: