I have a frog logo (that I’ve setup to be a sprite). Basically I want the frog logo in the upper left part of the page and I want it to turn from green to red when you hover over it (I also eventually want to link it to a page).
Here’s the relevant code so far, sorry- I know it’s probably atrocious but I’m really new.
Any help appreciated! Eventually I want to have text floating to the right of the image, but I’m really new to all CSS so even simple tasks are really difficult for me.
This method means the link text is there but covered by the sprite image, with is placed over the top of it inside a span element.
But, ideally, the background of the frog image should be opaque (if, say the site bg is white, make the image bg white) and then you can get rid of this role for maximum accessibility:
.froglogo a {margin-left: -9999px;}
However, your frog image is not evenly balanced, so the hover doesn’t work properly. Make sure the dimensions of each half of the image are exactly the same so the the hover works seamlessly.
That’s pretty close. The slight jump is due to the top and bottom parts of the image not being exactly the same size. Is there anything else you think is not working?
Great, glad that fixed it. I think the image is OK, except that there is a slight overlap of frogs. If you put a bit more space between it should be OK. You’ll just have to adjust the negative top setting on hover:
When I make sprites, I create one image, then duplicate and color the duplicate differently. Then I know each image is exactly the same size. Then I create a new Ps file twice the height of the originals, place the two images in there top and bottom, and then I’m sure the measurements are all right.