VPF::Выделение div-а, если он имеет класс ...

Elfet

Дата 30.1.2007, 15:13 (ссылка)

(нет голосов)

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

Репутация: нет
Всего: 16

Как сделать так что-бы выделялись DIV'ы с атрибутом class="EditorButton" ?
Заменить класс на другой произвольный: class="EditorButtonHover"
Вот такая вот конструкция:

Код


            <table class="EditorMenu" border="0">
                <tr>
                    <td id="Bold"><div class="EditorButton"><img src="files/Bold.gif" alt="" /></div></td>
                    <td id="Italic"><div class="EditorButton"><img src="files/Italic.gif" alt="" /></div></td>      
                    <td id="Underline"><div class="EditorButton"><img src="files/Underline.gif" alt="" /></div></td>                                  
                    <td id="Forecolor"><div class="EditorButton"><img src="files/ForeColor.gif" alt="" /><img src="files/arrowIcon.gif" alt="" /></div></td>   
                    <td id="BackColor"><div class="EditorButton"><img src="files/BackColor.gif" alt="" /><img src="files/arrowIcon.gif" alt="" /></div></td>   
                    <td id="Font"><div class="EditorDropdown"> New Counter <img src="files/arrowDropdown.gif" alt="" /></div></td> 
                    <td id="Size"><div class="EditorDropdown"> Normal <img src="files/arrowDropdown.gif" alt="" /></div></td>                     
                    <td id="Undo"><div class="EditorButton"><img src="files/Undo.gif" alt="" /></div></td>
                    <td id="Redo"><div class="EditorButton"><img src="files/Redo.gif" alt="" /></div></td>      
                    <td id="FormatStripper"><div class="EditorButton"><img src="files/FormatStripper.gif" alt="" /></div></td>                    
                </tr>
            </table>

Я нехочу у каждой ячейки прописывать onmouseover & onmouseleave. Я знаю что есть другой способ. Как его реализовать?

Это сообщение отредактировал(а) Elfet - 30.1.2007, 15:43

--------------------

PHP Чат Скрипт

AKS

Дата 30.1.2007, 15:36 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

Код


.EditorButton:hover { /*другое оформление */ }

А для IE можно "подсунуть" behavior с одной функцией, меняющей имя на класса элемента на альтернативный...

Elfet

Дата 30.1.2007, 15:42 (ссылка)

(нет голосов)

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

Репутация: нет
Всего: 16

Мне нужно кроссобраузерно smile

И пример желательно smile

--------------------

PHP Чат Скрипт

AKS

Дата 30.1.2007, 16:04 (ссылка)

(нет голосов)

Загрузка ...

Участник форума

Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52

Как-нибудь так:

Код


.EditorButton { 
    background-color:red;
    behavior:url(Elfet.htc);
}
.EditorButtonHover, .EditorButton:hover {
    background-color:green;
    behavior:url(Elfet.htc);
}

Elfet.htc (для IE):

Код


<public:component lightweight='true'> 
<public:attach event='onmouseout' handler='changeClassName' />
<public:attach event='onmouseover' handler='changeClassName' />
<script type='text/jscript'>
/*<![CDATA[*/
function changeClassName() {
    className = (window.event.type == 'mouseover')
                          ? 'EditorButtonHover'
                          : 'EditorButton';
}
/*]]>*/
</script>
</public:component>

Функцию можно и переписать на тот случай, если имена классов заранее неизвестны...

12345c

Дата 30.1.2007, 16:08 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Код


<B>Частичная подсветка текста по наведению мыши.</B><br>
<style>    a { behavior: url(JsPrimeryCode-43.htc) }
a:hover.aBehavior b,a.hovered b{color:red}

</style>
С использованием behavior для IE:<br>
<a href=#vfr.htm  class=aBehavior>Для <B>перехода</B> нажмите <B>сюда</B></a>

<br><br>
<style>    a.aDefault {color:fuchsia}
a:hover b.HL1{color:yellow}
a.aHighlight b.HL1{color:yellow}

</style>
Без *.htc:<br>
<a href=#vfr.htm class=aDefault onmouseover=this.className='aHighlight' onmouseout=this.className='aDefault'>Для <B class=HL1>перехода</B> нажмите <B class=HL1>сюда</B></a>

JsPrimeryCode-43.htc :

Код


<attach for=element event=onmouseover handler=hig_light>
<attach for=element event=onmouseout handler=low_light>
<script>
function hig_light(){element.className+=' hovered';}
function low_light(){element.className=element.className.replace(/ hovered/,'');}
</script>

Оно и есть кроссбраузерно. Демо: http://js2.ru/example/JsPrimeryCode-43.htm

