Сейчас я научу вас крошить, мельчить, дробить и т.д. любые изображения. Это бывает очень полезно при разработке сайтов содержащих большое количество графики, и красивый дизайн.
Для примера я, на скорую руку, создал вот эту картинку :
Как видите на ней достаточно много кнопок, естественно на которые нам бы хотелось нажимать, а не смотреть !!! :-). Нашлось два решения этой достаточно сложной проблемы.
Для того, чтобы создать "карту" в языке html существует тег <map>. Он задает разбиение изображения на "горячие" области, т.е. области при нажатии на которые можно загрузить другой файл html.
Параметр у этого тега только один - это name, который должен быть обязательно. Пример:
<map name="example"> ..... </map>
Закрывающая скобка также должна обязательно присутствовать. Внутри <map>...</map> могут, а вернее должны, следовать элементы описывающие "горячие" области.
Эти области задает элемент <area>. Он не должен содержать закрывающей скобки. У него существуют следующие параметры :
Для окружности : coords="Х центра, Y центра, радиус"
Для прямоугольника : coords="лево верх Х, лево верх Y, право низ X, право низ Y"
Для полигонов : coords="Х точки 1, Y точки 1, X точки 2, Y точки 2, ......"
Следование областей может быть произвольным, но если какие-то части областей пересекаются, то на область пересечения будет реагировать та область, которая идет в списке первой. Это как раз касается областей с атрибутом nohref, т.е. чтобы выколоть в области дырку, надо сначало прописать область с nohref, а затем нормальную.
Пример тега <area>:
<area shape=rect coords=5,5,15,15 nohref> <area href=main.html shape=rect coords=0,0,20,20 alt="Main Page">
Для того, чтобы назначить изображению карту надо использовать атрибут usemap и в нем указать значение name в теге <map>. Пример:
<img src=example.gif usemap="#example">
При указании имени важно учитывать регистр.
Давайте теперь вернемся к нашему "разбиваемому изображению". Чтобы применить способ карт, создадим вот такой код :
<map name="prob"> <area href=koi.html shape="circle" coords="60,18,12"> <area href=win.html shape="poly" coords="62,37,68,30,86,30,92,37,87,46,69,46"> <area href=iso.html shape="circle" coords="78,63,12"> <area href=main.html shape="rect" coords="19,73,60,92"> </map> <p><img src=step13.gif usemap="#prob" alt="Menu">И получим вот такую штуку !!! Можете там потыкаться !!! Я пометил горячие области красным, но естественно их не будет в нормальном состоянии. Просто это чтобы Вы ощутили ......
Интересно ??? Ну вот и хорошо !!!
Так как мы с Вами договорились резать картинки без наркоза, давайте так и сделаем. Иногда решить как разрезать бывает сложно, и скорее всего надо создавать изображение уже с расчетом на то, чтобы дальнейшее ее разрезание прошло гладно и без лишней потери крови :-). Вот как я бы разрезал эту картинку с кнопками.
Надо отметить, что лучше резать картинку так, чтобы в дальнейшем ее можно было спокойно вставить в таблицу. Для этого все разрезанные картинки должны быть прямоугольные, и не иметь ни каких выступов и вмятин. Если вы режите, то режьте во всю длинну изображения, или до той части, которая окажется в другой ячейке таблицы.
Эту картинку я разрезал так, чтобы области 1, 2 и 3 оказались в одной ячейке, для этого надо было строго соблюдать их высоту. Затем на подходе область 4. Что же с ней делать ? Она у нас почти размером в две кнопки, и поэтому лучше будет, если мы оформим ее в отдельной от двух кнопок ячейке. Для этого чтобы соблюсти размер ячеек таблицы пришлось эти две кноки (5 и 6) тоже ограничить. Теперь осталась одна кнопка 7 в принципе ее можно было бы сделать во все длинну, т.к. ей никто уже не мешает, но у нас уже таблица в 2 ячейки шириной, поэтому можно свободно отрезать правый кусок (8) от нее, но только естественно шириной с те кнопки, которые мы отрезали раньше.
Ну все получили много кусков, и начинаем их собирать.
<table border=0 cellspacing=0 cellpadding=0> <tr><td colspan=2><img src="1.gif"><a href=""><img src="2.gif" alt=Koi border=0></a><img src="3.gif"></td> <tr><td><img src="4.gif"><td><a href=""><img src="5.gif" alt=Win border=0></a><br><a href=""><img src="6.gif" alt=Iso border=0></a></td> <tr><td><a href=""><img src="7.gif" alt=Main border=0></a></td><td><img src="8.gif"></td></tr> </table>
Сначало нам надо установить размер рамки таблицы и пространств между ячейками равными нулю. Ну ,а затем прописать все картинки как надо. Я думаю на этот раз обойдемся без особых объяснений. Вот что мы получили...
Конечно "горячие" области сейчас уже не по размеру кнопки, но ....... Обсудим в следующем абзаце :-).
Выбор в принципе за вами. Оба эти метода достаточно сложно реализовать вручную, и там и тут вам придется работать с координатами и линиями. По мне дак первый способ легче, но второй лучше. Давайте поясню почему. Вы например отображаете картинки при просмотре страниц ??? Я уверен что 50% скажет, что нет. И поэтому вот вам пример, что вы увидите в двух случаях....
Это вы увидите в первом случае !!! | А это во втором ..... |
Вы там еще не испугались, что картинки не грузятся ??? Не бойтесь, это и есть картинки :-).
Ну дак вы ощутили различие ??? Правильно... В первом случае не известно куда давить..... И скорее всего можно промахнуться. А второй вам нравится ???
В пользу второго метода также говорит то, что разрезанные картинки гораздо быстрее загружаются, хотя их общий размер может быть и больше, но это уже трудности "хирургов". Посетитель только зайдя на страницу, и не загрузив полное изображение, сможет по видимым кускам определить, надо ли догружать остальное или нет. Кстати очень часто, да почти всегда, нормальные вебмастера разрезают слишком большие изображения на мелкие. И более того это правило находится далеко не на последнем месте из 10 заповедей сайт-дизайнеров. Так что думайте и решайте. Помоему приятнее грузить больщую картинку по кусочкам и видеть, что там появляется, чем ждать полчаса, а потом разочароваться и послать к какой-то матери обидчика...
Да че я ваще тут Вам это все объясняю, Вы и сами прекрасно знаете...