Прошу хелпа по динамическому меню

DaGGeR · 25.11.2009, 09:40

У меня есть код для динамического меню (эффект перекатывания картинки по вертикали). Загвоздка в том, что я немогу повторить этот код для нескольких кнопок в меню. Происходит копирование первой. Подскажите где ошибка, или как повторить этот код:

Код:

<html>
<head>
<title>Эффект перекатывания</title>
</head>
<body>

<table cellspacing="0">
<tr>
<td>

<style type="text/css">
A.rollover {
 background: url('3.gif');/* Путь к файлу с исходным рисунком */
 
 display: block; /* Рисунок как блочный элемент */
 width: 180px; /* Ширина рисунка в пикселах */
 height: 33px; /* Высота рисунка */
}

A.rollover:hover {background-position:
0px /* Смещение по горизонтали */
-33px; /* Смещение вверх по вертикали */}
</style>

<a href="1.html" class="rollover"></a>
</td>

<td>
<style type="text/css">
A.rollover {
 background: url('4.gif');/* Путь к файлу с исходным рисунком */
 
 display: block; /* Рисунок как блочный элемент */
 width: 180px; /* Ширина рисунка в пикселах */
 height: 33px; /* Высота рисунка */
}

A.rollover:hover {background-position:
0px /* Смещение по горизонтали */
-33px; /* Смещение вверх по вертикали */}
</style>
<a href="1.html" class="rollover"></a>
</td>
</tr>

</body>
</html>

картинки на

http://handmadestudio.narod.ru/3.gif

http://handmadestudio.narod.ru/4.gif

Niemans · 25.11.2009, 11:25

Может быть стоит применять разные классы для разных пунктов меню.

Код HTML:

<html>
<head>
<title>Эффект перекатывания</title>
</head>
<body>

<table cellspacing="0">
<tr>
<td>

<style type="text/css">
A.rollover1 {
background: url('http://handmadestudio.narod.ru/3.gif');/* Путь к файлу с исходным рисунком */

display: block; /* Рисунок как блочный элемент */
width: 180px; /* Ширина рисунка в пикселах */
height: 33px; /* Высота рисунка */
}

A.rollover1:hover {background-position:
0px /* Смещение по горизонтали */
-33px; /* Смещение вверх по вертикали */}
</style>

<a href="1.html" class="rollover1"></a>
</td>

<td>
<style type="text/css">
A.rollover2 {
background: url('http://handmadestudio.narod.ru/4.gif');/* Путь к файлу с исходным рисунком */

display: block; /* Рисунок как блочный элемент */
width: 180px; /* Ширина рисунка в пикселах */
height: 33px; /* Высота рисунка */
}

A.rollover2:hover {background-position:
0px /* Смещение по горизонтали */
-33px; /* Смещение вверх по вертикали */}
</style>
<a href="1.html" class="rollover2"></a>
</td>
</tr>

</body>
</html>

Достаточно разделить классы.
А вообще про спрайты вам в хелп этот линк.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
3D меню	klikklik	Технологии Flash	14	13.01.2010 16:10
Меню на cms DLE, вид меню, папки (открыты, закрыты)	74ivan74	Кальянная	0	12.08.2009 20:03
Меню...	Shtrenyov	ASP, Perl, PHP и MySQL	2	26.10.2006 23:33
Меню	Shtrenyov	HTML, CSS, JavaScript	13	09.01.2006 11:45
Что не так с меню.....	ivan341	Зал дебютантов	7	09.12.2005 02:32

25.11.2009, 09:40
Ссылки