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

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

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

Вот, собственно, сама готовая картинка — карта ссылок на изображении:

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

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

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

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

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

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

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

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

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

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


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

Смотрите также:   Фотошоп. Как убрать цифры на фотографии

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

href — адрес, по которому будет открываться ссылка. У меня это все посты из рубрики «Уроки Photoshop»: чтобы узнать этот адрес, нажал в дневнике в рубриках на «Уроки...» и скопировал адрес из адресной строки (хотя, на самом деле, я сделал не так) — внимание! после переноса блога на вордпресс заменил ссылку просто на урок по фотошопу! но сути это не меняет.

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

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

13 + 7 =