0

Можно ли это:

.bgbutton{
    background-image: url("lglogo2.png");
    width: 89px;
    height: 29px;
    background-repeat: no-repeat;
    float: left;
}
.bgbutton:active{
    background-position: 0px 1px;
}

Встроить в это или как нибудь совместить?:

a.rollover {
    background:  url('lglogo1.png') 0 0 no-repeat;
    display: inline-block;
    margin-right: 176px;
    vertical-align: middle;
    width: 89px;
    height: 29px; 
    padding: 0px;
   }
   a.rollover:hover {
    background: url('lglogo2.png') 0 0 no-repeat;
}

Если можно то как? И как это будет выглядеть в html?

2 ответа 2

1

Почитайте про css-свойство background:

background: [background-attachment || background-color || background-image 
  || background-position || background-repeat] | inherit

То-есть, оно включает в себя другие css-свойства, в том числе и background-position. В вашем коде для a.rollover:hover собраны свойства background-image, background-position и background-repeat. Соотвтественно вам нужно сделать вот так:

a.rollover:hover {
    background: url('lglogo2.png') 0 1px no-repeat;
}

для достижения желаемого эффекта.

UPD.

Псевдо-класс :active

a.rollover:active {
    background: url('lglogo2.png') 0 1px no-repeat;
}
5
  • смещение идет при наведении, а нужно при нажатии
    – Kamilplus
    15 апр 2012 в 17:01
  • Вы наверняка что-то напутали в css. Проверьте внимательно.
    – mantigatos
    15 апр 2012 в 17:17
  • в нажатом и не нажатом виде все отображается корректно! сдвиг происходит отлично! Проблема в том что у меня все ссылки выделяются цветом при наведении на них курсора и эта картинка-ссылка тоже при наведении окрашивается этим цветом! Как это можно исправить?
    – Kamilplus
    15 апр 2012 в 17:22
  • например сделайте разные классы для всех ссылок и для этой картинки-ссылки и напишите для каждого из этих классов свои правила.
    – mantigatos
    15 апр 2012 в 17:59
  • можете привести примеры классов для картинки-ссылки, пожалуйста?
    – Kamilplus
    16 апр 2012 в 11:20
0

Напишите небольшой javascript для этого случая, там есть и необходимые события мыши. Собственно для такой ситуации - решение единственное. <обрашение к объекту>.style.<имя свойства> = <значение>

соответественно задайте

<button class="bgbutton" onclick="func(this)"></button>

а для javascript:

function func(a) {
   a.style.backgroundPosition = "0 1px"
}

Как то так или около того, в сущности зависит от того как использовать. К сожалению не все свойства CSS есть в возможностях JS (CSS3 - спорный момент), но почти все.

1
  • Первая строка делает из картинки-ссылки кнопку а вторая, я не разобрался как её применить а если разобрался то эффекта нажатия не получилось.
    – Kamilplus
    16 апр 2012 в 3:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.