2 нояб. 2010 г.
1 нояб. 2010 г.
Вперёд, назад, к началу. Навигация по веб-странице
Команды «Вперед» и «Назад», размещенные непосредственно на веб-странице
Известно, что при просмотре веб-страниц очень часто приходится пользоватся кнопками на браузере Back («Вперед») и Forward («Назад»), что означает вернутся назад на предыдущую страницу или пройти на страницу вперед (если вы перед этим вернулись. Такие кнопки можно сделать кнопки на самой странице. Вот пример использования клиентских сценариев.
Второй вариант клиентских сценариев, обеспечивающих возврат Вперед или Назад по истории листания веб-страниц, которую хранит Ваш браузер.
Очень удобный скрипт для организации электронных каталогов, каталогов моделей или больших массивов фотографий, которые нужно увеличивать на веб-страницах.
Данный скрипт реализует навигацию по сайте посредством нажимания выбранных Вами клавиш на клавиатуре. Количество клавиш и букв и сами буквы можно редактировать, как и выбирать нужные Вам адреса. Не забудьте потом отдельно прокомментировать и написать на странице, какая буква обозначает какой переход:
Кнопка a обеспечивает переход на страницу URL-адрес-a. Кнопка b обеспечивает переход на страницу URL-адрес-b и так далее.
На одном из сайтов не заработал простейший вариант и пришлось найти вот этот:
Второй вариант клиентских сценариев, обеспечивающих возврат Вперед или Назад по истории листания веб-страниц, которую хранит Ваш браузер.
Очень удобный скрипт для организации электронных каталогов, каталогов моделей или больших массивов фотографий, которые нужно увеличивать на веб-страницах.
Данный скрипт реализует навигацию по сайте посредством нажимания выбранных Вами клавиш на клавиатуре. Количество клавиш и букв и сами буквы можно редактировать, как и выбирать нужные Вам адреса. Не забудьте потом отдельно прокомментировать и написать на странице, какая буква обозначает какой переход:
Кнопка a обеспечивает переход на страницу URL-адрес-a. Кнопка b обеспечивает переход на страницу URL-адрес-b и так далее.
На одном из сайтов не заработал простейший вариант и пришлось найти вот этот:
22 окт. 2010 г.
Эффект перекрывания z-index
CSS
HTML
#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}HTML
<div id="ten_of_diamonds">
<img src="diamonds_10.gif" alt="10 of diamonds" width="70" height="96"> </div> <div id="jack_of_diamonds"> <img src="diamonds_jack.gif" alt="Jack of diamonds" width="70" height="96"> </div> <div id="queen_of_diamonds"> <img src="diamonds_queen.gif" alt="Queen of diamonds" width="70" height="96">
</div> <div id="king_of_diamonds"> <img src="diamonds_king.gif" alt="King of diamonds" width="70" height="96"> </div> <div id="ace_of_diamonds"> <img src="diamonds_ace.gif" alt="Ace of diamonds" width="70" height="96"> </div>
Эффект перекатывания картинки-ссылки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Эффект перекатывания</title>
<style type="text/css">
A.rollover {
background: url('3.jpg'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}
A.rollover:hover {
background-position:
0 /* Смещение по горизонтали */
-40px; /* Смещение вверх по вертикали */
}
</style>
</head>
<body>
<p><a href="link.html" class="rollover"></a></p>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<title>Эффект перекатывания</title>
<style type="text/css">
A.rollover {
background: url('3.jpg'); /* Путь к файлу с исходным рисунком */
display: block; /* Рисунок как блочный элемент */
width: 151px; /* Ширина рисунка в пикселах */
height: 40px; /* Высота рисунка */
}
A.rollover:hover {
background-position:
0 /* Смещение по горизонтали */
-40px; /* Смещение вверх по вертикали */
}
</style>
</head>
<body>
<p><a href="link.html" class="rollover"></a></p>
</body>
</html>
12 окт. 2010 г.
Таблица безопасных цветов HTML
|