LINUX.ORG.RU
Форум — Web-development  

Установка двух значений background

 


0

1

В css описано так: 

 background : url('../resource/icons/32x32/configure.png'),
              -moz-linear-gradient(top, rgb(118, 204, 254) 0%, rgb(68, 172, 232) 100%);
Мне нужно по наведению сделать так: 
 background : url('../resource/icons/32x32/configure.png'),
              -moz-linear-gradient(top, #93d8ff 0%, #4bbdff 100%)
Я мог бы повесить на :hover, но там есть один нюанс - есть условие, по которому это делать не надо. Поэтому повесил на javascript onMouseOver делание, на Out сброс в исходное.

Пишу: 

function POWERMANAGEMENT_PAGE_HOVER(INDEX)
{
 var _IMAGES = new Array("configure", "application-rtf", "hwinfo");
 var _POINT_HOVERED = document.getElementById('point-' + INDEX);

  _POINT_HOVERED.style.backgroundImage = "url('../resource/icons/32x32/" + _IMAGES[INDEX] + ".png')";
  _POINT_HOVERED.style.backgroundColor = "-moz-linear-gradient(top, #93d8ff 0%, #4bbdff 100%)";
}

Ну дык не работает, делается белым и все тут. Картинки нет, фона нет. В скомпилированном стиле firebug показывает: 

Фон
background-color	transparent
background-image	none
background-repeat	no-repeat
background-position	50% 5px, 0 0
background-attachment	scroll, scroll
opacity	1

И как назначить смену только «подкладки» под картинкой?

Ответ на: комментарий от Kalashnikov

Нельзя не в смысле физически. Нельзя в смысле, что тогда будет говнокод - у меня 3 пункта «меню» (на самом деле не меню), У всех пунктов один класс, по id различается фоновое изображение. Если я буду менять класс, то их надо дохрена делать.

AlexCones ★★★
() автор топика
Ответ на: комментарий от AlexCones

Что, какой дофига? Просто эмулируй псевдокласс :hover классом, добавляя/удаляя его по соответствущему ивенту если выполняется твоё условие, а в цсс картинки пропиши для ul.menu li#id.hover { ... }.

Kalashnikov ★★★
()
Ответ на: комментарий от Kalashnikov

Что, какой дофига?

1) Нейтрал
2) Нейтрал ховер
3) Вклечен
4) Включен ховер

+

3 id для задания картинки

Не много ли?

AlexCones ★★★
() автор топика

backgroundColor = "-moz-linear-gradient

градиенты это картинки. то есть backgroundImage = "-moz-linear-gradient....

Umberto ★☆
()
Ответ на: комментарий от AlexCones

Но класс менять нельзя

Достаточно добавлять/удалять дополнительный.

VirRaa ★★★
()
Ответ на: комментарий от AlexCones

псевдокод over: 

 element.className += ' hover';

out: 

 element.className = element.className.replace('hover', '');

