1

I would like to add a sprite image to an existing button which previously used its own image "play.png" which I replaced with "spacer.png" (this item is already set to a fixed soze of 30x35pixels in the css). Goal is to save http requests by combining all such play/pause/ next/previous buttons to go into one singular sprite.png file.

GIVEN, EXISTING CODE:

var $backBtn = $("<img src='" + LIGHTBOX_PATH + "spacer.png' id='back-btn'/>");
$backBtn.css({opacity:BUTTON_OPACITY}).hover(buttonOver, buttonOut);

I ADDED:

#back-btn{
    background: url(http://website.bla/sprite.png) no-repeat -770px -550px) #F00;
    float:left;
}

Why does the sprite image not show up? Even the background is not F00 colored nothing appears there... Only changing the float does have effect meaning that the id does match the #back-btn so its something else... any ideas'?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Sam
  • 15,254
  • 25
  • 90
  • 145

1 Answers1

1

You should keep your styles in a CSS file except when absolutely necessary (i.e. changing opacity with Javascript). Add a CSS file to your website (or use an existing file if you have one), and add the following declaration:

#back-btn {
  float: left;
  background: url(http://website.org/sprite.png) no-repeat -770px -550px;
}
Dominic
  • 3,304
  • 19
  • 22
  • @ddagradi Thanks +1 updates my question, it does not work yet... piculiar... any advise why? thank you! – Sam Mar 12 '11 at 19:51
  • Can you post a demo of your code online somewhere so we can see how it's all working together? – Dominic Mar 13 '11 at 00:25
  • currently I have commented out rules 137 and 143 and am trying to see hwo text arrows work, but I prefer to have the sprite working... – Sam Mar 13 '11 at 01:03
  • 1
    Try using a `div`, not a `p`. Make sure to set the width and height on your `div`. – Dominic Mar 13 '11 at 02:46
  • Thanks for your advise @ddagradi, have implemented divs, removed p, everything works except background sprite! Even after removing the little error that is currently in your answer (I believe you have one `)` too much. But still no background sprite showing up... strange!? what else could I try? – Sam Mar 13 '11 at 03:12
  • Works now! it was the `)` extra Thanks very much, I accepted your answer. Bravo to us! :) – Sam Mar 13 '11 at 03:41