Let's start at the beginning. Let's assume (work with me here) that autogeneration of sprites and css is the path to ruin. Let's assume 100 images should be manageable in a very easy way. (When you add new images it should take under 3 minutes to update things)
Here a beginning... http://www.commadot.com/jquery/hoverSprite.php Structure is everything. When you set up a good architecture, maintenance is easy. So far in the demo I have. 1. Images are variable size, currently width is variable, if height is variable that is fine, but I would like to see the range of possible heights/widths. 2. Some are hoverable and some not. I use the "canHover" class and the "button" class in tandem to achieve the right selection. Look at the source and go slow. I am sure this doesn't scale for some reason. Show me the images to add and I will show you how it scales. Glen PS. This technique works for a sprite I manage. Rows: 80, Cols: 8. Its gigantic and super easy to manage. On Dec 4, 2007 7:19 PM, DaveG <[EMAIL PROTECTED]> wrote: > > 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 > > > > >