CSS: 

 
.cssrule {
    background-image: -moz, -webkit, blah-blah-blah
}
.cssrule.hover {
    background-image: -moz-linear-gradient(top, #93d8ff 0%, #4bbdff 100%), -webkit, blah-blah-blah
}
;

loginame
()
Ответ на: комментарий от AlexCones

У всех пунктов один класс, по id различается фоновое изображение.

Слышал, что классов может быть дохрена у каждого элемента?

mopsene ★★★
()
Ответ на: комментарий от mopsene

Выдергиваешь id, добавляешь нужный класс classID. Потом удаляешь. Все просто же.

mopsene ★★★
()
Ответ на: комментарий от AlexCones

Это был риторический вопрос, в первый раз вижу человека, который не знает, что классов может быть много.

mopsene ★★★
()
Ответ на: комментарий от mopsene

Просто всегда обходился одним классом для элемента, максимум использовал связку class + id.

AlexCones ★★★
() автор топика
Ответ на: комментарий от loginame

element.className += ' hover';

element.className = element.className.replace('hover', ");

Брр, есть же element.classList. Не работает только в ...ну, вы поняли в чём.

Kalashnikov ★★★
()

В общем написал так. Работает, но что-то мне подсказывает, что это монструозно:

<div class = "window-pointer window-pointer-point-0-selected" id = "point-0" onMouseOver = "POWERMANAGEMENT_PAGE_HOVER(0)" onMouseOut = "POWERMANAGEMENT_PAGE_CLEAR()" onClick = "POWERMANAGEMENT_PAGE_SELECT(0)"><b>General Settings</b></div>
    <div class = "window-pointer window-pointer-point-1"          id = "point-1" onMouseOver = "POWERMANAGEMENT_PAGE_HOVER(1)" onMouseOut = "POWERMANAGEMENT_PAGE_CLEAR()" onClick = "POWERMANAGEMENT_PAGE_SELECT(1)"><b>Edit Profiles</b></div>
    <div class = "window-pointer window-pointer-point-2"          id = "point-2" onMouseOver = "POWERMANAGEMENT_PAGE_HOVER(2)" onMouseOut = "POWERMANAGEMENT_PAGE_CLEAR()" onClick = "POWERMANAGEMENT_PAGE_SELECT(2)"><b>Capabilities</b></div>

div.window-pointer
{
 display : block;
 position : relative;
 
 cursor : default;
 
 margin-left : 1px;
 margin-top : 1px;

 border-radius : 3px;
 
 border-width : 1px;
 border-style : solid;
 
 text-align : center;
 font-size : 12px;
 font-family: sans-serif;
                       
 box-shadow : inset 0 0 1px rgba(255, 255, 225, 0.7);
}

div.window-pointer-point-0
{
 color : #000000;
 
 border-color : #ffffff;

 background : url('../resource/icons/32x32/configure.png'),
              rgb(255, 255, 255);

 background-repeat : no-repeat;
 background-position : center 5px,
                       0 0;
}

div.window-pointer-point-1
{
 color : #000000;
 
 border-color : #ffffff;

 background : url('../resource/icons/32x32/application-rtf.png'),
              rgb(255, 255, 255);

 background-repeat : no-repeat;
 background-position : center 5px,
                       0 0;
}

div.window-pointer-point-2
{
 color : #000000;
 
 border-color : #ffffff;

 background : url('../resource/icons/32x32/hwinfo.png'),
              rgb(255, 255, 255);

 background-repeat : no-repeat;
 background-position : center 5px,
                       0 0;
}


div.window-pointer-point-0-selected
{
 color : #ffffff;
 
 border-color : #43ace8;
 
 background : url('../resource/icons/32x32/configure.png'),
              -moz-linear-gradient(top, rgb(118, 204, 254) 0%, rgb(68, 172, 232) 100%);
 background-repeat : no-repeat;
 background-position : center 5px,
                       0 0;
}

div.window-pointer-point-1-selected
{
 color : #ffffff;
 
 border-color : #43ace8;
 
 background : url('../resource/icons/32x32/application-rtf.png'),
              -moz-linear-gradient(top, rgb(118, 204, 254) 0%, rgb(68, 172, 232) 100%);
 background-repeat : no-repeat;
 background-position : center 5px,
                       0 0;
}

div.window-pointer-point-2-selected
{
 color : #ffffff;
 
 border-color : #43ace8;
 
 background : url('../resource/icons/32x32/hwinfo.png'),
              -moz-linear-gradient(top, rgb(118, 204, 254) 0%, rgb(68, 172, 232) 100%);
 background-repeat : no-repeat;
 background-position : center 5px,
                       0 0;
}

div.window-pointer-point-0-selected-hovered
{
 color : #ffffff;
 
 border-color : #43ace8;
 
 background : url('../resource/icons/32x32/configure.png'),
              -moz-linear-gradient(top, rgb(147, 215, 255) 0%, rgb(75, 189, 255) 100%);
 background-repeat : no-repeat;
 background-position : center 5px,
                       0 0;
}

div.window-pointer-point-1-selected-hovered
{
 color : #ffffff;
 
 border-color : #43ace8;
 
 background : url('../resource/icons/32x32/application-rtf.png'),
              -moz-linear-gradient(top, rgb(147, 215, 255) 0%, rgb(75, 189, 255) 100%);
 background-repeat : no-repeat;
 background-position : center 5px,
                       0 0;
}

div.window-pointer-point-2-selected-hovered
{
 color : #ffffff;
 
 border-color : #43ace8;
 
 background : url('../resource/icons/32x32/hwinfo.png'),
              -moz-linear-gradient(top, rgb(147, 215, 255) 0%, rgb(75, 189, 255) 100%);
 background-repeat : no-repeat;
 background-position : center 5px,
                       0 0;
}

div#point-0,
div#point-1,
div#point-2
{
 width : 151px;
 height : 15px;
 
 padding-top : 40px;
}

var POWERMANAGEMENT_ACTIVE_PAGE = 0;

function POWERMANAGEMENT_PAGE_HOVER(INDEX)
{
 var _IMAGES = new Array("configure", "application-rtf", "hwinfo");
 var _POINT_HOVERED = document.getElementById('point-' + INDEX);
 
 if (INDEX != POWERMANAGEMENT_ACTIVE_PAGE)
 {
  _POINT_HOVERED.style.borderColor = "#ceeafa";
  _POINT_HOVERED.style.backgroundColor = "rgb(225, 243, 253)";
 }
 else
 {
 _POINT_HOVERED.className += "-hovered";
 }
}

function POWERMANAGEMENT_PAGE_CLEAR()
{
 var _POINT;
 var I;
 
 for (I = 0; I <= 2; I++)
 {
  _POINT = document.getElementById("point-" + I);
  
  if (I != POWERMANAGEMENT_ACTIVE_PAGE)
  {
   _POINT.style.borderColor     = "#ffffff";
   _POINT.style.backgroundColor = "rgb(255, 255, 255)";
  }
  else
  {
   _POINT.className = _POINT.className.replace("-hovered", "");
  }
 }
}

function POWERMANAGEMENT_PAGE_SELECT(INDEX)
{
 var _POINT;
 var I;
 
 for (I = 0; I <= 2; I++)
 {
  _POINT = document.getElementById("point-" + I);
  
  _POINT.className = _POINT.className.replace("-selected", "");
 }
 
 POWERMANAGEMENT_ACTIVE_PAGE = INDEX;
 
 _POINT = document.getElementById("point-" + INDEX);
 _POINT.className += "-selected";
}

Кастую товарищей из треда: loginame, Kalashnikov, mopsene.

AlexCones ★★★
() автор топика
Ответ на: комментарий от AlexCones

что-то мне подсказывает

Наверно то что занимает несколько экранов, не? Ещё эти капсовые переменные и бсдшные скобки. А цсс вообще выглядит как More. В общем, я ниасилил распарсить это.

В моём варианте выше всё короче.

Kalashnikov ★★★
()
Ответ на: комментарий от Kalashnikov

А цсс вообще выглядит как More

Это где так?

бсдшные скобки

Это как?

В моём варианте выше всё короче.

У вас нет возможности иметь пукт меню активированным со своим стилем и что-бы по ховеру был другой цвет.

AlexCones ★★★
() автор топика
Ответ на: комментарий от Kalashnikov

Продолжай курить маны.

Куда ему еще курить. И так капсом кодит :)

d9d9 ★★★★
()
Ответ на: комментарий от AlexCones

А зачем столько одинаковых строк описывать? Просто делай класс с повторяющимся значениями и пропиши его везде, где надо. И js ужасен, почему ты не хочешь jquery использовать?

mopsene ★★★
()
Ответ на: комментарий от mopsene

А зачем столько одинаковых строк описывать?

Потому, что хз почему, когда я выношу отдельно параметры и отдельно background firefox не воспринимает параметры фона, делает фон и к нему repeat repeat; 100% 100%, 100% 100%; 0 0, 0 0.

AlexCones ★★★
() автор топика
Ответ на: комментарий от AlexCones

ой-йо, пока распарсил :)

