Соединения изображения HTML

Мы видели как создать соединение гипертекста используя текст и мы также выучили как использовать изображения в наших webpages. Теперь мы выучим как использовать изображения для того чтобы создать гиперссылки.

Пример

Он прост использовать изображение как гиперссылка. Нам как раз нужно использовать изображение внутри гиперссылки на месте текста как показан ниже:

<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="http://www.tutorialspoint.com" target="_self"> 
   <img src="/images/logo.png" alt="Tutorials Point" border="0"/> 
</a>
</body>
</html>

Это даст следующий, где вы можете щелкнуть дальше изображения для достижения к домашней странице пункта консультаций.

Click following link

Это был самым простым путем создавать гиперссылки используя изображения. Затем мы увидим как мы можем создать Мыш-Чувствительные соединения изображения.

Мыш-Чувствительные изображения

Стандарты HTML и XHTML обеспечивают характеристику которая препятствует вам врезать много различных соединений внутри одиночного изображения. Вы можете создать различные соединения на одиночном изображении основанном на различных координатах доступных на изображении. Раз друг соединения прикрепленные к различным координатам, мы могут щелкнуть различные части изображения для того чтобы раскрыть документы цели. Такие мыш-чувствительные изображения как карты изображения.

2 путя создать карты изображения:

карты изображения Sserver-стороны - это позволено атрибутом ismap бирки <img> и требует доступа к серверу и родственной изображени-карте обрабатывая применения.
карты изображения Клиент-стороны - это создано с атрибутом usemap бирки <img>, вместе с соответствуя бирками <map> и <area>.

Карты изображения Сервер-Стороны

Здесь вы просто кладете ваше изображение внутри гипер соединения и используете атрибут ismap который делает им специальное изображение и когда потребитель щелкает некоторое место в пределах изображения, браузер проходите координаты указателя мыши вместе с URL определенного в бирке <a> к серверу паутины. Сервер использует координаты мыш-указателя для того чтобы определить который документ, котор нужно поставить назад к браузеру.

Когда ismap использован, атрибут href содержа бирки <a> должен содержать URL приложения сервера как cgi или сценарий etc. PHP обрабатывать входящий запрос основанный на пройденных координатах.

Координаты положения мыши пикселы экрана подсчитанные от верхн-левого угла изображения, начиная с (0,0). Координаты, предшествуемые вопросительным знаком, добавлены к концу URL.

Например, если потребитель щелкает 20 пикселы сверх и 30 пикселы вниз от верхн-левого угла следующего изображения:, то

Click following link

Что было произведено следующим фрагментом Кода:

<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="/cgi-bin/ismap.cgi" target="_self"> 
   <img ismap src="/images/logo.png" alt="Tutorials Point" border="0"/> 
</a>
</body>
</html>

После этого браузер посылает следующие параметры поиска к серверу паутины который может быть обработан сценарием ismap.cgi или архивом карты и вы можете соединить любые документы вы любите к этим координатам:

/cgi-bin/ismap.cgi?20,30

Этот путь вы можете задать различные соединения к различным координатам изображения и когда те координаты щелкнуты, вы можете раскрыть соответствуя соединенный документ. Для того чтобы выучить больше о атрибуте ismap, вы можете проверить как использовать ismap изображения?

Примечание: Вы выучите CGI программируя когда вы изучите программировать Perl. Вы можете написать ваш сценарий для того чтобы обрабатывать эти пройденные координаты используя PHP или любой другой сценарий также. Для теперь сосредоточим наше внимание на учить HTML и более поздно вы можете revisit этот раздел.

Карты изображения Клиент-Стороны

Карты изображения клиента бортовые позволены атрибутом usemap бирки <img/> и определены специальными бирками выдвижения <map> и <area>.

Изображение которое идет сформировать карту введено в страницу используя бирку <img/> как нормальное изображение, кроме того что оно носит экстренный вызванный атрибут usemap. Значение атрибута usemap значение которое будет использовано в бирке <map> к биркам карты и изображения соединения. <map> вместе с бирками <area> определяет все координаты на аэроснимке и соответствуя соединения.

Бирка <area> внутри бирки карты, определяет форму и координаты для того чтобы определить границы каждой clickable Точки доступа доступной на изображении. Здесь пример от карты изображения:

<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src=/images/html.gif alt="HTML Map" border="0" usemap="#html"/>
<!-- Create  Mappings -->
<map name="html">
   <area shape="circle" 
   coords="80,80,20" href="/css/index.htm" alt="CSS Link" target="_self" />
   <area shape="rect" 
   coords="5,5,40,40" alt="jQuery Link" href="/jquery/index.htm" target="_self" />
</map>
</body>
</html>

Система координат

Натуральная величина coords зависел полностью на форме в вопросе. Здесь сводка, быть следовать детальными примерами:

rect = x₁ , y₁ , x₂ , y₂: x₁ и y₁ координаты верхнего левого угла прямоугольника; x₂ и y₂ координаты более низкого правого угла.
круг = x_c , y_c , радиус: x_c и y_c координаты центра круга, и радиус радиус круга. Круг центризованный на 200,50 с радиусом 25 имел бы coords= " 200,50,25" атрибута
поли = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ ,… x_n , y_n: Различные x-y пары определяют вершины (пункты) полигона, при «линия» будучи нарисованным от одного пункта к следующему пункту. Ромбовидный полигон с своим верхним пунктом на 20,20 и 40 пикселах поперек на свои самые широкие этапы имел бы coords= " 20,20,40,40,20,60,0,40" атрибута.

Все координаты по отношению к верхн-левому углу изображения (0,0). Каждая форма имеет родственное URL.You может использовать любое програмное обеспечение изображения для того чтобы знать координаты различных положений.