Форум Flasher.ru

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)
-   HTML/DHTML/CSS/JS/VB (http://www.flasher.ru/forum/forumdisplay.php?f=66)
-   -   Динамическая смена класса (http://www.flasher.ru/forum/showthread.php?t=113296)

Liox 24.06.2008 14:58
Динамическая смена класса
 
Как возможно поменять класс или его свойство при наведении мыши на какой-то div

Код:
<div class="c_content" onMouseOver="this.className='roll_content'" onMouseOut="this.className='c_content'">
при наведении мыши меняется класс(класс изменяет цвет фона).
Однако этот вариант не проходит валидацию.

Можно это делать через свойство:
Код:

#c_content:hover { background:"color"  }
Однако этот вариант не работает в IE.

Однако валидно и в IE реализовано на сайте
http://www.drive.ru/bmw/news/2008/06...oldovstva.html

Помогите пожалуйста.

Йожег 24.06.2008 16:57
Зачем тут вообще JS? не проще ссылку сделать блоком и установить в hover бэкграунд?
P.S. если не проще делается всё просто document.getElementById(id).style.background = 'red'

Liox 25.06.2008 02:32
Ваш второй вариант тоже не валиден, т.к. в нём надо на функцию всёравно ссылаться.

Йожег 25.06.2008 10:48
вопрос был "Как возможно поменять класс" вам ответили, через style, готовый когд по примеру преведённому вами приблезительно выглядит так:
<script language="javascript">
function redColBg(p) {
bg = p.style
bg.background = '#d00101'
}
</script>

<div onclick="redColBg(this);"></div>

Liox 25.06.2008 12:20
Йожег:
Если вы внимательно читали мой пост, то там написано, что вариант с применением ссылки на javascript функцию из блока <div> не проходит валидацию. Это WC3 Validation. Вы ведь знаете о такой?

Йожег 25.06.2008 13:31
Liox в вашем посте вы утверждаете что не валидно, и не работает то что вы написали с ошибками.
вот пример с моей последней работы, бэкграунд+прозрачность
Код:
<style type="text/css">
.head, a.head:link, a.head:active, a.head:visited {
        width: 220px;
        float: left;
        height: 72px;
        margin: 10px 25px 0 0;
        display: block;
        opacity: 0.7;
  MozOpacity:  0.7;
  KhtmlOpacity :  0.7;
  filter: alpha(opacity=70);
        font: 13px/14px Tahoma;
        color: #000;
        background: red;
}
a:hover.head  {
        opacity: 1;
  MozOpacity:  1;
  KhtmlOpacity :  1;
  filter: alpha(opacity=100);       
        background: yellow;
}
</style>
<body>

                <a class="head" href="#"><div class="headText">Информация <br>для всех</div></a>
        <a class="head" href="#"><div class="headText">Телефонный <br>справочник</div></a>
        <a class="head" href="#"><div class="headText">Поиск по сайту</div></a>
</body>
как делается в яваскрипте я уже написал, про валидность спорить не буду, это всем уже порядком надоело, делайте как знаете :p

Liox 25.06.2008 16:03
Да нет же вы всё опять не так поняли. Те способы что я выше указал, они в любом случае не подойдут. Их я привёл для того, чтобы показать, то чего я хочу добится и что мне явно не подходит. Мне нужен валидный код, и работа во всех браузерах.

То что вы предлагаете менять подсветку у текста, мне ведь не это надо. И при этом текст ещё создаёт анимацию руки(для нажатия на ссылку). Если бы вы потрудились перейти по ссылке, которую я предоставил, то увидели бы для чего используется изменение цвета фона.
Кстати вашь пример совсем не правелен с позиции семантики. Блочные элементы не правильно заключать в строчные.

Думаю что единственный действенный способ это применение *.htc только он сильно грузит проц, попробую немного изменить ето.

Йожег 25.06.2008 16:21
P.S курсор меняется свойством cursor
приведённый на сайте пример - извращение, неужели такие лаги, загрузка проца стоят валидности которая по смыслу не отменяет кросбраузерность?

Liox 25.06.2008 19:18
Приторможение конечно имеет место быть. Но только если у смотрящего ie 6.0. И тормознутый проц :) . Расчитывая на то что страницы у меня всётаки будут не такие обьёмные как на этом сайте. То это меньшее зло. Вобщем метод простой, просто нужно добавить следующее:
Код:
<![if lt IE 7]>
<![if gte IE 5.5]>
<link rel="stylesheet" href="ie6.css"  type="text/css" media="screen" />
<![endif]>
<![endif]-->
А в этом стиле прописать
Код:
BODY{
behavior:url('csshover.htc')
}
И всё будет работать как надо. Скачать csshover.htc можно где угодно. В гугле очень много ссылок на него.

KidsKilla 26.06.2008 03:03
1) 1й вариант вполне себе валиден. тэг только закройте, да регистр весь в нижний.
2) http://www.artlebedev.ru/tools/techn...ml/css2_in_ie/
3) по-хорошему нужно делать так (атрибуты в нижнем регистре):
Код:
<div onmouseover="this.className += 'my_class';" onmouseout="this.className = this.className.split('my_class').join('');"></div>
приведённый код выше -- хтмл транзиншл. валидный. если нужен стрикт, потрудитесь сперва спецификацию прочитать, прежде чем постить сюда.

+ тут наблюдается совершенно идиотское стремление к валидации ради самой валидации.
вопрос на засыпку: на кой она вам, если работает и так и сяк?

Liox 26.06.2008 11:39
Если вы не признаёте валидацию как таковую, действительно спорить не о чём. А зачем тогда применять div вёрстку, оптимизацию и т.д.? Всё ведь и так работает, просто нарезать шаблон в редакторе на картинки и всё замечательно.

На протяжении всей вёрстки я старался сохранить валидный код, было бы глупо после всех усилий, оставить две ошибки в коде и загубить все старания :) .

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

Kidskilla: Но за помощь спасибо. У меня кстати transitional. До стрикта ещё не дорос, там более жёсткие рамки.

KidsKilla 26.06.2008 14:27
я не говорил о непризнании валидации. я говорил о том, что сейчас я вижу слепое следование тому что скажет всемогущий скрипт ватрицы без понимания а на кой оно надо.
почитайте, эту и эту статьи, много нового откроете. блог, а особенно учебник тоже обязательны к изучению.

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

значёк, говорите? =)) вот это уже совсем смешно. гордость верстальщика: простой, логичный, удобный и лёгкий в понимании код, а не одобрение его скриптом ватрицы. отдаёте шаблон заказчику, а он вам такого налепит в контенте... вот и нет значка. а код есть.

"стандарты не просто так придуманы..." и снова тёмный лес. стандарты придуманы не "с целью установить рамки безумства верстальщиков" а дабы браузеры работали одинаково и логично. дабы нам, верстальщикам было проще. и никак иначе.

"До стрикта ещё не дорос, там более жёсткие рамки" ничего особенного. прочитайте спецификацию, там всё легко и понятно.


Часовой пояс GMT +4, время: 19:48.

Copyright © 1999-2008 Flasher.ru. All rights reserved.
Работает на vBulletin®. Copyright ©2000 - 2026, Jelsoft Enterprises Ltd. Перевод: zCarot
Администрация сайта не несёт ответственности за любую предоставленную посетителями информацию. Подробнее см. Правила.