Tag: css-sprites
Nabin Nepal (Starx) css css-sprites hover inline sprites
March 8, 2012

css sprites – a hover with images not loading correctly

Question by bryceadams

bryceadamsbryceadams

I have some css sprites on my site in the header but when the page loads it often loads several of the 8 separate images just below where it’s meant to be. Then I wait a few seconds or hover my mouse over them and it goes back to the correct positions.

Here’s my CSS:

.x {
display: inline-block }
.x a {
display:block;
width:100px;
height:100px;
overflow:hidden;}
.x a:hover img {
margin-left:-100px;}

and then the HTML goes like this:

<div class='x'><a href='link' alt='y'><img src=
'image' /></a></div> &nbsp;
<div class='x'><a href='link' alt='y'><img
src='image' />
</a></div>

for 8 separate 100×100 squares in a row.

Answer by Starx

StarxStarx

The way to define css sprite is a bit different then how you are doing it.

Here is an example of how this can be achieved.

/* This is how to define a main image
.sprite { background: url("../link/to/spriteimage.png") 0px 0px; width: 32px; height: 32px; }

/* Assign an image like this way, by changing the position
.sprite.icon1 { background-position: -32px -32px; }
.sprite.icon1_hover { background-position: -64px -32px; }

Demo

Nabin Nepal (Starx) css css-sprites
June 18, 2010

Background-position in css

Question by Mubeen

MubeenMubeen

Can we use more than 2 images for single navigation. That means when we hover on that image it will shows 6 different images. Is it possible to make for a single navigation image? If possible means how?

I think you are all understand this

alt text

Answer by Jouke van der Maas

Jouke van der MaasJouke van der Maas

You can (at the moment – cross browser) only set one bg image on an element. If you want to change it on hover or whatever, just add an a-tag with href set on #:

<a class="img" id="thatoneimg" href="#"></a>

And then in the css:

a.img {
  width: 100px;
  height: 100px;
}
a#thatoneimg {
  backround-image: url(staticimg.jpg);
}
a#thatoneimg:hover {
  backround-image: url(movingimg.gif);
}

That should work cross browser. You need the a-tag for it to work in IE.

Edit:
As Starx said, just make the second image a .gif with an animation. It will not use sprites but it will work.

Answer by Starx

StarxStarx

If I understood you correctly, you want to continously change the position of your background image while you hover over one button.

If that’s right, then I suggest making a static image as background image and changing the image to a GIF animated image on hover

...

Please fill the form - I will response as fast as I can!