Как внедрить CSS-спрайт в существующую переменную Javascript? - PullRequest
Новая
       28

Как внедрить CSS-спрайт в существующую переменную Javascript?

1 голос
/ 12 марта 2011

Я хотел бы добавить изображение спрайта к существующей кнопке, которая ранее использовала свое собственное изображение «play.png», которое я заменил на «spacer.png» (этот элемент уже установлен в фиксированном размере 30x35 пикселей в CSS ). Цель состоит в том, чтобы сохранить http-запросы путем объединения всех таких кнопок play / pauze / next / previous для перехода в один единственный файл sprite.png.

ДАННЫЙ, КОД ВЫХОДА: 

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

Я добавил: 

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

Почему изображение спрайта не отображается? Даже фон не цветной F00, там ничего не появляется ... Только изменение float имеет эффект, означающий, что id соответствует # back-btn, так что это что-то еще ... есть идеи? *

Большое спасибо за ваши предложения !!

1 Ответ

1 голос
/ 12 марта 2011

Вы должны хранить ваши стили в файле CSS, за исключением случаев, когда это абсолютно необходимо (т.е. изменение непрозрачности с помощью Javascript). Добавьте файл CSS на свой веб-сайт (или используйте существующий файл, если он у вас есть) и добавьте следующее объявление: 

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