Как сделать другой рисунок при наведении курсора?

Меняющийся рисунок в меню.
Изменение фона при наведении курсора.

При создании сайта вебмастера все больше уделяют внимание оптимизации для продвижения сайта.

Одной из важных составляющих является доступность страницы, т.е. кратчайший путь (минимальное количество кликов) для ее открытия. Чем меньше кликов необходимо сделать, чтобы добраться до нужной странице от главной, тем она доступнее. Тем больше вероятность что она будет проиндексирована поисковиком и тем она весомее при рассчетах ТИЦ и PR. Ну и, естественно, тем больше вероятность того, что ее найдет посетитель. Поэтому ссылки на самую важную информацию (о компании, услуги, контакты и т.д.) делают в виде меню на главной странице.

Однако далеко не все учитывают тот факт, что оформив красиво меню с помощью javascript или флешки ссылки из этого меню будут недоступны для поискового робота! По крайней мере до сих пор это так.

Но, иногда можно все сделать красиво не прибегая к javascript или анимации. Можно просто сделать ссылки другого цвета, размера, шрифта, картинки и даже изменять все это при наведении на них курсора мыши. Один из таких способов и будет описан ниже.

Не буду больше рассказывать как важны прямые ссылки, а начну создавать простенькое, но красивое меню.
Создаем в текстовом редакторе обычную html страницу (например, index.html) с прямыми ссылками. Именно эти ссылки и будут выполнять роль меню.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меню сайта</title>
</head>
<body>
<a href="/" title="Перейти на Главную">Главная</a>
<a href="/company.html" title="История развития компании и предоставляемые услуги"><nobr>О компании</nobr></a>
<a href="/contact.html" title="Как с нами связаться">Контакты</a>
</body>
</html>

Как известно, у ссылки есть несколько цветов. По умолчанию ссылка на еще не посещенную страницу имеет, как правило, сини цвет. Если страница, на которую ведет ссылка Вами уже посещалась, то она будет бордового цвета. При наведении на нее курсор мыши цвет поменяется на красный. Вообще, эти цвета могут отличаться от тех, которые я привел. Все зависит от настроек браузера.
Наша задача как вебмастеров - изменить данные цвета так, как мы хотим. Для этого придется создать блок со стилями. Делается это очень просто. В заголовке между тегами head вставляем следующее:

Теперь можно наблюдать посещенные ссылки серыми, не посещенные - голубыми, а при наведении ссылка становится черной.
Немного усложним эффект. Сделаем так, чтобы при наведении на ссылку, ее текст становился жирным и дополнительно появлялся серый фон.
Для этого внесем следующие изменения:
вместо

a:hover {
color: #000000;
}

напишем

a:hover {
color: #000000;
background-color:#CCCCCC;
font-weight: bold;
}

Ну вот. Это уже интереснее получилось. Однако, такое меню можно еще немного приукрасить! Например, вместо фона добавить кртинки:

a:link {
color: #6666FF;
background-color:#CCCCCC;
background-image: url(file://button_fone_on.jpg);
}

a:visited {
color: #6666FF;
background-color:#CCCCCC;
background-image: url(file://button_fone_on.jpg);
}

a:hover {
color: #000000;
background-color:#CCCCCC;
background-image: url(file://button_fone_on.jpg);
font-weight: bold;
}

Почти совсем хорошо. Теперь нужно правильно подобрать необходимые отступы, расположить меню так, как нужно/хочется и... пользуйтесь на здоровье!

Напоследок представлю готовый вариант страницы с меню и подробными комментариями. А там, разберетесь где, что зачем. И дальше уже сами сможете менять под себя и усовершенствовать.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меню сайта</title>
<style type="text/css">

</style>
</head>
<body>
<center><h1>Главная</h1></center>
<ul>
<li><a href="http://grozmaster.nsk-info.ru/primer/menu/index.html" title="Перейти на Главную">Главная</a></li>
<li><a href="http://grozmaster.nsk-info.ru/primer/menu/company.html" title="История развития компании и предоставляемые услуги"><nobr>О компании</nobr></a></li>
<li><a href="http://grozmaster.nsk-info.ru/primer/menu/contact.html" title="Как с нами связаться">Контакты</a></li>
</ul>
<p><a href="http://grozmaster.nsk-info.ru/programming/html/6-krasivoe-menyu.html" title="Вернуться к статье">Назад</a></p>
</body>
</html>

В оригинале работу этого кода можно посмотреть здесь.