HTML для тех, кто в танке (Часть 5) Картинки в HTML
Картинки вставляются тегом <img src="/путь к картинке/название картинки . расширение картинки">. Тег этот не "контейнерный", посему в закрывающей части не нуждается. Располагая этот тег внутри классической гиперссылки, мы можем добиться, чтобы при тычке по картинке осуществлялся переход по ссылке: Код, использованный в картинке: <a href="куда переходим при нажатии"> <img src="картинка.jpg" width="ширина картинки (необязательно)" height="ширина картинки (необязательно)" hspace="7" vspace="7" border="1" align="left"></a> То есть картинка - не что иное, как обычная ссылка, в которую вставляется код с адресом и параметрами картинки:
Все задействованные в коде теги вам уже без сомнения встречались в предыдущих главах, за исключением разве что hspace и vspace - эти два тега тоже не являются обязательными, но при их наличии вокруг картинки образуется отступ в соответствующее количество пикселей от текста. Согласитесь, это намного проще, чем вымучивать эти пробелы при помощи таблиц, пробелов и слоев или же вообще лепить текст впритык к картинке... Вокруг картинки при помощи border="1" можно соорудить элегантную рамочку, а при необходимости (если очень лень или по стратегическим замыслам) изменить размеры отображения картинки при помощи все тех же width и height - если указать в них меньшие размеры, чем реально у картинки, можно вписать ее в любой практически дизайн. Зачем это нужно? Почему бы не обрезать картинку графическим редактором - что намного более практично?! Рассмотрим минусы занижения размеров картинки при помощи HTML: - картинка сохраняет свои реальные размеры и, соответственно, вес - даже если вы сделаете огромадную картинку в мег весом, размерами с почтовую марку, грузиться она будет всеми своими мегами. - картинка потеряет много деталей, что в некоторых случаях превращает ее в нечто непонятное. теперь плюсы занижения размеров: - картинку можно вписать в дизайн, пожертвовав парой сантиметров, а при копировании ее на винт она сохранит свои размеры. Это нужно в редких случаях, когда вы вывешиваете картинку размерами большими, чем разрешающая способность монитора посетителя. И картинку в дизайн впишем и сохранится она на все 2040 на сколько там положено.
Теперь - редко где используемая, но вполне приятная технология наложения на одну картинку нескольких ссылок, - в зависимости от той области, на которую тыкаем и осуществляется переход. В чем-то эта технология экономична и удобна, в чем-то, как и всякий инструмент, - непрактична и неудобна. Но оценку можно ставить только в каждом конкретном случае. Поэтому я все же остановлюсь на ней подробнее: Берется изображение: Нажав на левую половинку, переходим на Google.ru, нажав на правую - переходим на мой сайт. Как это реализовано? Читаем код: первая часть включается в тег картинки:
<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 пиксела сверху. Алгоритм понятен? Для тех, кто не допер, повторюсь: координаты левого верхнего угла задаваемой области относительно левого верхнего угла картинки + координаты правого нижнего угла области относительно все того же верхнего левого угла картинки. (Здорово! Даже я понял!) Конечно, вручную это все высчитывать долго и муторно. Гораздо проще воспользоваться одной из специальных программ, автоматизирующих все рутинные процедуры. Вот например, в DreamWeaver MX есть такая функция в виде простого "растягивания" области над картинкой и назначения ей ссылки. Никаких цифр при этом вводить не нужно - программа считает все сама. От вас требуется лишь ПОНИМАТЬ что творится в коде и уметь распознать эту фичу в коде других страничек, если когда-либо вам потребуется разобраться в устройстве других сайтов. Координатные карты могут быть не обязательно квадратными - можно задать область-окружность или произвольную область со сложным изломанным контуром. Рассмотрим работу с окружностью: Повозив курсором над этой картинкой, вы можете увидеть, что область внутри лупы, сквозь которую смотрит глаз ведет на один сайт, а вся остальная (за редкими "просветами") - ведет на другой сайт. В первом случае зона задана окружностью, во втором - многоугольником. Смотрим код: <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", что означает многоугольник. Координаты тут вычисляются парами цифр (расстояние от левого и расстояние от верхнего краев). Каждой точке соответствуют две координаты. Точек может быть сколь-угодно большое множество, но злоупотреблять не стоит - "срубайте" углы, упрощайте систему - незачем громоздить жуткоплавные изгибы только для красоты. Поверьте, примерной разметки на скорую руку тут вполне хватит. Как только точек становится больше трех, наш потенциальный многоугольник становится треугольником. Ссылка, ему назначенная, будет срабатывать между точками. Если добавить еще одну точку (четвертую), но расставить их так, чтоб эти самые точки как бы пересекали собственные соединительный линии, то фигура может превратиться в подобие двух треугольников, сросшихся углами:
Код, использованный в картинке:
Поверьте, примерной разметки на скорую руку тут вполне хватит. Как только точек становится больше трех, наш потенциальный многоугольник становится треугольником. Ссылка, ему назначенная, будет срабатывать между точками. Если добавить еще одну точку (четвертую), но расставить их так, чтоб эти самые точки как бы пересекали собственные соединительный линии, то фигура может превратиться в подобие двух треугольников, сросшихся углами: