Динамические элементы в CSS

#1 Вячеслав

Пользователь
383 сообщений

Репутация: 3

Отправлено 10 Декабрь 2008 - 21:57

Нашол в сети такой пример >>>
Изменение фона в таблице.

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

Для этого необходимо написать небольшой обработчик соответствующего события, например, попадание курсора мышки в область таблицы:

При наведении курсора мышки на таблицу она поменяет цвет.

<table id=table onMouseover="table.bgColor='red'" onMouseOut="table.bgColor='white'" bgcolor=white border=1><tr><td>
При наведении курсора мышки на таблицу она поменяет цвет.
</td></tr></table>

При наведении мышки на область таблицы она изменит цвет с белого на красный. Соответственно, когда курсор мышки вновь покинет эту область, она вновь станет белой.

Аналогичным образом можно менять не только цвет, но и фоновый рисунок таблицы.

<<<
Но не могу сообразить как это сделать если код на DIV-ах???
Подскажите кто знает....
Спасибо

Прикрепленные файлы

Основы_CSS.txt 16,62К Количество загрузок: 240

#2 ZiTosS

Неактивные
5 148 сообщений

Репутация: 8

Отправлено 11 Декабрь 2008 - 18:37

1) Вы путаете
CSS - каскадные таблицы стилей. В нем можно задавать классы, идентификаторы, оформления лдля различных элементов, и ничего динамичного, кроме использования хаков в IE + использование ссылочных указателей
:link, :hover и др.

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

В данном случае используются обработчики java script: onMouseOver(при наведении), onMouseOut(При снятии наведения)

Вот тебе пример для блочных элементов DIV'ов

<html>
<head>
</head>
<body>
<div style="background: #c9c9c9;" onMouseOver="this.style.backgroundColor='#000';" onMouseOut="this.style.backgroundColor='#c9c9c9';">
Текст
</div>
</body>
</html>

this - указатель на текущий объект, в котором вызывается событие.
А вообще можно сделать многими способами, например написать собственный обработчик в JS

#3 Вячеслав

Topic Starter

Пользователь
383 сообщений

Репутация: 3

Отправлено 12 Декабрь 2008 - 21:27

Спасибо

#4 Вячеслав

Topic Starter

Пользователь
383 сообщений

Репутация: 3

Отправлено 12 Декабрь 2008 - 21:30

Понятно...Спасибо.
this>>> тоесть в определенном месте указав c помощю THIS какойто элемент , я при новедении курсора могу изменить этот элемент (который находится в другом месте (блоке таблици) ?

#5 ZiTosS

Неактивные
5 148 сообщений

Репутация: 8

Отправлено 12 Декабрь 2008 - 23:09

Нет, не правильно ты меня понял...
Почти у каждого элемента на HTML странице есть обработчики. JS присуще ссылки на объекты(Элементы).
this - указывает на объект из которого вызывается (в примере выше это был DIV как мы видим)
document - ссылается на текущий документ (в нашем примере весь наш HTML документ)
window - ссылается на текущее окно, у которого то же есть определенные свойства, подробнее можно почитать в инете

Или спрашивай тут, что знаю, то отвечу

Предложения пользователей

Динамические элементы в CSS

#1 Вячеслав

Прикрепленные файлы

#2 ZiTosS

#3 Вячеслав

#4 Вячеслав

#5 ZiTosS

Похожие темы

Динамические картинки

Предложения пользователей

Динамические элементы в CSS

#1 Вячеслав

Прикрепленные файлы

#2 ZiTosS

#3 Вячеслав

#4 Вячеслав

#5 ZiTosS

Похожие темы

Динамические картинки

Войти