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


 

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

13649. Человек с множеством достоинств добавит к ним еще два, если окажется способным заработать и разумно потратить большие деньги 15.62 KB
  Эссе на тему: €œЧеловек с множеством достоинств добавит к ним еще два если окажется способным заработать и разумно потратить большие деньги€ Э. Севрус русский литераторЭкономика является важнейшей сферой жизни общества так как именно она обеспечивает людей материал
13650. Деньги - это свобода, выкованная из золота 14.46 KB
  Деньги это свобода выкованная из золота. Э.М. Ремарк Э.М. Ремарк называет деньги свободой. Деньги согласно Ремарку дают возможность их владельцу поступать так как он захочет. Например купить какие-либо товары дать их под залог обменять на ценные бумаги. Все это может ...
13651. Конкуренция - единственный метод взаимной координации наших индивидуальных действий без принуждения или произвольного вмешательства со стороны властей 14.06 KB
  Конкуренция единственный метод взаимной координации наших индивидуальных действий без принуждения или произвольного вмешательства со стороны властей. Ф. Хайек Поскольку данное высказывание дано в разделе экономика то под конкуренцией следует понимать эконо
13652. Конкуренция обеспечивает наилучшие качества продуктов и развивает наихудшие качества людей 15.19 KB
  Конкуренция обеспечивает наилучшие качества продуктов и развивает наихудшие качества людей Д. Сарнофф. Необходимым условием рыночной экономики является конкуренция т.е. соперничество борьба между предприятиями производящими сходную продукцию.Каково же значение
13653. ЦЕНООБРАЗОВАНИЕ В ГОСУДАРСТВЕННОМ СЕКТОРЕ И ГОСУДАРСТВЕННАЯ ПОЛИТИКА ЦЕН 7.79 MB
  Рынок - это сфера, пространство, где осуществляется купля-продажа товаров (продуктов, услуг). В самом общем виде цена выражается в сумме денег, за которую продавец готов продать свой товар, а покупатель готов его купить. Таким образом, цена - это компромисс между противоречивыми желаниями контрагентов.
13654. Бизнес-это искусство извлекать деньги из кармана другого человека, не прибегая к насилию 15.29 KB
  Бизнесэто искусство извлекать деньги из кармана другого человека не прибегая к насилию.Удивительно как точно М.Амстердам охарактеризовал суть бизнеса с точки зрения предпринимателя. Я с ним полностью согласна. Когда человек открывает свое дело он задается тремя вопр...
13655. Главная цель капитала – не добыть как можно больше денег, а добиться, чтобы деньги вели к улучшению жизни 14.62 KB
  Эссе на тему: €œГлавная цель капитала – не добыть как можно больше денег а добиться чтобы деньги вели к улучшению жизни€ Генри ФордВ своем высказывании создатель первого в мире автомобиля Генри Форд затрагивает проблему главной задачи экономической сферы жизни общес
13656. Нажить много денег - храбрость; сохранить – мудрость, а умело расходовать - искусство 14.19 KB
  Нажить много денег храбрость; сохранить – мудрость а умело расходовать искусство. Я считаю что нажить много денег – это умение. Что же имел в виду автор изречения когда утверждал что это – храбрость Видимо то что нужно быть очень смелым человеком чтобы подвергнуть себ...
13657. Налоги – это деньги, взимаемые властью с части общества в интересах целого 14.44 KB
  Налоги – это деньги взимаемые властью с части общества в интересах целого.С. ДжонсонЯ полностью согласна с позицией автора т.к. налоги регулируют экономику и составляя значительную часть доходов госбюджета расходуются в интересах всего общества. Налоги – это необход...