Смена фона при наведении на ссылку

TavlaD · December 16, 2010

Задача: Есть слой в котором есть 2 ссылки. В зависимости от того на какую ссылку наводим меняется фон этого слоя.

Знания в JS нет. Поискал в Интернете решения, но либо не подходили, либо не работали. Помогите подправить или может кто-то предложит другой вариант

На данный момент имеется.

HTML:

<!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>Test</title>
</head>
<body>
<script type="text/javascript">
document.getElementById('ch').onmouseover=function(){document.getElementById('model')[0].style.cssText='background:url("images/logo_ch.png")'}
document.getElementById('op').onmouseover=function(){document.getElementById('model')[0].style.cssText='background:url("images/logo_op.png")'}
</script>
<div id="model">
Выберите марку
<ul>
<li><a href="#" id="op">Модель 1</a></li>
<li><a href="#" id="ch">Модель 2</a></li>
</ul>
</div>
</body>
</html>

CSS:

#model {
	height:150px;
	background:url(images/logo.png);
	background-repeat:no-repeat;
}

Great Rash · December 16, 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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Test</title>
</head>
<body>
<script type="text/javascript">
document.getElementById('ch').onmouseover=function(){document.getElementById('model').style.cssText='background:url("images/logo_ch.png")'}
document.getElementById('op').onmouseover=function(){document.getElementById('model').style.cssText='background:url("images/logo_op.png")'}
</script>
<div id="model">
Выберите марку
<ul>
<li><a href="#" id="op">Модель 1</a></li>
<li><a href="#" id="ch">Модель 2</a></li>
</ul>
</div>
</body>
</html>

UPD: Слабо найти отличия в коде? :facepalmxd:

TavlaD · December 16, 2010

document.getElementById('ch').onmouseover=function(){document.getElementById('model')[0].style.cssText='background:url("images/logo_ch.png")'}

document.getElementById('op').onmouseover=function(){document.getElementById('model')[0].style.cssText='background:url("images/logo_op.png")'}

в отсутствии выделенного? Исправил у себя, но также при наведении курсора фон не изменился

Great Rash · December 16, 2010

Быть не может. Ссылка на страницу есть?

TavlaD · December 16, 2010

Тестовая страница

Great Rash · December 17, 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>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title>Test</title>
	<link href="test.css" rel="stylesheet" type="text/css" />

	<script type="text/javascript">
		window.onload = function() {
			document.getElementById('ch').onmouseover=function() {
				document.getElementById('model').style.cssText='background:url("images/logo_ch.png")';
			}

			document.getElementById('op').onmouseover=function() {
				document.getElementById('model').style.cssText='background:url("images/logo_op.png")';
			}
		}
	</script>
</head>
<body>

<div id="model">
	Выберите марку

	<ul>
		<li><a href="#" id="op">Модель 1</a></li>
		<li><a href="#" id="ch">Модель 2</a></li>
	</ul>
</div>

</body>
</html>

TavlaD · December 17, 2010

Спасибо. Работает. А такой вопрос. Если я хочу, чтобы когда курсор уходит с ссылки фон менялся на фон по умолчанию, то надо писать на каждую ссылку поведение?

			document.getElementById('ch').onmouseout=function() {
				document.getElementById('model').style.cssText='background:url("images/logo.png")';
			}
			document.getElementById('op').onmouseout=function() {
				document.getElementById('model').style.cssText='background:url("images/logo.png")';
			}

Или можно как-то одной командой вернуть все?

Great Rash · December 17, 2010

Надо описывать поведение каждой ссылки.

TavlaD · December 17, 2010

Ясно. Большое спасибо за помощь. Задачи все решены. Тему можно закрыть

Sign In

Смена фона при наведении на ссылку

Question

TavlaD

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

TavlaD

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

TavlaD

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

TavlaD

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

TavlaD

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information