Rollover Image
CSS код:
a.roll {
display:block;
width:в зависимост от картинката;
height:в зависимост от картинката;
background:#fff url(път до картинката) no-repeat;
overflow:hidden;
cursor:link;
}
a.roll img {
visibility:hidden;
}
a.roll:hover {
background:0;
}
a.roll:hover img {
visibility:visible;
border:0;
}


Във a.roll описваме настройките на картинката, която ще е статична( тази, която излиза). Width и Height трябва да са в пиксели.

HTML код:
<a class="roll" href="#" ><img src="път до картинката по време на rollover" alt="" width="в зависимост от картинката" height="в зависимост от картинката" border="0" /></a>


При # в href="" на мястотот на символа поставете желаният линк. width и height тук са само с числа, например: 72.

CSS + HTML код:
<html>
<head>
<title>RollOver Image-®Photsohop-bg.com®</title>
<style type="text/css">
a.roll {
display:block;
width:в зависимост от картинката;
height:в зависимост от картинката;
background:#fff url(път до картинката) no-repeat;
overflow:hidden;
cursor:link;
}
a.roll img {
visibility:hidden;
}
a.roll:hover {
background:0;
}
a.roll:hover img {
visibility:visible;
border:0;
}
</style>
</head>
<body>
<a class="roll" href="#" ><img src="път до картинката по време на rollover" alt="" width="в зависимост от картинката" height="в зависимост от картинката" border="0" /></a>
</body>
</html>


ДЕМО

Автор: [PoD]MaTRiX

Урока участва в играта на inbg.eu


/ Трябва да сте регистриран за да напишете коментар /
От: batmanabg
13:21 22-07-2011
Полезен урок.
1