02 March 2007
Повний код сторінки з rollover зображенням
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Теустова сторінка</title>
<meta http-equiv="Content-Type" content="text/html;" />
<style type="text/css">
.test-link
{
/* anchor це inline, нам потрібен block
для того щоб ми могли встановити розміри */
display:block;
/* розміри кратинки та лінки яка буде кнопкою */
width:120px;
height:30px;
/* шлях до зображення */
background-image:url(button.png);
/* картинка не повинна дублюватись,
це на той випадок якщо розміри лінки
не співпадуть з розмірами картинки */
background-repeat:no-repeat;
/* виносимо напис за екран,
це потрібно для пошукових роботів, їм потрібна назва,
дотогож accessebiltiy та браузери які не підтримують CSS */
text-indent:-800px;
}
/* це спеціальний модіфер, який означає
що стиль працює коли миша наведена на лінку */
.test-link:hover
{
/* Встановлюємо позицію background,
я тут використав bottom,
але можна було б наприклад -30px,
тобто змістити каринку на 30 пікселів вверх,
а тому показуватись вже буде нижня картинка */
background-position:bottom;
}
.test-link:active
{
/* Це потрібно для того
щоб прибрати некрасивий outline в FF.
Іноді цього всеодно не вистачає,
тоді можна цей стиль перенсти в голоний,
але тоді виникнуть проблеми за accessebility,
бо зовсім немає можливості побачити яка лінка активна
*/
outline-style:none;
</style>
</head>
<body >
<a class="test-link" href=" BLOCKED SCRIPTalert('Test')">Test</a>
</body>
</html>
BLOCKED SCRIPT потрібно замінити на "java" + "script" + ":".
Вчу українську, багато працюю. Цікавлюсь моделюванням небезпек. Більшість часу витрачаю на .Net.