Карта ссылок

Примеры работы ссылок

Использование такой шикарной возможности как карта ссылок, позволяет нарядно и красочно оформлять не только навигаторы, но и целые сайты.

Нередко встречаю в сети очень оригинально оформленные главные страницы, сделанные на основе карты ссылок.

Самое главное - это происходит БЕЗ действия каких либо скриптов!

Посмотрите сами "работу" карт ссылок. НО! О поведении Google Chrome читайте в конце страницы.

Четыре примера

Карта ссылок №1

Разные части рисунка это ссылки - ведут на разные сайты, либо страницы.

Попробуйте! (откроются в новом окне)

Карта ссылок №2

То же самое. Разные бусы откроют разные рисунки, а фотография одна.

Работа ссылок №3

Ещё пример. Один рисунок ведёт на другой. Правда, это уже НЕ карта ссылок, а обычный переход с маленького рисунка на большой, но всё равно интересно.

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

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

Работа ссылок №4

И, наконец, ещё один, на мой взгляд, - самый интересный(!), четвёртый пример. Когда рисунок ведёт на себя самого же, но только уже в оригинальном размере.

А особенно интересен данный пример тем, что на сервере сайта находится один единственный рисунок (оригинал).
И весь "фокус" - в прописывании HTML-кода вывода изображений.

В атрибутах ширины и высоты прописывается только значение ширины.

И если оригинальные размеры рисунка: 1740×500px, то в "якоре" ссылки я прописал рисунку такие значения: <img src="examp164.jpg" width="500" height="" ... ...>

Вот как раз рисунок с указанной в коде шириной (500px) и видно сейчас на странице. Его браузер вывел согласно заданному значению ширины.  Ну а высоту "height" браузер ему вычислил, и подставил автоматически.

* * *

Описанный только что способ вывода изображений хорош, конечно. Он позволяет экономить серверное место.
Однако, думаю, не стоит злоупотреблять, прописывая ВСЕМ рисункам на сайте только лишь по одному значению в атрибутах кода вывода изображений.

Скорость загрузки страницы при этом падает!

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

Да. Современные браузеры работают быстро!  Но когда изображений на странице МНОГО, то падение скорости загрузки страницы становится тем не менее всё же заметным.

А убедиться в этом можно здесь: "Примеры шапок для сайта" (откроется в новом окне).

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

* * *

Разумеется, высказанный выше негатив (об этом способе) относится только к злоупотреблению им, а так - способ великолепный!

Отображение браузерами

Все браузеры: Internet Explorer, Firefox, Opera абсолютно адекватно реагируют на карту ссылок. Все, кроме столь популярного Google Chrome.

С сожалением обнаружил, что этот "хвалёный" браузер не желает взаимодействовать с картой ссылок.

Почему его разработчики не удосужились вложить в своё "детище" такую великолепную возможность "по умолчанию"?
Не знаю ... ... .

Я не стал делать под картинками текстовые ссылки, чтоб пришедшие с этим браузером могли их открыть, как поступал на страницах "Портфолио" и "Сайты".
Какой смысл?!
Теряется вся "изюминка" такого замечательного метода.