Смена цвета при наведении

nouqart · September 29, 2010

Добрый день, до изучения верстки всегда привлекало внимание на главной странице у Лебедева - design.ru / artlebedev.ru логотип(сверху, справа), при наведении на него меняется цвет, причем сколько раз навести столько и поменяется.

Объясните новичку как это сделать в рамках html и css?

Спасибо.

psywalker · September 29, 2010

nouqart said:
Добрый день, до изучения верстки всегда привлекало внимание на главной странице у Лебедева - design.ru / artlebedev.ru логотип(сверху, справа), при наведении на него меняется цвет, причем сколько раз навести столько и поменяется.
Объясните новичку как это сделать в рамках html и css?
Спасибо.

В рамках html и css никак, тут без JS не обойтись. Но в принципе сделать это не трудно.

http://forum.htmlbook.ru/index.php?showtop...mp;#entry162262

nouqart · September 29, 2010

psywalker said:
В рамках html и css никак, тут без JS не обойтись. Но в принципе сделать это не трудно.
http://forum.htmlbook.ru/index.php?showtop...mp;#entry162262

Спасибо.

Извиняюсь что создал похожую тему…

CEBEP · September 29, 2010

<!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>
		<title>Untitled Page</title>
		<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
		<script type="text/javascript">
		/*
		функция получает в качестве параметра id элемента и устанавливает ему цвет фона из заданного массива
		*/
			function bgrand(elemId)
			{
				var backgrounds = ['#b3dbff', '#acacff', '#acdbff', '#fff', '#004a80'];
				document.getElementById(elemId).style.background = backgrounds[ Math.floor( Math.random( ) * backgrounds.length ) ];
			}
		</script>
	</head>
	<body>
		<div style="background-color:#b3dbff; width:420px;" id="tmpFon">
			<img src="00000002.gif" onmouseover="bgrand('tmpFon')" onmouseup="bgrand('tmpFon')" alt="Кто-небудь видел детей???" />
		</div>
	</body>
</html>

в действии

sigma77 · September 29, 2010

Как-то так

http://polygon2009.freehostia.com/rndColor/index.html

Но что-то мне подсказывает, что и образование цветов можно в функцию завернуть. Но под вечер уже что-то не очень думается...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="#" media="all" />
		<script type="text/javascript">		
			function rndColor() {
				var r = Math.floor(Math.random()*256);
				var g = Math.floor(Math.random()*256);
				var b = Math.floor(Math.random()*256);
				var rgb = 'rgb(' + r + ',' + g + ',' + b + ')';
				var zzzBl = document.getElementById('zzz');
				zzzBl.style.backgroundColor = rgb;
				zzzBl.onmouseover = function() {rndColor()}}
			window.onload = rndColor;		
		</script>
		<style type="text/css">
			* {margin: 0; padding: 0;}
			div {border: 1px solid black; width: 200px; height: 100px; cursor: pointer;}			
		</style>		
	</head>
	<body>
		<div id="zzz"></div>		
	</body>
</html>

psywalker · September 29, 2010

Какой хороший форум. 5 постов, три решения

CEBEP · September 30, 2010

просто вопрос прикольный

Sign In

Смена цвета при наведении

Question

nouqart

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

psywalker

Link to comment

Share on other sites

nouqart

Link to comment

Share on other sites

CEBEP

Link to comment

Share on other sites

sigma77

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

CEBEP

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information