PDA

Просмотр полной версии : Замена изображений в 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">
<!--
//Массив для хранения изображений версий "нажатия"
var overImg = new Array ();
overImg[0] = new Image (24,24);

//Массив для хранения изображений версий "курсор поверх изображения"
var downImg = new Array();
downImg[0] = new Image(24,24);

//Массив для хранения изображений по умолчанию
var defaultImg = new Array ();
defaultImg[0] = new Image (24,24);

//Загрузка over-изображений
overImg[0].src = "img/nav5_2.gif";

//Загрузка down-изображений
downImg[0].src = "img/nav5_1.gif";

//Загрузка изображений по умолчанию
defaultImg[0].src = "img/nav5.gif";

//Изменения состояния изображения в зависимости от пришедшего события
function rollImage(img,type)
{
switch(type)
{
case "over":
document.images[img].src = overImg[img].src;
break;
case "out":
document.images[img].src = defaultImg[img].src;
break;
case "down":
document.images[img].src = downImg[img].src;
}
}

//-->
</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
Я вот никак не могу понимать, что это за display:block

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

По подробнее можешь объяснить
Regis Filius
18.09.2009, 18:41
Элементы блочного типа занимают всю доступную ширину, в то время как элементы встроенного типа занимают только ту площадь, которая им необходима. Короче блочные это по умолчанию div, а встроенные span.
Здесь это надо для ссылок, чтобы был эффект кнопки, а не просто ссылочный текст.
rohard
18.09.2009, 19:02
Я сейчас проверить не могу, но в IE6, скорее всего, будет одна "фича" - при наведение на область отступа ссылок, стиль меняться не будет. Стиль будет меняться только при наведении на текст.
rohard
18.09.2009, 23:26
Я сейчас проверить не могу, но в IE6, скорее всего, будет одна "фича" - при наведение на область отступа ссылок, стиль меняться не будет. Стиль будет меняться только при наведении на текст.

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