Ещё вариант подобного кода - здесь, и демо:
http://forum.vingrad.ru/index.php?showtopi...st&p=931979

Другой способ - аттачить события к каждому найденному элементу класса. Тоже 2 решения для типов бр. плюс скрипт обхода документа - заметно сложнее.

Это сообщение отредактировал(а) 12345c - 3.3.2008, 12:43

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

skyboy

Дата 30.1.2007, 16:15 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 10
Всего: 260

Elfet, ещё раз: что сделать надобно? по событию, внезапно у всех элементов с классом EditorButton поменять атрибуты стиля(например, цвет фона или рамку)? так почему бы не редактировать CSS-правило?
"document.styleSheets[0].cssRules[0].selectorText" - так мы из первой по порядку таблицы стилей выбираем первое правило и отображаем содержание селектора.
ИЕ и тут отличился: тот же код для ИЕ должен выглядеть так:
"document.styleSheets[0].rules[0].selectorText"
У отдельного правила можно добраться до любого свойства через свойство style:
"document.styleSheets[0].cssRules[0].style.color = '#F00';" - Gecko-like browsers
"document.styleSheets[0].rules[0].style.color = '#F00';" - IE-like browsers
Т.е. вся сложность - в переборе всех styleSheets и cssRules в поисках строки с селектором, содержащим ".EditorButton " и смене стиля этого правила.
-----------------------------------------------------------------------------------
впрочем, быстрее и логичнее создать правило с атрибутом !important.
с примером - пока помочь не могу, разбирайся сам.
ссылка на док: wdh.suncloud.ru/contents.htm

Zeroglif

Дата 30.1.2007, 16:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66

Мне на ум приходит простейшее, отказаться от стилизования div-a:

- картинку (которая в div-e) обернуть в тег a;
- тегу a задать стиль display:block, займёт div;
- и соответственно при наведении там же в стиле a:hover{background:red};

Elfet

Дата 30.1.2007, 16:30 (ссылка)

(нет голосов)

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

Репутация: нет
Всего: 16

Всем спасибо, проблему уже решил smile

)))

Код


function EditorSetHover(id)
{
    var elem = document.getElementById(id);
    elem.onmouseover = function () {if(this.className != 'EditorButtonCheck')this.className = 'EditorButtonHover';}
    elem.onmouseout   = function () {if(this.className != 'EditorButtonCheck')this.className = 'EditorButton';}
}
EditorSetHover('Bold');
EditorSetHover('Italic');
EditorSetHover('Underline');
EditorSetHover('Forecolor');
EditorSetHover('Backcolor');
EditorSetHover('Undo');
EditorSetHover('Redo');
EditorSetHover('FormatStripper');
EditorSetHover('CheckDesign');
EditorSetHover('CheckHtml');

--------------------

PHP Чат Скрипт

Zeroglif

Дата 30.1.2007, 17:13 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 644
Регистрация: 22.9.2005

Репутация: 28
Всего: 66

Цитата(Elfet @ 30.1.2007, 16:30

)

проблему уже решил

События over/out могут быть очень быстрыми (мышь убежит, а событие не сработает) плюс могут срабатывать для вложенных элементов. Не наставиваю, конечно, но лучше всё-таки положиться на hover (отдельно с костылями для IE, о чём народ писал выше), ну, или вот простейший пример без javascript.

Скрипт в вашем примере делает 10 вызовов одной и той же функции. Каждый вызов стоит денег, лучше сделать один вызов, передать в функцию массив id и пройти по нему циклом. Ещё лучше вместо того, чтобы 10 раз обходить документ в поисках элемента с нужным id, опереться на один родительский элемент, и обойти теги вложенные в этот элемент.

Elfet

Дата 31.1.2007, 10:19 (ссылка)

(нет голосов)

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

Репутация: нет
Всего: 16

Zeroglif, а вот такой вот вариант?

Код


function EditorMouseOver() 
{
    if(this.className != 'EditorButtonCheck')
        this.className = 'EditorButtonHover';
}
function EditorMouseOut() 
{
    if(this.className != 'EditorButtonCheck')
        this.className = 'EditorButton';
}

function EditorSetHover(id)
{
    var elem = document.getElementById(id);
    elem.onmouseover = EditorMouseOver;
    elem.onmouseout   = EditorMouseOut;
}
EditorSetHover('Bold');
EditorSetHover('Italic');
EditorSetHover('Underline');
EditorSetHover('Forecolor');
EditorSetHover('Backcolor');
EditorSetHover('Undo');
EditorSetHover('Redo');
EditorSetHover('FormatStripper');
EditorSetHover('CheckDesign');
EditorSetHover('CheckHtml');

--------------------

PHP Чат Скрипт

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »