Замена изображений в javascript

Renovatio · 16.09.2009, 00:06

Правильно ли сделал замену изображений?

<td class="nav5">
<a href="javascript:void(0)" onMouseOut="rollImage('0','out')" onMouseOver="rollImage('0','over')" onMouseDown="rollImage('0','down')" title="О нас"><img src="img/nav5.gif"></a>
</td>

<head>
<script type="text/javascript" language="javascript">

</script>
</head>

rohard · 16.09.2009, 00:22

Навигация? А не проще в этом случае сделать css'ом (псевдоклассом hover)?

Renovatio · 16.09.2009, 14:19

А как сделать так чтобы после нажатия рисунок изменился?

rohard · 16.09.2009, 15:30

Пример.

Код:

<head>
	<style type="text/css">
	body, div, ul, li {
		margin: 0;
		padding: 0;
	}
	#wrap {
		padding: 20px;
	}
	#menu {
		list-style: none;
	}
	#menu li {
		float: left;
	}
	#menu li a {
		display: block;
		padding: 10px;
		border-top: solid 2px #ccc;
		background-color: #efefef;
		text-decoration: none;
		color: #555;
		font: 13px "Trebuchet MS";
	}
	#menu li a:hover {
		border-top: solid 2px #666;
		background-color: #e7e7e7;
		color: #222;
	}
	#menu li a:active {
		border-top: solid 2px #c77;
	}
	</style>
	<title> ololo </title>
</head>
<body>
	<div id="wrap">
		<ul id="menu">
			<li><a href="#"> first element </a></li>
			<li><a href="#"> second element </a></li>
			<li><a href="#"> third element </a></li>
		</ul>
	</div>
</body>

Если используется изображение, то используй спрайты. То есть один граф. файл с тремя состояниями кнопки. Тогда можно будет не менять изображение целиком, а менять лишь позицию. Пример: background: url(../img/pic.gif) 0 0 no-repeat; по умолчанию и background: url(../img/pic.gif) 128px 0 no-repeat; при hover'е. В этом случае не будут производиться дополнительные запросы на сервер за пикчей и пользователю не придется ждать загрузки при наведении (ибо она уже загружена).

Renovatio · 18.09.2009, 10:10

Я вот никак не могу понять, что это за display:block

rohard · 18.09.2009, 10:29

Цитата:

Сообщение от Renovatio

Я вот никак не могу понимать, что это за display:block

Чтобы элемент вел себя как блок.
Спецификация для кого написана?

Renovatio · 18.09.2009, 18:38

Цитата:

Сообщение от rohard

Чтобы элемент вел себя как блок.

По подробнее можешь объяснить

Regis Filius · 18.09.2009, 18:41

Элементы блочного типа занимают всю доступную ширину, в то время как элементы встроенного типа занимают только ту площадь, которая им необходима. Короче блочные это по умолчанию div, а встроенные span.
Здесь это надо для ссылок, чтобы был эффект кнопки, а не просто ссылочный текст.

rohard · 18.09.2009, 19:02

Я сейчас проверить не могу, но в IE6, скорее всего, будет одна "фича" - при наведение на область отступа ссылок, стиль меняться не будет. Стиль будет меняться только при наведении на текст.

rohard · 18.09.2009, 23:26

Цитата:

Сообщение от rohard

Я сейчас проверить не могу, но в IE6, скорее всего, будет одна "фича" - при наведение на область отступа ссылок, стиль меняться не будет. Стиль будет меняться только при наведении на текст.

Проверил. Естественно, так и есть. Лечится добавлением overflow: hidden; в #menu li