Add support for the various pseudo-classes (hover, at least)

[GoogleCodeExporter]

If it's at all possible for SpriteMe to recognize and add images used for the 
:hover pseudo-class into the generated sprite and CSS code, this tool would be 
at least 100% more useful and save a ton of work. 

(If I've missed something somewhere that allows this already, please let me 
know.)

Original issue reported on code.google.com by rafael.a...@gmail.com on 9 Feb 2011 at 4:35

[GoogleCodeExporter]

Yes please do this. What is the point of SpriteMe if I have to make a ton of 
little sprites first for it to pick up the image?

Original comment by jnorris...@gmail.com on 26 Jun 2011 at 9:41

[GoogleCodeExporter]

This is the one issue which would keep me from using this really clever tool.

That being said, I was able to get pseudo elements/classes working here:

http://spriteme.mysmilies.com/spriteme.js

In SpriteMe.getBgImages I added an array of pseudo elements to cycle through: 
var pseudos = ["", ":hover", ":after", ":before"];

Passed the pseudo value to SpriteMe.getStyleAndUrl

SpriteMe.getStyleAndUrl then used the value like so: var style = 
elem.ownerDocument.defaultView.getComputedStyle(elem, pseudo);

When a new SpriteMe.ImageElement object is made I passed the pseudo class used 
to make it: new SpriteMe.ImageElement(elem, bgImage, pseudo);

The new .pseudo property is then used in other methods to get position info, 
etc.

It's not 100%, but at least the sprites will be added to the generated 
spritesheet.

Issues:
- When the spritesheet is applied it targets the element without the pseudo 
class (you'll see what I mean).
- When the css is generated I don't think it's understanding how to position 
the spritesheet correctly (I'm seeing 50% 50% on the right arrow on my test 
here: http://test.mysmilies.com/sprites/index2.html )
- I have only tested this in Chrome.

I'd love it if this could find its way into a release! Thanks for the great 
tool.

Original comment by gera...@gmail.com on 30 Mar 2013 at 5:14

Attachments:

• spriteme.js

[GoogleCodeExporter]

An addendum to my previous comment, this only works for pseudo elements like 
:before and :after, not pseudo classes like :hover :\

Original comment by gera...@gmail.com on 30 Mar 2013 at 5:26