X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Динамические элементы в CSS, изменение фона и фонового изображения
toorr2p
toorr2p
Topic Starter сообщение 10.12.2008, 22:57; Ответить: toorr2p
Сообщение #1


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

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

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

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

<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 килобайт ) Кол-во скачиваний: 247
 
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 11.12.2008, 19:37; Ответить: ZiTosS
Сообщение #2


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 :)


Поблагодарили: (0)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
toorr2p
toorr2p
Topic Starter сообщение 12.12.2008, 22:27; Ответить: toorr2p
Сообщение #3


Спасибо
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
toorr2p
toorr2p
Topic Starter сообщение 12.12.2008, 22:30; Ответить: toorr2p
Сообщение #4


Понятно...Спасибо.
this>>> тоесть в определенном месте указав c помощю THIS какойто элемент , я при новедении курсора могу изменить этот элемент (который находится в другом месте (блоке таблици) ?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
ZiTosS
ZiTosS
сообщение 13.12.2008, 0:09; Ответить: ZiTosS
Сообщение #5


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Разработка/доработка сайтов Wordpress, HTML/CSS/JS
Вёрстка, перенос на WP, правки
9 malamut 3463 25.1.2024, 14:36
автор: malamut
Открытая тема (нет новых ответов) СОЗДАНИЕ : / САЙтЫ / ЛЕНДЫ / БОТЫ ТГ / ВАЙТЫ / КРЕО / СОФТЫ / ДИЗАЙН [PHP, JS, HTML/CSS] и другое
5 CULA 3403 19.12.2023, 18:55
автор: CULA
Открытая тема (нет новых ответов) Веб-разработка (HTML, CSS)
1 ViktoriaFE 6459 5.5.2021, 5:22
автор: bekett
Открытая тема (нет новых ответов) Разработка адаптивных вебсайтов. HTML/CSS/WordPress(сайты-визитки, лендинги, корпоративные сайты, интернет-магазины).
0 kozak199110 1667 3.3.2021, 12:22
автор: kozak199110
Открытая тема (нет новых ответов) Продам адаптивный шаблон (css/html/js) под cj/tube сайт
2 zaiko 1434 29.12.2020, 23:49
автор: zaiko


 



RSS Текстовая версия Сейчас: 20.4.2024, 18:19
Дизайн