Проверка полей формы с помощью JavaScript (39,47%)
В целях безопасности всегда необходимо проверять введенные пользователем данные. Проверка клиентским JavaScript легко обходится отключением js в браузере и предназначена она не для борьбы со злоумышленниками, а для помощи тем, кто случайно допустил ошибку. Тоже очень благородное занятие :) Согласитесь?…
Имитация гиперссылок с помощью JavaScript (36,84%)
С помощью JavaScript и CSS мы будем делать ссылки, невидимые для поисковых систем, но вполне видимые для пользователей. Код может пригодиться для тех разделов сайта, где нельзя быть уверенным в «объективности» ссылки от посетителя, и для самостоятельной расстановки ссылок веб-мастером, если он не хочет поднимать популярность других сайтов…
О преимуществах редактора CSS Top Style Lite (35,44%)
Мне часто приходится иметь дело с каскадными таблицами стилей. Опыт показывает, что для их редактирования наиболее удобны специальные программы-редакторы, способные значительно упростить работу веб-строителя. С одной из таких программ я и хочу вас ознакомить…
Если на сайте слишком много ссылок в главном меню, а оно, как правило, расположено горизонтально, то для всех разделов может не хватить места. В таком случае необходимо делать выпадающее меню.
Принцип работы подобных меню основан на том, что через события XHTML-документа вызывается функция JavaScript, которая динамически меняет CSS-свойства блоков, содержащих пункты меню.
XHTML-код документа описывает 2 блока меню, в каждый вложено еще 2 блока: один с заголовком, второй с содержимым меню:
<div onmouseover="menushow('1');" onmouseout="menuhide('1');" style="float: left; width: 50%;">
<div class="navhead">Информация</div>
<div id="navbody1">
<a href="/news.html">Новости</a><br />
<a href="/products.html">Товары</a><br />
<a href="/about.html">О компании</a>
</div>
</div>
<div onmouseover="menushow('2');" onmouseout="menuhide('2');">
<div class="navhead">Купить</div>
<div id="navbody2">
<a href="/buy1.html">Продукт 1</a><br />
<a href="/buy2.html">Продукт 2</a><br />
<a href="/buy3.html">Продукт 3</a>
</div>
</div>
Первый блок ссылок имеет уникальное имя (id="") navbody1, второй блок — navbody2. Для каждого раздела при наведении мыши на элемент (событие onmouseover) и уходе мыши с элемента (onmouseout) вызывается определенная функция JavaScript с параметром в виде номера меню.
CSS оформление минимально:
<style type="text/css">
.navhead {
font-weight: bold;
background-color: #ccc;
color: blue;
text-decoration: underline;
cursor: pointer;
}
#navbody1, #navbody2 { visibility: hidden; }
</style>
Стилевое оформление для блока navhead выделяет его шрифтом и фоном как главное меню навигации, а также делает текст внутри этого блока внешне похожим на гиперссылки: синий цвет, подчеркивание и соответствующий курсор.
Для navbody1 и navbody2 указано свойство visibility: hidden;. Оно говорит браузеру, что блоки занимают на странице необходимое место, но их содержимое и оформление отображаться не должно. То есть блоки полностью прозрачны.
JavaScript получает номер навигационного блока и меняет его visibility.
<script language="javascript" type="text/javascript">
//<!--
//<![CDATA[
function menuhide(menunum)
{
var currentmenu = document.getElementById("navbody" + menunum);
currentmenu.style.visibility = 'hidden';
}
function menushow(menunum)
{
var currentmenu = document.getElementById("navbody" + menunum);
currentmenu.style.visibility = 'visible';
}
//]]>
//-->
</script>
С помощью событий документа при наведении мыши на блок активизируется функция menushow(menunum). Menunum — переменная, хранящая строку с номером меню (1 или 2 соответственно). Функция с помощью DOM выбирает по имени элемент страницы, имя складывается из navbody и номера. Далее для этого элемента задается свойство visibility: visible и он появляется на странице. Функция menuhide() срабатывает, когда курсор мыши покидает область выпадающего меню, она работает аналогично, только выставляет visibility: hidden и, тем самым, снова прячет меню.
Удивительное рядом: установка Mac OS X на PC в эмуляторе PearPC (30,61%)
Статья посвящена установке операционной системы Mac OS X на PC. Архитектуры компьютеров Apple (PowerPC) и PC (x86) различаются, отсюда — несовместимость ОС и прикладного ПО для этих платформ. Проблему призван решить программный эмулятор PowerPC — PearPC…
Введение в оформление текстов для веб (30,56%)
Эта статья — попытка разрешить проблемы и рассказать о подводных камнях, связанных с публикацией текстов в сети, а также сформулировать несколько принципов создания удобных и простых для чтения веб-страниц…
Качественное составление названий и описаний (30,38%)
Споры о склейке ссылок не утихают. Лагерь тех, кто говорит «склейка ссылок очень опасна» растёт, но не уменьшается и лагерь тех, кто считает, что склейки ссылок вообще не существует. В руках у первых есть весомый аргумент – опыт. Действительно, при регистрации сайта в каталогах с одним, или всего несколькими описаниями и названиями,…
Гранит науки и кое-что еще… (28,99%)
Обзор сайтов, посвященных образованию и учебе. А также несколько ссылок на развлекательные ресурсы. Сентябрю посвящается!…
Создание красивого фона в PhotoShop (28,57%)
В статье описывается интересный способ создания красивого и стильного фона с помощью применения фильтров Adobe PhotoShop к «бесcмысленно изрисованному» изображению. Пробуя по этой схеме различные сочетания цветов, параметры фильтров, можно добиться очень интересных результатов…