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