Преглед на урок

RollOver Image

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

Ако урокът ви допада, споделете го в Twitter и Facebook или го запазете в Delicious.




Урокът е добавен от: [PoD]MaTRiX

Коментари

makavei82

Яко!!

Streleca

к'во да напиша в alt=??

talismana

"alt" се полвзва за описание ;) ако искаш пиши, ако искаш не :)

kkk

alt e alternative text, съответно ако по някаква причина не ти зареди картинката, ти показва текста който си написал в alt

zertop

abe koq programa izpolzvate za html ? notepada mi se vijda malko dulgi4ko za golqm sait

hakera_155

Това е готино, само че ако сложите много и при по-бавните интернети зарежда много бавно :)

Valtiel

Това по скоро е CSS...

wolfy

Може ли някой да ми каже как да го ползвам за меню?? Как да направя няколко различни снимки да се сменят?? Защото ми излиза една и съща статична картина на всякаде.. Моля помогнете!!!

wolfy

Ооо!! Схванах..

legionerazzz

Може ли някой да обясни защо в Mozilla Firefox не се вижда картинка а само текст ,а в Internet Explorer се вижда картинката и текста въпросът ми е защо в Mozillaта не се появява.

pakita

<html>
<head>
<title>бабалюга</title>
<style type="text/css">
div.roll a{
display: block;
background: url(брънзел.jpg) no-repeat;
width: 100px;
height: 40px;
}
div.roll a:hover{
background: url(брънзел2.jpg) no-repeat;
}
</style>
</head>
<body>
<div class="roll"><a href="#"></a></div>
</body>
</html>


така ще си спестиш някой и друг ред :) ;
а и по този начин legionerazzz няма да има проблема, който описа..

Добави коментар

Трябва да сте регистиран потребител за може да оставяте коментари! Направете своята безплатна регистрация още сега.