Комплексная Образовательная Система
"Интернет"
~~~ KOCI.INUMO.RU ~~~

Чтобы сделать ссылку с изображения достаточно обернуть тегом ссылки <a> нужный нам тег <img> - в упрощенном виде это выглядет вот так:
<a href="куда ссылаемся"><img src="изображение" /></a>

Все точно также, как в случае с текстовой ссылкой.

Гораздо сложнее, если мы имеем один графический файл и нам необходимо сделать разные ссылки с разных участков данного графического файла.

Для примера возьмем вот такой файл:


Это один графический файл, но надо как-то сделать так, чтобы покупатели настенных часов кликали по левой части, а покупатели песочных часов - по правой. После чего первые должны отправляться на ресурс с настенными часами, а вторые - с песочными.

Вообще, лучший выход - вырезать из этого файла два нужных фрагмента с помощью Фотошопа, и на этом проблемы заканчиваются.

Но можно обойтись и без хирургического вмешательства, хотя в данном случае придется немного напрячься.

Прежде всего необходимо получить координаты в пикселях левого верхнего угла и правого нижнего угла для обоих фрагментов.

Решение проблемы облегчает два обстоятельства:

1. Точность не нужна - да, точность измерения тут совсем не нужна, можно примерно прикинуть и этого будет вполне достаточно.
2. Есть линейки - я одолжу вам пару линеек, горизонтальную и вертикальную - их можно таскать по экрану с помощью мыши.
3. Есть мышь - мышкой можно водить по данному изображению и кликом фиксировать координаты текущей точки (запоминает до 4 точек, сколько нам и нужно).

Сам я тоже меряю этими линейками м мышкой, у меня получилось так:

1. 45, 15 - верхний левый угол для настольных часов.
2. 287, 80 - нижний правый угол для настольных часов.
3. 311, 15 - верхний левый угол для песочных часов.
4. 552, 80 - нижний правый угол для песочных часов.

Теперь вставляем результаты наших замеров в HTML код: Как мы видим процесс кодировки в данном случае достаточно сложный. Стоит ли затрат получаемый результат? Это надо определять в каждом конкретном случае.

Наша тестовая страничка после данного урока:
article_027.html ← кликните, чтобы посмотреть, как выглядит пример на данном сайте...
article_027.zip ← скачайте пример, чтобы установить на свой сайт...