Как сделать картинку с кликабельными надписями

Суббота, 17 Июля 2010 г. 03:11 + в цитатник

Цитата сообщения AnnaDu

Прочитать целиком В свой цитатник или сообщество!

Как сделать картинку с кликабельными надписями.

Делала картинку с кликабельными надписями в целях рекламы моего блога (не этого блога; всё, что рекламируется, есть уже здесь:)))), а потом подумала - фишка неплохая, почему бы и не сделать урок для ЛиРушников! Во всяком случае, на просторах ЛиРу не встречала такого урока, правда, специально не искала.Но неважно. Главное, чтобы урок пригодился кому-нибудь!

Покликайте, пожалуйста, надписи на картинке для того, чтобы проверить, как она работает!

Ну, как?! Здорово?! :)))

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

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

Смысл этой методики прост: на картинке мы сделаем надписи, которые свяжем со ссылками на сайты.

Для изготовления картинки с кликабельными надписями нам будет необходимы: уже готовая картинка с надписями (я подготовила для урока полушутливую картинку; уж простите мне пренебрежение правописанием!) и ссылки, соответствующие надписям ( другими словами - адреса, на которые будет отправлять кликабельная надпись).

Картинка лучше в формате jpg, а ссылки должны быть в виде: http:// (название сайта или страницы)

Итак, творим!

Открываем картинку в Image Ready CS2.

1. Кликаем на инструмент Rectangle Image Map Tool (прямоугольная графическая карта ),

2. Выделяем им последовательно все наши надписи, которые будут соответствовать подготовленным ссылкам (делаем как обычное прямоугольное выделение).

3. Выполняем команду меню Window - Image Map, чтобы активизировать-открыть палитру ссылок (просто кликнув на неё).

4. Вот она и открылась.

5. Рассмотрим повнимательней, что она из себя представляет.

Name - как желаете, так и назовите;

URL - сюда вы будете вносить ссылки;

Target - с его помощью наша картинка откроет новое окно браузера для содержимого ссылки, т.е. сайта, на который ссылка и "ссылает";

Alt - а здесь можно сделать надпись, которая будет появляться при наведении курсора на ту надпись на готовой картинке, которая соответствует ссылке.

6. Теперь приступаем к самому важному моменту - будем "связывать" надписи и ссылки.

Правой кнопкой мышки кликаем по первой надписи, активизируя её, и в окошечки в палитре ссылок вписываем данные: соответствующую ссылку и "курсорный" текст.

Активизируем вторую надпись, кликнув на неё правой клавишей мышки, и в окошке панели вписываем уже данные для второй надписи.

Аналогично поступаем с 3-й и 4-й надписями, и со следующими, если их у вас больше.

С надписями мы уже закончили!

7. Теперь будем сохранять нашу картинку. Очень желательно - в отдельную папку!

File - Save Optimized As...

Внимание, очень важный момент! Выбираем тип файла HTML and images и сохраняем.

На этом наша работа в Image Ready закончена!

8. А мы переходим к папочке, в которой сохранена наша картинка в двух ипостасях: изображение (1) и его HTML (2).

9. Изображение (1) в полном размере загружаете, как обычно, на ваш любимый хостинг и берёте её код вида: //s49.radikal.ru/i125/1007/38/fd1f315538c5.jpg (ссылка, №1). (Лучше откройте новый документ и скопируйте её туда).

10. Теперь откроем файл (2) с помощью программы Блокнот.

В тексте HTML-кода выделим ту часть его, как показано, от <! и до <body>,

скопируйте эту часть и вставьте в документик рядом с кодом этой картинки (ссылка, №1).

11. Теперь будьте внимательны. Выделенную часть между кавычками удалите, а вместо неё вставьте ссылку картинки, №1. Только не потеряйте кавычки, пожалуйста!