Сдвиг background'a

[n1ko]

Доброе утро Мыслители.
Есть фоновое изображение с иконками. Ширина 60 пикселей, высота 90.
Допустим, что изначально стоит иконка с позициями (0 -30px)? но я не знаю второй координаты. Могу ли я сместить позицию на (-30px -30px)?
Спасибо заранее, буду благодарен.

[Aetae]

Можете.
Вообще бессымсленный вопрос, никто кроме вас вашу "картинку с иконками" не видел.
Если допустить что все иконки там 30пх на 30пх, то в изначальном варианте у вас выбрана 1-я иконка 2-го ряда, во втором случе станет 2-я иконка 2-го ряда.

[n1ko]

Можете.

Спасибо за столь насыщенный ответ. Теперь я буду знать что могу. А как не подскажете?

[Aetae]

<div style="
background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
width:76px;
height:76px;
"
onclick="this.style.backgroundPosition='-76px 0';">
</div>

[n1ko]

<div style="
background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
width:76px;
height:76px;
"
onclick="this.style.backgroundPosition='-76px 0';">
</div>

Я же писал, второй координаты (вертикальной) я не знаю и не могу знать. Если я сделаю так, то он меня перенесёт в верхний правый угол. А нужно только вправо сдвинуть.

[melky]

условие - размеры переданы в пикселях. в объекте указывается дельта (x-x0).

function lol(el, deltaObj/*{x:"+2",y:"-5"}*/){

    var pos = document.body.style.backgroundPosition||getComputedStyle(el,null).backgroundPosition;
    
    if(pos.match(/^(\d+)px\s(\d+)px$/))
        pos = { "x" : +RegExp.$1, "y" : +RegExp.$2 };
    else
        pos = { "x" : 0, "y" : 0 };
    
    el.style.backgroundPosition = pos.x + +(deltaObj.x||0) +"px "+(pos.y+ +(deltaObj.y||0))+"px";
}

<script>
function lol(b, c) { var a = document.body.style.backgroundPosition || getComputedStyle(b, null).backgroundPosition, a = a.match(/^(\d+)px\s(\d+)px$/) ? {x:+RegExp.$1, y:+RegExp.$2} : {x:0, y:0}; b.style.backgroundPosition = a.x + +(c.x || 0) + "px " + (a.y + +(c.y || 0)) + "px" }
</script>
<div style="background:url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) 84px 0px;width:76px; height:76px;" onclick="lol(this, {x:10, y:5});"></div>

[n1ko]

Спасибо! Только сделал проще.
$('.button').live("mouseover", function(){
var bg = $(this).css('background-position');
var bg = bg.split(' ');
$(this).css({
'backgroundPosition': '-30px '+bg[1]
});
});