Не просто картинка!

УРОК «Как сделать на картинке кнопку»

Дорогие друзья!

Давайте сделаем ещё одну прикольную фишку: это можно использовать как баннер или как "портал" для перемещения на какую-либо страницу, то есть в качестве средства навигиции. Речь идёт о картинке или каком-либо фоне, на котором расположена одна или несколько кнопок-ссылок. Как это делается?

Здесь принцип размещения кнопок такой же, как был описан в уроке " Как сделать надпись на картинке с помощью HTML", то есть мы должны использовать таблицу, фоном которой будет наша картинка, а в ячейках будут размещаться кнопки. Давайте сделаем для примера вот такое меню - это пока макет:

Для начала нам нужно приготовить составные части, то есть сам фон - картинку - и кнопки, а также скопировать куда-нибудь ссылки, которые мы будем использовать при создании нашей навигации. Картинку я нашла в интернете и уменьшила её с помощью Photoshop'а так, как мне нужно, а кнопки нарисовала за несколько минут в том же Photoshop'е.

Вы можете загрузить изображения фона и кнопок на хост, который предоставляется сайтом или же использовать сайты-хостинги изображений (Радикал, pic4you.ru). Я использовала дисковое пространство, предоставляемое самим сайтом.

Зная, что кнопки будут располагаться по вертикали по центру моей картинки, теперь можно создать каркас таблицы из черырёх строк и четырёх ячеек:

Вот код каркаса нашего будущего меню:

Примечание: обратите внимание на значение 2 пикселя в атрибуте border. Я использовала его здесь для наглядности, чтобы показать структуру каркаса. В дальнейшем его нужно будет заменить на 0, так как, в противном случае, на фоне картинки меню будут видны границы ячеек, а нам это не нужно. Если потом нужна будет граница вокруг меню, то её можно будет сделать отдельно.

Теперь мы должны заполнить каркас содержимым, то есть подключить фон-картинку и кнопки со ссылками на страницы, на которые они будут вести при клике по ним. В коде картинок кнопок вы можете в качестве значения атрибута title задать пояснения для посетителей сайта, чтобы им было более понятно, что они увидят, если кликнут по кнопке. Как правильно кодировать изображения вы можете прочитать в уроке "Исследуем код картинки".

Вот, что у нас получилось в итоге:

Код полученного меню навигации:

Обратите также внимание на запись в коде изображений кнопок меню: <a href="#">. Знак решётки # использован для того, чтобы заменить отсутствующую ссылку на страницу, поскольку у нас на сайте нет этих страниц. При клике по кнопкам будет загружаться страница с этим уроком.

До встречи в следующем уроке!

Нравится