я бы так сделал:

CSS: 

 
<style type="text/css">
div.window-pointer {
    display : block;
    position : relative;
    cursor : default;
    margin-left : 1px;
    margin-top : 1px;
    border-radius : 3px;
    border-width : 1px;
    border-style : solid;
    text-align : center;
    font-size : 12px;
    font-family: sans-serif;
    box-shadow : inset 0 0 1px rgba(255, 255, 225, 0.7);
    color : #000000;
    border-color : #ffffff;
    background-color: rgb(255, 255, 255);
    background-repeat : no-repeat;
    background-position : center 5px, 0 0;
    width : 151px;
    height : 15px;
    padding-top : 40px;
}

div.window-pointer.point0 {
    background-image : url('./resource/icons/32x32/configure.png');
}

div.window-pointer.point1 {
    background-image : url('./resource/icons/32x32/application-rtf.png');
}

div.window-pointer.point2 {
    background-image : url('./resource/icons/32x32/hwinfo.png');
}

div.window-pointer.hovered{
    border-color: #ceeafa;
    background-color: rgb(225, 243, 253);
}

div.window-pointer.selected {
    color : #ffffff;
    border-color : #43ace8;
    background-repeat : no-repeat;
    background-position : center 5px, 0 0;
}

div.window-pointer.point0.selected {
    background-image: url('./resource/icons/32x32/configure.png'),
                     -moz-linear-gradient(top, rgb(118, 204, 254) 0%, rgb(68, 172, 232) 100%);
}

div.window-pointer.point1.selected {
    background-image: url('./resource/icons/32x32/application-rtf.png'),
                -moz-linear-gradient(top, rgb(118, 204, 254) 0%, rgb(68, 172, 232) 100%);
}

