Различные ссылки на одно и то же изображение с использованием сопоставления - PullRequest
0 голосов
/ 08 июля 2011

У меня есть одно изображение с различными вкладками для навигации, как показано: -

my navigation image

Я хочу, чтобы я использовал одно и то же изображение, чтобы указывать на другую ссылку, используя отображение или некоторые координаты.

Может ли кто-нибудь помочь мне с помощью кода, чтобы сделать это ???

ИЛИ любая ссылка сделает эту работу.

Заранее спасибо :):)

Ответы [ 5 ]

1 голос
/ 08 июля 2011

использовать карту

образец:

<img src=ur_image usemap="#linkmap">

<map name="linkmap">

    <area shape="rect" coords="x1,y1,x2,y2" href="url_1" />

    <area shape="rect" coords="some other coords" href="url_2" />

    <area shape="rect" coords="some other coords" hhref="url_3" />
</map>  

где (x1, y1) - координата верхней левой вершины прямоугольника 1 («домашняя вкладка») и (x2, y2) - нижняя правая вершина того же прямоугольника. и так далее для всех прямоугольников.

1 голос
/ 08 июля 2011

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

Действительно, просто не используйте карту изображений.Вы будете сожалеть об этом.

Редактировать: Вот ссылка , показывающая, как это делается.

Редактировать еще раз: Здесь я сделал это для вас.*

1 голос
/ 08 июля 2011

Одним из способов будет использование Карта изображений

1 голос
/ 08 июля 2011

Вы можете использовать тег карты.Вот пример: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap

1 голос
/ 08 июля 2011

Могу ли я предложить использовать спрайты CSS вместо картирования изображений?Если нет, то сообщите мне, чтобы мы заставили его работать вместе?

Карта изображений имеет много применений, и одним из наиболее важных применений является маркировка некоторых горячих точек на карте (изображении), чтобы пользовательможете нажать на эту часть и перейти на другую страницу.Но разработчики и дизайнеры использовали его некоторое время назад для создания навигационных меню, и почему?Посмотрим.Когда вы используете в своем документе 10 изображений, браузеры отправляют на сервер 10 запросов на получение этих 10 изображений.Это похоже на то, как твоя мама посылает тебя на кухню 10 раз, чтобы принести 10 ложек одну за другой (представь себе!).Многие дизайнеры используют фоновые изображения для пунктов меню.Поэтому, если в меню 5 пунктов, они обычно используют 5 * 3 = 15 фоновых изображений (1 для нормального состояния, 1 для наведения и 1 для выбранного на элемент меню).Это означает нагрузку на веб-сайт, меньшее время загрузки, больший трафик сервера и много других проблем.Поэтому они использовали карты изображений для однократной загрузки изображения и делят его на клиентской стороне на кликабельные части для навигации пользователя к нужным страницам.Но тот же эффект можно использовать с техникой, известной как CSS Sprites.В этом методе эти 15 изображений объединяются в одно изображение, и на стороне клиента, используя CSS для каждого элемента, отображается только часть этого изображения.Это как твоя мама просит тебя пойти на кухню принести 15 ложек в пачке.

...