Hover только по области картинки, над прозрачностью hover не нужен


Вот есть картинка, их будет несколько одна за одной, все картинки будут ссылками, надо сделать чтобы наведение и переход был только при клике по самой картинке, а за областью картинки ховер не нужен, так как за картинкой будет другая картинка со своим ховером.
Существуют ли какие-либо решения для таких случаев? Может кто-то встречал где-либо?
0
javascript jquery

1 ответов

Вы можете использовать тег "map".
http://www.htmlbook.ru/html/map.html

<img src="images/yourimage.png" width="320" height="240" alt="" usemap="#Navigation">
<map name="Navigation">
  <area shape="poly" coords="20,20,40,40,30,80" href="blablabla.html" alt="">
  </map>

Других разумных способов не существует.
Данный же использовать массово (для картинок каталога и т.п.) не получится, т.к. для каждого изображения необходимо описать свой мап.
2

На этой странице исходник и описание jQuery-плагина, на этой - пример, как это работает. Дальше справитесь? :)

2

Прозрачные пиксели можно попробовать детектировать с помощью GD. но вот только представить себе объем imagemap'а сгенерированного попиксельного я боюсь, кроме того такие данные лучше кэшировать.

Если смотреть в сторону JS то я бы искал способ конвертнуть изображение в canvas.

Дальше - флеш, не уверен насчет функций анализа подгруженных изображений.

Найти простое решение скорее всего не выйдет.

1

JS позволяет определять над каким объектом находится курсор и определять положение курсора на странице и в окне, также узнать положение объекта на странице. Считайте и вычисляйте.

Или поместите на картинку прозрачный слой в виде сетки на котором нанесети все что Вам требуется.

0

По картинке ничего определить невозможно, цвет (или его отсутствие) может определить только графический пакет, для каждой картинки надо создать собстенную сетку. Это дополнительная работа, точно такая же как если испотльзовать flash или java-аплет.

0