DeTalk.ru - форум о дизайне, искусстве, фотографии, графике, веб-технологиях. Форум дизайнеров, художников, фотографов, веб-разработчиков.
Быстрый поиск:

Здравствуйте, гость ( Вход | Регистрация )

 
Reply to this topicStart new topic
Эфект по событию в Javascript  Эфект по событию в Javascript
Yamoodo
post Feb 27 2012, 02:20 AM
Сообщение #1


Новенький
*

Группа: Пользователь
Сообщений: 9
Регистрация: 10-June 11
Из: Москва
Пользователь №: 8 213
Фотокарточка



Репутация:   1  


Уважаемые специалисты!
Вы могли бы мне подсказать, ка решить такую задачу:
1. есть таблица с несколькими ячейками, в каждой ячейке указан фон картинкой и текст, при наведении на определенную ячейку фон в ней меняется и оформление текста, если убрать курсор - восстанавливается прежнее оформление.
2. при нажатии необходимо чтобы то оформление которое было при наведении на ячейку "фиксировалось", и если до этого было нажато на другую ячейку, то там тоже чтобы сбрасывалось оформление на предыдущее.

Первый пункт я реализовал, см. код, а вот как быть со вторым не знаю sad.gif

Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тест</title>
<script type="text/javascript">
function change_size_1(id) {
    document.getElementById(id).style.color = '#fff';
    document.getElementById(id).style.backgroundImage = 'url(images/size_1b.png)';
};
function source_size_1(id) {
    document.getElementById(id).style.color = '#000';
    document.getElementById(id).style.backgroundImage = 'url(images/size_1a.png)';
};
</script>
</head>
<body onload="MM_preloadImages('images/size_1b.png')">
<table width="40" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="40" align="center" valign="middle" background="images/size_1a.png" id="size_1" onmouseover="change_size_1('size_1')" onmouseout="source_size_1('size_1')" style="cursor:pointer" title="Размер - 35,5 (система размеров RUS)" class="size_1">35,5</td>
<td height="40" align="center" valign="middle" background="images/size_1a.png" id="size_2" onmouseover="change_size_1('size_2')" onmouseout="source_size_1('size_2')" style="cursor:pointer" title="Размер - 35,5 (система размеров RUS)" class="size_1">35,5</td>
<td height="40" align="center" valign="middle" background="images/size_1a.png" id="size_3" onmouseover="change_size_1('size_3')" onmouseout="source_size_1('size_3')" style="cursor:pointer" title="Размер - 35,5 (система размеров RUS)" class="size_1">35,5</td>
</tr>
</table>
</body>
</html>


Заранее благодарен.


--------------------
Как оно а?

Изображение
User is offline
ПрофильPM
Go to the top of the page
+Quote Post
NoordeN
post Jul 31 2013, 07:53 AM
Сообщение #2


Новенький
*

Группа: Пользователь
Сообщений: 4
Регистрация: 19-July 13
Пользователь №: 9 267
Фотокарточка



Репутация:   0  


Не совсем понятна поставленная задача... Можно поподробнее, и желательно с примерами.

_______________________
http://ekaterinburg.stroyportal.ru
User is offline
ПрофильPM
Go to the top of the page
+Quote Post
Slowmo
post May 21 2015, 09:21 AM
Сообщение #3


Новенький
*

Группа: Пользователь
Сообщений: 20
Регистрация: 29-April 15
Пользователь №: 19 651
Фотокарточка



Репутация:   -2  


Самому нужно решить этот вопрос. Никто не подскажет?
User is offline
ПрофильPM
Go to the top of the page
+Quote Post
Начертательная Геометрия
post May 7 2016, 03:01 AM
Сообщение #4


Новенький
*

Группа: Пользователь
Сообщений: 11
Регистрация: 7-May 16
Пользователь №: 26 533
Фотокарточка



Репутация:   0  


Первое можно сделать вообще стилями, а второе - изменением класса.
User is offline
ПрофильPM
Go to the top of the page
+Quote Post
Brumonn
post Feb 20 2017, 03:01 AM
Сообщение #5


Новенький
*

Группа: Пользователь
Сообщений: 11
Регистрация: 14-February 17
Пользователь №: 30 515
Фотокарточка



Репутация:   0  


На JS фиддле бы закинуть и посмотреть
User is offline
ПрофильPM
Go to the top of the page
+Quote Post
« Предыдущая тема · HTML, CSS, JavaScript · Следующая тема »
 

Reply to this topicStart new topic
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0

 





Adobe PhotoshopCorel DrawFlash3dблог по продвижению

© DeTalk.ru 2004-2012
Все права защищены.

SiteProjects - продвижение сайтов



При использовании материалов с сайта, ссылка на DeTalk.ru обязательна!


Текстовая версия