Форум Flasher.ru
Ближайшие курсы в Школе RealTime
Список интенсивных курсов: [см.]  
  
Специальные предложения: [см.]  
  
 
Блоги Правила Справка Пользователи Календарь Поиск рулит! Сообщения за день Все разделы прочитаны
 

Вернуться   Форум Flasher.ru > Работа над сайтом > HTML/DHTML/CSS/JS/VB

Версия для печати  Отправить по электронной почте    « Предыдущая тема | Следующая тема »  
Опции темы Опции просмотра
 
Создать новую тему Ответ
Старый 24.06.2008, 14:58
Liox вне форума Посмотреть профиль Отправить личное сообщение для Liox Найти все сообщения от Liox
  № 1  
Ответить с цитированием
Liox

Регистрация: Oct 2007
Сообщений: 115
По умолчанию Динамическая смена класса

Как возможно поменять класс или его свойство при наведении мыши на какой-то 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
Йожег вне форума Посмотреть профиль Отправить личное сообщение для Йожег Найти все сообщения от Йожег
  № 2  
Ответить с цитированием
Йожег

Регистрация: Feb 2008
Сообщений: 42
Зачем тут вообще JS? не проще ссылку сделать блоком и установить в hover бэкграунд?
P.S. если не проще делается всё просто document.getElementById(id).style.background = 'red'

Старый 25.06.2008, 02:32
Liox вне форума Посмотреть профиль Отправить личное сообщение для Liox Найти все сообщения от Liox
  № 3  
Ответить с цитированием
Liox

Регистрация: Oct 2007
Сообщений: 115
Ваш второй вариант тоже не валиден, т.к. в нём надо на функцию всёравно ссылаться.

Старый 25.06.2008, 10:48
Йожег вне форума Посмотреть профиль Отправить личное сообщение для Йожег Найти все сообщения от Йожег
  № 4  
Ответить с цитированием
Йожег

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

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

Старый 25.06.2008, 12:20
Liox вне форума Посмотреть профиль Отправить личное сообщение для Liox Найти все сообщения от Liox
  № 5  
Ответить с цитированием
Liox

Регистрация: Oct 2007
Сообщений: 115
Йожег:
Если вы внимательно читали мой пост, то там написано, что вариант с применением ссылки на javascript функцию из блока <div> не проходит валидацию. Это WC3 Validation. Вы ведь знаете о такой?

Старый 25.06.2008, 13:31
Йожег вне форума Посмотреть профиль Отправить личное сообщение для Йожег Найти все сообщения от Йожег
  № 6  
Ответить с цитированием
Йожег

Регистрация: Feb 2008
Сообщений: 42
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>
как делается в яваскрипте я уже написал, про валидность спорить не буду, это всем уже порядком надоело, делайте как знаете

Старый 25.06.2008, 16:03
Liox вне форума Посмотреть профиль Отправить личное сообщение для Liox Найти все сообщения от Liox
  № 7  
Ответить с цитированием
Liox

Регистрация: Oct 2007
Сообщений: 115
Да нет же вы всё опять не так поняли. Те способы что я выше указал, они в любом случае не подойдут. Их я привёл для того, чтобы показать, то чего я хочу добится и что мне явно не подходит. Мне нужен валидный код, и работа во всех браузерах.

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

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


Последний раз редактировалось Liox; 25.06.2008 в 16:06.
Старый 25.06.2008, 16:21
Йожег вне форума Посмотреть профиль Отправить личное сообщение для Йожег Найти все сообщения от Йожег
  № 8  
Ответить с цитированием
Йожег

Регистрация: Feb 2008
Сообщений: 42
P.S курсор меняется свойством cursor
приведённый на сайте пример - извращение, неужели такие лаги, загрузка проца стоят валидности которая по смыслу не отменяет кросбраузерность?


Последний раз редактировалось Йожег; 25.06.2008 в 16:58.
Старый 25.06.2008, 19:18
Liox вне форума Посмотреть профиль Отправить личное сообщение для Liox Найти все сообщения от Liox
  № 9  
Ответить с цитированием
Liox

Регистрация: Oct 2007
Сообщений: 115
Приторможение конечно имеет место быть. Но только если у смотрящего 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 можно где угодно. В гугле очень много ссылок на него.

Старый 26.06.2008, 03:03
KidsKilla вне форума Посмотреть профиль Отправить личное сообщение для KidsKilla Посетить домашнюю страницу KidsKilla Найти все сообщения от KidsKilla
  № 10  
Ответить с цитированием
KidsKilla
.grin! wuz here
 
Аватар для KidsKilla

Регистрация: Aug 2004
Адрес: paradise city
Сообщений: 3,981
Отправить сообщение для KidsKilla с помощью ICQ
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>
приведённый код выше -- хтмл транзиншл. валидный. если нужен стрикт, потрудитесь сперва спецификацию прочитать, прежде чем постить сюда.

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


Последний раз редактировалось KidsKilla; 26.06.2008 в 03:14.
Создать новую тему Ответ Часовой пояс GMT +4, время: 22:55.
Быстрый переход
  « Предыдущая тема | Следующая тема »  
Опции темы
Опции просмотра

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

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


 


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


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