Hey, if you can help simplify this, great!
1. Different size images.
2. *Some* images have 'hover' effects.
3. Classes within the sprite are named the same as the originating image
name.
4. When images are added/changed/removed and the sprite is regenerated,
need to be able to copy/paste the auto-generated positioning CSS.
Current approach, is to:
* name hover images with a 'hover-' prefix.
* package the images into a zip and use
http://spritegen.website-performance.org/ to create the sprite and
positioning css.
* for hover elements ensure the 'hover-' class is first in the class list.
* use the hover function below to grab all 'hover-' elements, and attach
the switching code.
One of the driving factors here is to simplify on-going maintenance. We
have ~100 images, so changes to the sprite need to be easy to integrate
to the code base.
~ ~ Dave
Glen Lipka wrote:
Let's slow down a little. I think this might be much easier than you
imagine.
Let's go over the requirements.
1. You have different shaped buttons.
2. Each button has a "hover".
3. You want to add all the hover handlers using jQuery.
Does this sound correct? Add to this list, but keep it straightforward.
Can you post some of the other sized button images?
I think I could help whip this up pretty quickly.
Glen
On Dec 4, 2007 6:43 PM, DaveG <[EMAIL PROTECTED]
<mailto:[EMAIL PROTECTED]>> wrote:
A slightly better working version:
jQuery(document).ready(function() {
jQuery("[EMAIL PROTECTED]'sprite-hover-']").hover(
function(){
jQuery(this).addClass(
this.className.replace(/sprite-hover-(\w+)-off/gi,
'sprite-hover-$1-on') );
// jQuery(this).attr('class',
this.className.replace(/sprite-hover-(\w+)-off/gi,
'sprite-hover-$1-on') );
},
function(){
jQuery(this).removeClass(
this.className.match(/sprite-hover-(\w+)-on/gi) );
// jQuery(this).attr('class',
this.className.replace(/sprite-hover-(\w+)-on/gi,
'sprite-hover-$1-off') );
}
);
});
This adds/removes a class. My guess is that replacing the entire class
is causing the hover event to retrigger for some reason, whereas adding
replacing classes does not.
~ ~ Dave
