Меню для лота за 15 минут

Качественно оформленный лот вызывает вызывает доверие.  От того как выглядит Ваш товар на аукционе зависит мнение покупателя о Вас как о продавце. Согласитесь, приятно когда в описании понравившегося лота есть ссылки отзывы о продавце, его страничку, форму обратной связи. Если взглянуть на лоты JosephTM, SmartDeal и других топовых продавцов Aukro, то мы увидим не просто список характеристик с парочкой фотографий, а практически полноценный web-сайт. Тут и ссылки на другие лоты продавцов, и странички с описанием вариантов оплаты и доставки. Не говоря уже о том что некоторые выглядят просто красиво.

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

Итак, для начала нам потребуется картинка нашего меню. Я потратил на ее изготовление что-то около трех минут, по этому не судите строго. В конце-концов она только для примера, Ваш вариант наверняка будет гораздо более симпатичным!

Ну а теперь воспользуемся такой замечательной функцией HTML как image mapping! Даже если Вы крайне смутно представляете себе что такое HTML не стоит пугаться. Ведь на просторах интернета есть всё, в том числе и такой замечательный online-сервис как www.image-maps.com Он позволяет из обычной картинки сделать полноценную навигационную панель. В нашем случае - привязать к определенным участкам изображения ссылки на нужные страницы.

Итак, приступим!

Первым делом передадим сервису наше изображение. Тут возможны 2 варианта: либо закачать картинку с Вашего компьютера, (From your PC) либо передать ссылку на изображение в сети (From URL).

Выбираем файл и нажимаем кнопку "Start Mapping Your Image"

Я закачал изображение со своего компьютера, однако советую Вам сразу выложить заготовку меню на каком-либо хостинге изображений (www.radikal.ru, imageshack.us, да тысячи их...). Ну а если вы обзавелись собственным хостингом - то естественно выкладывайте картинку туда.

На следующей странице убеждаемся что выбрали для обработки именно то изображение которое хотели:

Все ОК? Тогда жмем "continue to next step"

На следующей странице выполняется собственно разметка изображения. Для начала в разделе Advance Tool Box снимаем все галочки с чекбоксов. Опции там конечно интересные, но для наших целей будут просто лишними. Затем добавим первую активную область на изображении. Для этого в Image Map Tool Box нажимаем кнопку Rectangle.

  1. При помощи мыши перетаскиваем прямоугольник обозначающий активную область и подгоняем его размер под наше меню.
  2. В поле "Link for this map" вписываем ссылку на нужную нам страницу (в данном случае - ссылка на страницу "Обо мне" на Aukro.ua)
  3. В поле "Title/Alt for this map" пишем текст, который будет появляться возле курсора при наведении на ссылку.
  4. Нажимаем "Save" чтобы сохранить разметку для этой части изображения.

Снова жмем Rectangle и по аналогии с предыдущим шагом добавляем новую активную область на изображение. И так для каждого пункта нашего меню

Теперь, когда все пункты меню размечены и привязаны к своим ссылкам, пора получить результат нашей работы. Для этого нажимаем кнопку "Get Your Code"...

...и попадаем на страницу с различными вариантами рабочего кода для нашей карты.

На вкладке "HTML Code" в текстовом виде отображены результаты наших стараний. А на "HTML Output" можно протестировать меню в условиях, приближенных к реальным 🙂 Если обнаружили какую-то ошибку, воспользуйтесь кнопкой "Go Back To Edit Map" и Вы вернетесь на страницу редактирования карты. Ну а если все получилось так как задумывалось, тогда копируйте HTML-код в блокнот и на всякий случай сохраните как обычный текстовый файл.

Половина дела сделана. Осталось прицепить наше меню к лоту на аукционе. Для этого нам понадобится слегка подредактировать код, полученный на image-maps.com Это необходимо, если Вы как и я обрабатывали изображение закачанное  с компьютера. Если же обрабатывалась картинка из сети (загруженная через поле  From URL) - этот шаг можно пропустить.

При написании поста я проделывал все эти шаги, и получил вот такой код:

<div style="text-align:center; width:652px; margin-left:auto; margin-right:auto;"> <img id="Image-Maps_5201010151020163" src="http://www.image-maps.com/uploaded_files/5201010151020163_menu.jpg" usemap="#Image-Maps_5201010151020163" border="0" width="652" height="52" alt="" /> <map id="_Image-Maps_5201010151020163" name="Image-Maps_5201010151020163"> <area shape="rect" coords="8,5,195,45" href="http://aukro.ua/my_page.php?uid=9451306" alt="Моя страница на Aukro.ua" title="Моя страница на Aukro.ua"    /> <area shape="rect" coords="235,6,422,47" href="http://aukro.ua/show_user_auctions.php?uid=9451306" alt="Все мои лоты" title="Все мои лоты"    /> </map> </div>

В принципе он полностью рабочий, но есть одно "но". Image-maps.com будет хранить изображение на своем сервере всего 2 дня. После этого удалит его безвозвратно. По этому в начале поста я рекомендовал воспользоваться хостингом для изображений. Теперь самое время внять этому совету и залить Вашу менюшку на какой-нибудь радикал или имаджхак. Все эти сервисы сразу же дают ссылку на закачанное изображение. Нам остается только заменить в коде карты адрес картинки (параметр src тега img).

В моем случае получилось вот так:

<div style="text-align:center; width:652px; margin-left:auto; margin-right:auto;"> <img id="Image-Maps_5201010151020163" src="http://el-coyot.com.ua/img/menu.jpg" usemap="#Image-Maps_5201010151020163" border="0" width="652" height="52" alt="" /> <map id="_Image-Maps_5201010151020163" name="Image-Maps_5201010151020163"> <area shape="rect" coords="8,5,195,45" href="http://aukro.ua/my_page.php?uid=9451306" alt="Моя страница на Aukro.ua" title="Моя страница на Aukro.ua"    />

<area shape="rect" coords="235,6,422,47" href="http://aukro.ua/show_user_auctions.php?uid=9451306" alt="Все мои лоты" title="Все мои лоты"    /></map></div>

В параметре src я указал адрес изображения на своем сервере. У Вас он естественно будет отличаться.

Все, меню для лота готово! Осталось использовать его на Aukro.ua

Тут возможны два варианта. Использовать полученную карту изображения в шаблоне, либо добавлять код непосредственно при выставлении лота. Использование шаблонов на Aukro.ua - тема достаточно широкая, и достойна отдельного поста, по этому здесь я рассмотрю второй способ.

Делается это элементарно. При подготовке описания лота переключаемся из визуального редактора в режим редактирования HTML (закладка "HTML код") и вставляем туда код нашей карты. Возвращаемся в визуальный редактор и видим нечто вроде этого:

Вот собственно и все! На самом деле при наличии готовой картинки создание меню занимает времени гораздо меньше, чем требуется на прочтение этого поста. А результат тянет на работу профессионального web-программиста 🙂 Шучу конечно. Надеюсь материал был для Вас полезен. В планах у меня значится написание поста о шаблонах для Aukro. С менюшками, картинками, ссылками на внешние ресурсы, блек-джеком и прочим. Так что следите за обновлениями!

Меню для лота за 15 минут: 2 комментария

  1. Moldikov

    Спасибо, суперовская статья, ну всегда хочется большего, на ваших лотах такое красивое оформление, как сделать такое?

Добавить комментарий