div.window-pointer.point2.selected {
    background-image: url('./resource/icons/32x32/hwinfo.png'),
                -moz-linear-gradient(top, rgb(118, 204, 254) 0%, rgb(68, 172, 232) 100%);
}

div.window-pointer.selected.hovered {
    color : #ffffff;
    border-color : #43ace8;
    background-repeat : no-repeat;
    background-position : center 5px, 0 0;
}

div.window-pointer.point0.selected.hovered {
    background-image : url('./resource/icons/32x32/configure.png'),
                      -moz-linear-gradient(top, rgb(147, 215, 255) 0%, rgb(75, 189, 255) 100%);
}

div.window-pointer.point1.selected.hovered {
    background-image : url('./resource/icons/32x32/application-rtf.png'),
              -moz-linear-gradient(top, rgb(147, 215, 255) 0%, rgb(75, 189, 255) 100%);
}

div.window-pointer.point2.selected.hovered {
    background-image : url('./resource/icons/32x32/hwinfo.png'),
              -moz-linear-gradient(top, rgb(147, 215, 255) 0%, rgb(75, 189, 255) 100%);
}
</style>

HTML: 

<div class="window-pointer point0 selected" id="point-0"><b>general settings</b></div>
<div class="window-pointer point1" id="point-1"><b>edit profiles</b></div>
<div class="window-pointer point2" id="point-2"><b>capabilities</b></div>

JS: 

<script type="text/javascript">
    'use strict';
    var elements = [
        document.getElementById('point-0'),
        document.getElementById('point-1'),
        document.getElementById('point-2'),
    ];
    
    var powermanagement_active_page = elements[0];
    for(var i = 0; i < 3; i++){
        elements[i].onmouseover = function(){
            this.classList.add("hovered");
        }
        elements[i].onmouseout = function(){
            this.classList.remove("hovered");
        }
        elements[i].onclick = function(){
            powermanagement_active_page.classList.remove("selected");
            powermanagement_active_page = this;
            this.classList.add("selected");
        }
    }
</script>

NoIE, как замечалось выше :)

P.S. В твоем стиле написать не получилось :)

loginame
()
Ответ на: комментарий от AlexCones

AlexCones

Это где так?

Первый селектор целиком, всякие border и font можно и объединить. Во всех остальных одни и те же строки повторяются, видимо ты так и не читал книг или манов раз не знаешь как работать с классами.

AlexCones

Это как?

Это 
{
    как у тебя
}
а не {
    как принято
}

Когда-нибудь наткнёшься на какую-нибудь из фич синтаксиса жс, пару часов помучаешься впустую и осенит, почему скобки именно так принято ставить.

AlexCones

У вас

Не нужно

AlexCones

нет возможности иметь пукт меню активированным со своим стилем и что-бы по ховеру был другой цвет

Ну так добавь. Ещё один класс selected и правила для _что-то_там_.hovered.selected

Kalashnikov ★★★
()
Ответ на: комментарий от Kalashnikov

Во всех остальных одни и те же строки повторяются, видимо ты так и не читал книг или манов раз не знаешь как работать с классами.

Вы вообще мои посты читаете?

А зачем столько одинаковых строк описывать?

Потому, что хз почему, когда я выношу отдельно параметры и отдельно background firefox не воспринимает параметры фона, делает фон и к нему repeat repeat; 100% 100%, 100% 100%; 0 0, 0 0.

Когда-нибудь наткнёшься на какую-нибудь из фич синтаксиса жс, пару часов помучаешься впустую и осенит, почему скобки именно так принято ставить.

Ну и например?

AlexCones ★★★
() автор топика
Ответ на: комментарий от AlexCones

Ну уже ж пытались объяснять в предыдущих темах, но видимо лучше на собственном опыте. Или хотя бы погугли про точку с запятой в яваскрипте.

AlexCones

...firefox не воспринимает параметры фона...

Фиг с ним с этим (хотя у меня чувство что ты что-то не так делаешь), вытащи в общий селектор хотя-бы цвета и градиенты (и добавь остальные префиксы и самое главное - свойство без префикса последним).

Kalashnikov ★★★
()
Ответ на: комментарий от Kalashnikov

Или хотя бы погугли про точку с запятой в яваскрипте.

А что с ней не так?Можно ставить, можно не ставить. Но у меня привычка еще с паскалевских времен.

вытащи в общий селектор хотя-бы цвета и градиенты

Они там как бы разные, если что.

AlexCones ★★★
() автор топика
Ответ на: комментарий от AlexCones

Привычка правильная, но ты таки полуркай, из-за её необязательности есть пара подвоных камней из-за которых скобка в конце строки предпочтительней.

Kalashnikov ★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development