38025

Карты изображений

Лабораторная работа

Информатика, кибернетика и программирование

подробное описание областей нанесенных на контурную карту: mp nme= Mp re shpe= rect coords= 226074 href= ссылка на Google.ru re shpe= rect coords= 61411276 href= ссылка на мой сайт mp Примечание: жирным выделено то что должно присутствовать обязательно обычным текстом переменные параметры. mp nme= Mp2 re shpe= circle coords= 842826 href= http: google.ru re shpe= poly coords= 65351417858109481107177546345 href= http: srez.

Русский

2013-09-25

1.45 MB

2 чел.

Лабораторная работа №8. «Карты изображений»

Теперь - редко где используемая, но вполне приятная технология наложения на одну картинку нескольких ссылок, - в зависимости от той области, на которую «кликаем» мышкой и осуществляется переход. В чем-то эта технология экономична и удобна, в чем-то, как и всякий инструмент, - непрактична и неудобна. Но оценку можно ставить только в каждом конкретном случае. Поэтому все же остановлюсь на ней подробнее: Берется изображение (наша картинка.jpg) и пишется какую контурную карту на него планируем наложить (Map):

<img src="наша картинка.jpg" usemap="#Map">,

далее, где-нибудь внизу, или в самом начале страницы, но в пределах тега <body> добавляем собственно "карту ссылок", как называется эта технология, т.е. подробное описание областей, нанесенных на контурную карту:

 <map name="Map">

<area shape="rect" coords="2,2,60,74" href="ссылка на Google.ru">

<area shape="rect" coords="61,4,112,76" href="ссылка на мой сайт"></map> 

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

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

Координаты задаются отсчитывая от левого верхнего угла картинки по пикселу.

В нашем случае, у первой картинки отступы по 2 пиксела слева и сверху у 1 контрольной точки, а правый нижний угол, соответственно, отстоит от левого верхнего угла картинки на 60 слева и 74 пиксела сверху.

Для прямоугольника задаются координаты левого верхнего угла задаваемой области относительно левого верхнего угла картинки + координаты правого нижнего угла области относительно все того же верхнего левого угла картинки.

Конечно, вручную это все высчитывать долго. Гораздо проще воспользоваться одной из специальных программ, автоматизирующих все рутинные процедуры.

Координатные карты могут быть не обязательно квадратными - можно задать область-окружность или произвольную область со сложным изломанным контуром. Рассмотрим эти случаи подробнее.

<img src="наша картинка.jpg" usemap="#Map2">

Строка тега картинки изменяется только в имени карты координат.

Отметим, что одинаковые имена элементов в пределах одной странички недопустимы.

<map name="Map2">

<area shape="circle" coords="84,28,26" href="http://google.ru/">

<area shape="poly" coords="65,3,51,41,78,58,109,48,110,71,7,75,4,6,34,5" href="http://srez.ru/">

</map>

Первая строчка - круг (в теге area shape указано "circle", что по-английски будет "окружность"). Координаты у нее высчитываются по методу определения центра окружности - это первые две цифры, а третья цифра - это радиус нашей окружности. Именно радиус, а не диаметр! (Напомним, что радиус - это расстояние от ЦЕНТРА окружности до ее края. Центр в свою очередь - это та точка, которая равноудалена от любой точки на краю окружности). 

Вторая строка кода - это многоугольная область, заполняющая большую часть свободного пространства вокруг окружности. В теге area shape у нее значится "poly", что означает многоугольник. Координаты тут вычисляются парами цифр (расстояние от левого и расстояние от верхнего краев). Каждой точке соответствуют две координаты. Точек может быть сколь-угодно большое множество, но злоупотреблять не стоит - "срубайте" углы, упрощайте систему - незачем громоздить плавные изгибы только для красоты. Поверьте, примерной разметки на скорую руку тут вполне хватит. Если точек указано три, то наш потенциальный многоугольник называется треугольником. Ссылка, ему назначенная, будет срабатывать между точками. Если добавить еще одну точку (четвертую), но расставить их так, чтоб эти самые точки как бы пересекали собственные соединительный линии, то фигура может превратиться в подобие двух треугольников, сросшихся углами. И так далее.

Пример.

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

<html>

<title> CONTENT </title>

<body bgcolor="black">

<bgsound src="muz/111.wav" loop="2000">

<img src="111/wall1_b.bmp" usemap="#Repa">

<map name="Repa">

<area href="drugoy_document.html" shape="poly" coords="452,163,543,121,547,133, 476,276,472,267,478,262,452,177"

 alt="Граффити - простая и понятная штука, пожалуй, как пять пальцев на твоей руке, надо просто внимательно посмотреть на них...">

</map>

</font>

</body>

</html>


R


 

А также другие работы, которые могут Вас заинтересовать

