-Рубрики

 -Подписка по e-mail

 

 -Поиск по дневнику

Поиск сообщений в Talli-Milledi

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 16.02.2009
Записей:
Комментариев:
Написано: 1419


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

Пятница, 22 Октября 2010 г. 16:21 + в цитатник
Цитата сообщения BraveDefender Тренировка: области-ссылки на изображении



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




 





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


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




 


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




 




 


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




 


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


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




 


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




 


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




 


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




 


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


<p><img alt="" width="640" height="480" src="//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>





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


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


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






 


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


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


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

Серия сообщений "HTML":
Часть 1 - Это просто клад-3
Часть 2 - Тренировка: области-ссылки на изображении
Часть 3 - &quot;Делаем в фотошопе КНОПКУ-ПЕРЕХОД&quot;
Часть 4 - Перезаливаем флешки к себе и переписываем код
...
Часть 13 - Самый простой способ вставить в сообщение проигрыватель с музыкой
Часть 14 - Оформляем текст и картинки
Часть 15 - ЛиРу - как вставить флеш ( flash ) в пост? Как узнать прямую ссылку на флеш?

Метки:  
Понравилось: 1 пользователю

 

Добавить комментарий:
Текст комментария: смайлики

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку