CODEWITHSUNDEEP
jqueryhtmlcsssprite
Pentium10
Pentium10

Reputation: 207838

How to use sprite images in html/css and toggle change with jQuery

I am trying to use it this way:

CSS

#sprite2 {
   background: url(../images/csg_sprite.png) no-repeat top left;
}

.collapse_down{ background-position: 0 0; width: 16px; height: 16px; } 
.collapse_up{ background-position: 0 -66px; width: 16px; height: 16px;  }

HTML

<div id="sprite2"><span id="splink1" class="collapse_down">Defaults</span>

CHANGE by jQuery

$('#splink1').attr("class", 'collapse_up');

The problem I face is that the image is applied for the div=sprite2 and not for the span I want for.

How to fix so on the left of the text to display the sprite, and when I toggle it, to change the image to up.

Upvotes: 2

Views: 2530

Answers (2)

ArK
ArK

Reputation: 21058

.sprite2 {
   background: url(../images/csg_sprite.png) no-repeat top left;
   display:inline-block;
}

<div  id="splink1" class="sprite2 collapse_down"></div>Defaults

background position property applied only when id or class which includes background image added to it .

Upvotes: 1

user229044
user229044

Reputation: 239250

Pretty simply:

Change your CSS from this:

#sprite2 {
   background: url(../images/csg_sprite.png) no-repeat top left;
}

to this:

#sprite2 span {
   background: url(../images/csg_sprite.png) no-repeat top left;
}

Upvotes: 1

Related Questions