42973. Проектирование консольно-фрезерного станка 155.12 KB
  Серийным называется такое производство, при котором изготовление изделий производится партиями или сериями, состоящими из одноименных, однотипных по конструкции и одинаковых по размерам изделий.
42974. Разработка самозагружающегося скипового подъемника, предназначенного для загрузки составляющих в растворосмеситель 363.31 KB
  Дипломный проект состоит из расчетно-пояснительной записки содержащий 5 основных разделов и состоящий из 72 страниц машинописного текста и графической части состоящей из 9 листов чертежей. В расчётно-пояснительной записке дан обзор существующей российской техники для получения бетонной и растворной смесей и способов загрузки составляющих в смесители произведен расчёт на прочность скипового подъёмника а также расчет экономической эффективности рассмотрен вопрос безопасности жизнедеятельности приводится список используемой для выполнения...
42975. Цех ремонта сельхозтехники 103.5 KB
  площадь застройки промышленного здания в пределах внешнего периметра наружных стен. полезная площадь промышленного здания. Лёгкий бетон=1000 кг м3 Расчёт вспомогательных помещений Показатели для расчёта: Количество работающих во всех сменах: А=А1А2=8436=120 А1 мужчины А2 женщины Количество работающих в наиболее многочисленной смене: В=В1В2=4921=70 В1 мужчины В2 женщины Количество служащих: С=15 Вид помещений Показатель Значение Примечание Все вспомогательные помещения Площадь м2 504...
42976. Двухэтажный 4-квартирный жилой дом со стенами из керамических камней 87.5 KB
  Объемнопланировочное решение здания. Конструктивные решения здания. Характеристика района строительства Место расположения будущего здания в городе Рязань. Климатические условия района строительства: среднегодовая температура 38 0С минимальная зафиксированная температура 410С максимальная зафиксированная температура 380С продолжительность периода со среднесуточной температурой  0С составляет 145 суток количество осадков за год 644мм средняя месячная относительная влажность воздуха: наиболее холодного месяца...
42977. Цех по ремонту автотранспорта 61.5 KB
  Введение Исходные данные Характеристики климатического района Характеристика рельефа Характеристики огнестойкости и взрыво-пожаробезопасности Технологическая часть Направленность технологического процесса Технологические зоны Грузоподъемное оборудование Технологические зоны с агрессивными средами Объемно-планировочные решения Параметры проектируемого здания Помещения и перегородки Ворота Окна Полы Кровля Расчет количества водоприемных воронок Фасад...
42978. Газоснабжение жилого микрорайона в Советском районе г. Астрахань с газификацией жилого много квартирного дома 86 KB
  При определении сметной стоимости строительства внутренних инженерных систем использованы Территориальные единичные расценки на строительные работы ТЕР. ТЕР2001 предназначены для определения прямых затрат в сметной стоимости строительства а также для расчётов за выполненные строительные работы. Сборники ТЕР2001 разработаны в базисном уровне цен Госстроя по состоянию на 1 января 2001 года. При расчёте сметной стоимости базовоиндексным методом приняты: а Объёмы работ для подсчета сметной стоимости работ определяются в разделе...
42979. Двухэтажный 6-квартирный жилой дом со стенами из силикатного кирпича 88.5 KB
  Объемнопланировочное решение здания. Конструктивные решения здания. Характеристика района строительства Место расположения будущего здания в городе Орел. Климатические условия района строительства: среднегодовая температура 49 0С минимальная зафиксированная температура 350С максимальная зафиксированная температура 380С продолжительность периода со среднесуточной температурой  0 0С составляет 138 суток количество осадков за год 571мм средняя месячная относительная влажность воздуха: наиболее холодного месяца...
42980. Проект производственного здания с административно-бытовым корпусом для строительства в г.Томск 111.5 KB
  Основными конструктивными элементами ячейкового промышленного здания являются: колонны которые передают нагрузки на фундаменты; конструкции покрытия которые состоят из несущей части фермы; Вертикальные ограждающие конструкции стены перегородки конструкции остекления причем конструкции стен опираются на фундаментные и обвязочные балки; Двери и ворота для движения людей и транспорта; Окна обеспечивающие необходимый световой режим в помещении Основные характеристики: По...
42981. Проектирование промышленного здания в г. Омск 97 KB
  Краткое изложение задания Характеристика района строительства Объемно-планировочное решение Конструктивное решение Теплотехнический расчет стенового ограждения и покрытия Расчет административно бытовых помещений Литература Краткое изложение задания Универсальный корпус предназначен для размещения в нем некоторых производств легкого и среднего машиностроения не требующих применения тяжелых кранов. Фахверковые колонны жёстко заделывают в фундаменты и сверху шарнирно соединяют с элементами покрытия....