И так, сегодня мы научимся делать не очень то и легкий, но зато интересные урок! Источник
Он пригодиться особенно тем, у кого есть форум. Урок заключается в том, что на картинке будут изображены ссылки. Ну в конце урока вы поймёте всю фишку ^^. И так, начнём:
Открываем фотошоп, открываем нам нужную картинку. Я взяла такую:
1. «Берём» наш исходник и «идём» с ним в Image Ready.
2. В Image Ready открываем Окно -> Карта ссылок [галочку ставим]/Window -> Image Map [галочку ставим].
3. Пишем нужный вам текст, и где хотите. Вот мой пример
4. Далее берём инструмент Прямоугольная карта ссылок/Rectangle Image Map Tool (P)
и выделяем то, что нам нужно (то есть наш текст)
5. В палитре нам нужно написать URL сайта, это обязательный параметр.Имя не имеет значения. Вот мой пример:
Так же делаем и с другим текстом.
6. После того, как вы выделите все объекты, которые вам нужны, останется сохранить картинку Файл -> Сохранить оптимизированный как…/File -> Save Optamized As…
ВНИМАНИЕ. Сохраняем картинку не в формате GIF или JPEG, а в формате HTML
http://s46.radikal.ru/i112/0902/2d/e09e99c08b9f.png
P.S. А так же сохраняем нашу картинку ещё в формате JPEG (как говориться, на всякий пожарный)
7. Теперь идём в ту папку, куда мы сохранили нашу картинку. Видим что картинка сохранилась, ни как картинка ^^. А как ссылка. Но ничего, не пугаемся, нажимаем на ярылк правой кнопкой мыши и выбираем Открыть с помощью -> Блокнот.
8. Открылся блокнот, и теперь копируем не весь текст, а только то, что выделено на картинке:
9. Теперь мы скопировали, то что выделили. И это выделенный текст вставляем на вашу страничку. ВНИМАНИЕ. Сюда вставлять коды бесполезно! Они не будут работать в форме Ответа. Они работают лишь в объявлениях. Вы можете просто вставить картинку на ваш сайт, и дать нам ссылочку, чтобы мы посмотрели.
10. Теперь загружаем нашу картинку, которая в формате JPEG (можно через www.radikal.ru). И копируем, как «Ссылка»
11. Самое важное правильно вставить текст! И теперь, в тот текст который мы выделили в блокноте, мы вставляем нашу ссылку на картинку. Пример (кавычки оставляем) :
К большому сожалению, здесь эти коды не работают, как писала выше, а именно в форме ответа. Так что, кидайте сюда ссылочки на ваш сайт. А я вам покажу, тот код, который у меня получился. Я проверила на одном сайте, всё прекрасно работает. Что не понятно, пишем
<!-- ImageReady Slices (1179973516_1175373030_kurthalsey16.jpg) --> <img src="http://s41.radikal.ru/i092/0902/89/55c56ae7af34.jpg" width="424" height="450" border="0" alt="" usemap="#e4da9f24ce2b_Map"> <map name="e4da9f24ce2b_Map"> <area shape="rect" alt="" coords="123,293,233,330" href="http://ava-tar.ru/index.php?forum"> <area shape="rect" alt="" coords="23,245,136,280" href="http://ava-tar.ru/"> </map> <!-- End ImageReady Slices -->