Шаги, необходимые для ручного создания кликабельной карты изображений:
- Получите изображение: вы можете получить изображения в формате GIF или JPEG из архивов, создать их для себя или преобразовать другие форматы в формат GIF или JPEG, а затем сохранить их в своем
public_htmlкаталоге. В этом примере мы будем использовать следующее изображение GIF с именем mymap.gif :
Вы можете получить это из моего анонимного FTP-архива:
ftp://ftp.u.washington.edu/pub/user-supported/larryg - Создавайте списки координат: большинство пакетов для рисования или отображения показывают вам координаты любой точки на изображении. Например,
- Microsoft «Paint» отображает координаты X, Y вашего текущего положения мыши в середине строки состояния в нижней части дисплея.
- PhotoShop показывает пиксельные координаты положения мыши при условии, что
- вы активируете отображение ИНФО, нажав ОКНО, затем ПАЛИТРЫ, затем ПОКАЗАТЬ ИНФОРМАЦИЮ
- Вы активируете ОПЦИИ ПАЛИТРЫ на дисплее ИНФО (щелкните черный треугольник справа вверху) и выберите опцию ПИКСЕЛИ для координат мыши.
- Программа Unix
xvотображает координаты мыши, если вы нажмете кнопку мыши 2
Обратите внимание, что значения пикселей всегда начинаются с «0,0» в верхнем левом углу и увеличиваются по мере перемещения вниз и вправо. Координаты могут определять многоугольники или прямоугольники (или другие формы, которые мы здесь не рассматриваем). Например, координаты полигональной области могут быть определены следующим образом:
...SHAPE="POLY" COORDS="32,36 32,188 65,136 133,124 82,36 ... - Создайте HTML-код для карты: синтаксис интерактивной карты:
{some HTML code here} <MAP NAME = "name"> <AREA SHAPE="shape" COORDS="x,y ..." HREF="link-for-this-region"> ... <AREA SHAPE="shape" COORDS="x,y ..." HREF="link-for-this-region"> <AREA SHAPE="DEFAULT" HREF="link-for-default"> </MAP> <IMG SRC="location-of-image" USEMAP="#name"> {some HTML code here}где вы указываете значения, которые отображаются в нижнем регистре. "Формы" могут бытьRECT, CIRCLE, POLY, or DEFAULT.
В следующем примере изображение содержит две области: левый желтый многоугольник и правый зеленый многоугольник. Ссылки HTML для левой и правой областей имеют имена lf.html, rt.htmlи хранятся в подкаталоге с именем Imageв моем public_htmlкаталоге и активируются, когда я нажимаю на эти области. Само изображение GIF имеет имя mymap.gifи хранится в том же подкаталоге. Вот HTML-код этой карты:
<MAP NAME = "shapes">
<AREA SHAPE="POLY" COORDS=
"32,36 32,188 93,188 65,136 133,124 82,36" HREF="Image/lf.html">
<AREA SHAPE="POLY" COORDS=
"93,188 245,188 244,36 82,36 133,124 65,136" HREF="Image/rt.html">
</MAP>
<IMG SRC="Image/mymap.gif" USEMAP="#shapes">
And here is the actual map which you can click on: