Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.07.2010, 03:48
Интересующийся
Отправить личное сообщение для Madd Посмотреть профиль Найти все сообщения от Madd
 
Регистрация: 05.07.2010
Сообщений: 26

Смена контента из бд при наведении и подсветка.
Доброй ночи.

Объясните, пожалуйста, как реализуется смена контента справа при наведении на иконки, а также подсветка онных.

http://www.playdota.com/heroes

Заранее спасибо, хочу что-то вроде того сделать на своем сайте, а то в их исходном коде запутался.

Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 05.07.2010, 04:17
Аватар для Riim
Рассеянный профессор
Отправить личное сообщение для Riim Посмотреть профиль Найти все сообщения от Riim
 
Регистрация: 06.04.2009
Сообщений: 2,379

innerhtml
Ответить с цитированием
  #3 (permalink)  
Старый 05.07.2010, 10:58
Интересующийся
Отправить личное сообщение для Madd Посмотреть профиль Найти все сообщения от Madd
 
Регистрация: 05.07.2010
Сообщений: 26

Спасибо, но я попробовал что-то написать, исходя из прочитанного, вот такой код: (Проблема в том, что он работает только в FireFox. А в IE и Гугл Хром, картинки убегают за экран, подскажите пожалуйста более оптимальное решение!).
<html>
<head>
<script type="text/javascript"> 
function lig(id) {
	var nowcontent = document.getElementById('d'+id).innerHTML;
	document.getElementById('d'+id).innerHTML = "<div style=\"width:47px; height:47px; background: url('fx2.jpg') no-repeat;padding:0px;margin:0px;padding-top:5px;\">"+nowcontent+"</div>";
}
function oflig(id) {
	document.getElementById('d'+id).innerHTML = "<a href=\"#\" onmouseover=\"lig("+id+")\" onmouseout=\"oflig("+id+")\" style=\"text-decoration:none;\"><img src=\""+id+".jpg\" alt=\"\" border=\"0\"/></a>";
}
</script>
</head>
<body style="background-color: #000;">
<div style="float:left;border-right:1px dotted white;padding:7px;">
<div id="d1" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(1)" onmouseout="oflig(1)" style="text-decoration:none;"><img src="1.jpg" alt="" border="0"/></a></div>
<div id="d2" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(2)" onmouseout="oflig(2)" style="text-decoration:none;"><img src="2.jpg" alt="" border="0"/></a></div>
<div id="d3" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(3)" onmouseout="oflig(3)" style="text-decoration:none;"><img src="3.jpg" alt="" border="0"/></a></div>
<div id="d4" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(4)" onmouseout="oflig(4)" style="text-decoration:none;"><img src="4.jpg" alt="" border="0"/></a></div>
<div id="d5" style="width:47px; height:47px;text-align:center;clear:left;float:left;"><a href="#" onmouseover="lig(5)" onmouseout="oflig(5)" style="text-decoration:none;"><img src="5.jpg" alt="" border="0"/></a></div>
<div id="d6" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(6)" onmouseout="oflig(6)" style="text-decoration:none;"><img src="6.jpg" alt="" border="0"/></a></div>
<div id="d7" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(7)" onmouseout="oflig(7)" style="text-decoration:none;"><img src="7.jpg" alt="" border="0"/></a></div>
<div id="d8" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(8)" onmouseout="oflig(8)" style="text-decoration:none;"><img src="8.jpg" alt="" border="0"/></a></div>
<div id="d9" style="width:47px; height:47px;text-align:center;clear:left;float:left;"><a href="#" onmouseover="lig(9)" onmouseout="oflig(9)" style="text-decoration:none;"><img src="9.jpg" alt="" border="0"/></a></div>
<div id="d10" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(10)" onmouseout="oflig(10)" style="text-decoration:none;"><img src="10.jpg" alt="" border="0"/></a></div>
</div>
<div style="float:left;padding:7px;">
<div id="d11" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(11)" onmouseout="oflig(11)" style="text-decoration:none;"><img src="11.jpg" alt="" border="0"/></a></div>
<div id="d12" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(12)" onmouseout="oflig(12)" style="text-decoration:none;"><img src="12.jpg" alt="" border="0"/></a></div>
<div id="d13" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(13)" onmouseout="oflig(13)" style="text-decoration:none;"><img src="13.jpg" alt="" border="0"/></a></div>
<div id="d14" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(14)" onmouseout="oflig(14)" style="text-decoration:none;"><img src="14.jpg" alt="" border="0"/></a></div>
<div id="d15" style="width:47px; height:47px;text-align:center;clear:left;float:left;"><a href="#" onmouseover="lig(15)" onmouseout="oflig(15)" style="text-decoration:none;"><img src="15.jpg" alt="" border="0"/></a></div>
<div id="d16" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(16)" onmouseout="oflig(16)" style="text-decoration:none;"><img src="16.jpg" alt="" border="0"/></a></div>
<div id="d17" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(17)" onmouseout="oflig(17)" style="text-decoration:none;"><img src="17.jpg" alt="" border="0"/></a></div>
<div id="d18" style="width:47px; height:47px;text-align:center;float:left;"><a href="#" onmouseover="lig(18)" onmouseout="oflig(18)" style="text-decoration:none;"><img src="18.jpg" alt="" border="0"/></a></div>
<div id="d19" style="width:47px; height:47px;text-align:center;clear:left;float:left;"><a href="#" onmouseover="lig(19)" onmouseout="oflig(19)" style="text-decoration:none;"><img src="19.jpg" alt="" border="0"/></a></div>
</div>
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 05.07.2010, 11:29
Интересующийся
Отправить личное сообщение для Madd Посмотреть профиль Найти все сообщения от Madd
 
Регистрация: 05.07.2010
Сообщений: 26

Впрочем решил проблему, сделал через цикл, просто в функции lig() автоматически затухаю циклом все остальные, кроме нужной мне.. Правда кодик немного большой вышел
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменения рисунка при наведении курсора Kenan Bek Events/DOM/Window 24 19.12.2010 20:48
При наведении курсора смена картинки и всплывающая подсказка sly Общие вопросы Javascript 0 06.06.2010 17:53
Смена картнок при наведении на ссылку (для новостей) vinnie Общие вопросы Javascript 30 03.06.2010 15:16
Смена картинки при перезагрузке + наведении Мария Элементы интерфейса 2 22.08.2009 14:57
Событие mouseout при наведении мыши на пункт меню WalterScott Events/DOM/Window 2 12.05.2009 22:05