• Авторизация


ссылка на фото 14-08-2009 13:32 к комментариям - к полной версии - понравилось!

Это цитата сообщения BraveDefender Оригинальное сообщение

Тренировка: области-ссылки на изображении

Облегченный (тренировочный) вариант описанного в предыдущем посте "Создание ссылок на участках изображения: карта (map) ссылок" - на этот раз обойдусь вообще без Photoshop и только одной прямоугольной ссылкой в виде надписи.

[640x480]
 

Запускаю MS Paint (Пуск - Все программы - Стандартные - Paint)

Открываю в приложении выбранный рисунок (Файл - Открыть)

[521x445]
 

Выбираю инструмент "Надпись" и пишу на рисунке

[152x236]
 

[521x445]
 

Представляю условный прямоугольник, в который вписан текст, и записываю координаты его левого верхнего и правого нижнего углов (при наведении курсора на воображаемый угол координаты показываются в нижней панели Paint). Подробнее про координаты - в предыдущем посте.

[521x451]
 

У меня получились приблизительно такие координаты: верхний левый угол - 20,40 и нижний правый - 530,110

Закрываю Paint, сохранив изменения в изображении. Открываю страницу для нового сообщения в дневнике

[451x124]
 

Загружаю изображение с надписью "Уроки Photoshop

[521x388]
 

Сохраняю сообщение как черновик и открываю для редактирования

[471x207]
 

Нажимаю на кнопку "Источник" и вижу HTML-код загруженного изображения

[521x181]
 

После написанного кода добавляю свой, и в итоге получается (красным выделено дописаное):

<p><img alt="" width="640" height="480" src="http://img0.liveinternet.ru/images/attach/c/0/37/874/37874837_1231450585_crown.jpg" usemap="#picture" /><br /> </p>
<map name="picture">
<area target="_blank" href="http://bravedefender.ru/showjournal.php?journalid=2447247&keywordid=929323" shape="rect" coords="20,40,530,110" />
</map>

[571x215]

usemap - придумал название карты (picture)

name - должно соответствовать usemap (даже регистр) без #

href - адрес, по которому будет открываться ссылка. У меня это все посты из рубрики "Уроки Photoshop": чтобы узнать этот адрес (http://bravedefender.ru/showjournal.php?journalid=2447247&keywordid=929323), нажал в дневнике в рубриках на "Уроки..." и скопировал адрес из адресной строки (хотя, на самом деле, я сделал не так)

[141x270]
[421x240]
 

shape="rect" - форма области-ссылки - прямоугольник

coord - первые два числа - координаты левого верхнего угла воображаемого прямоугольника вокруг надписи, вторые два - координаты правого нижнего угла (которые я нашел в Paint)

Проверить работоспособность кода можно, сохранив сообщение в черновик и покликав на полученной картинке в записи.

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник ссылка на фото | -инди- - Дневник инди | Лента друзей -инди- / Полная версия Добавить в друзья Страницы: раньше»