Я расскажу, как можно очень просто при помощи CSS, сделать изменяющуюся картинку-ссылку.
Для начала создадим несколько картинок в фотошоп.
Фоновое изображение:
И кнопки меню.О них подробнее.
Создаем новый файл, где пишем нужным нам шрифтом и цветом название ссылки.
Увеличиваем холст по высоте ровно в два раза.
Копируем слой названия ссылки,сдвигаем вниз и придаем ему вид, который хотели бы получить при наведении курсора на наш пункт меню. Вот что получилось у меня.
Сохраняем в удобном для веб формате.
Теперь перейдем к написанию кода.
Для примера нам будет достаточно создать меню из двух пунктов. Каждому пункту присваиваем свойкласс.
<html>
<head>
<title>Ссылка средствами CSS</title>
</head>
<body>
<ul id="menu">
<li><a href="#" class="home">Home[/url]</li>
<li><a href="#" class="about">About[/url]</li>
</ul>
</body>
</html>
И непосредственно код стилей. Разберем по порядку.
1. Убираем отступы и поля, указываем ширину и высоту нашего меню.
#menu {
list-style: none;
padding: 0;
margin: 0;
width: 500px;
height: 200px;
background: url(fon.gif) no-repeat;
position: relative;
}
2. Скрываем текст, для этого прописываем "text-indent: -900%;".
#menu a {
display: block;
text-indent: -900%;
position: absolute;
outline: none;
}
3. При наведении курсора, картинку сдвигаем вверх.
#menu a:hover {
background-position: left bottom;
}
4. Оформим пункты меню. В первую очередь укажем размер изображения, но тот, который был до увеличения высоты. При помощи правил left и top, разместим наши элементы в поле менюшки.
#menu .home {
width: 131px;
height: 39px;
background: url(home.gif) no-repeat;
left: 77px;
top: 75px;
}
#menu .about {
width: 126px;
height: 39px;
background: url(about.gif) no-repeat;
left: 276px;
top: 77px;
}
Вот так будет отображаться наше меню в брауере.
Все достаточно просто, но это лишь основа, и при желании все можно усложнить и усовершенствовать.
