Все записи с меткой ‘Ссылка’
0
Декорирование ссылки бэкграундом
Ссылки можно украсить разными способами, подчеркнуть, сменить цвет, сменить размер, и т.д. Но в этом примере рассмотрим украшение ссылки бэкграундом, т.е. картинкой на заднем фоне. Для этого понадобится любая картинка, которая будет служить задним фоном, и следующий код.
CSS-код:
a:link, a:visited {
text-decoration : none;
}
a:hover {
background: url(background.gif) repeat;
}Пример, того что получится, можно посмотреть здесь.
Работоспособность:
Internet Explorer 8 
Firefox 3.5.4
Opera 9.64
Картинка которую я использовал в качестве фона в примере можно взять здесь.
Всплывающая картинка при наведении на ссылку
Сразу пример того, что получится, а потом уже код.
Собственно тому, что получается при использовании данного примера, можно придумать много применений, но первое – это конечно меню.
CSS-код:
ul {
position: relative;
width: 100px;
list-style: none;
}
li {
border: 1px solid;
margin: 2px;
padding-left: 5px;
}
a {
display: block;
}
a img {
display: none;
position: absolute;
top: 0;
border: 0;
left: 100%;
}
a:hover img {
display: block;
}HTML-код:
<ul>
<li><a href="#"> Jemand <img src="image-when-hover-on-link.gif" /></a></li>
<li><a href="#"> Lyces <img src="image-when-hover-on-link.gif" /></a></li>
<li><a href="#"> Светлая <img src="image-when-hover-on-link.gif" /></a></li>
</ul>Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64