December 26, 2014

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();
});
*/

[tags]javascript,png,rollover,jquery[/tags]

Share and Enjoy:
  • services sprite Semitransparent rollovers made easy with JQuery
  • services sprite Semitransparent rollovers made easy with JQuery
  • services sprite Semitransparent rollovers made easy with JQuery
  • services sprite Semitransparent rollovers made easy with JQuery
  • services sprite Semitransparent rollovers made easy with JQuery
  • services sprite Semitransparent rollovers made easy with JQuery
  • services sprite Semitransparent rollovers made easy with JQuery
  • services sprite Semitransparent rollovers made easy with JQuery

Related posts:

  1. Simple, degradable Flash embedding using jQuery Now that I am doing professional web layouts for clients,...

About Bruce Kroeze

Comments

  1. John Resig says:

    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 says:

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

  3. Bruce says:

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

  4. Riddle says:

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

  5. Chris Blow says:

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

    sounds really nice.

  6. Bruce says:

    Demo is up.

  7. 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 says:

    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. 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 says:

    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. ScottDavis says:

    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

  12. ScottDavis says:

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

  13. Kevin T says:

    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.

  14. Graham says:

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

  15. Daniel says:

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

  16. sascha says:

    Example is down!

  17. jQuery Howto says:

    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

  18. Rodri says:

    only EI and very slow.

  19. dimatter says:

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

  20. Bruce says:

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

Trackbacks

  1. [...] 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. [...]

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

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

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

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

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

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

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

  9. [...] 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. [...]

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

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

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

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

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

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

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

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

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

Speak Your Mind

*