Выделите раздел изображения в JavaScript.

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

Есть ли способ, которым я могу инвертировать (или иным образом выделить) небольшой раздел изображения JavaScript?

Ответ 1

Вместо использования карт изображений вы можете попробовать этот метод CSS:

Используйте прозрачный <div> поверх каждой части "изображение-карта" (ссылка), а затем используйте псевдокласс класса CSS :hover для обработки выделения.

CSS

#image { 
    position: relative; 
    width: 400px;
    height: 100px; 
    background-image: url(image_map.png); 
}

#map-part { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 50px; 
    height: 50px; 
    background-color: transparent;  
}   

#map-part:hover { 
    background-color: yellow;           /* Yellow Highlight On Hover */
    opacity: 0.2;
    filter: alpha(opacity=20);      
}

HTML:

<div id="image">
    <a id="map-part" href="http://www.example.com/"></a>
</div>

Обратите внимание, что это будет работать только для прямоугольных ссылок.

Ответ 2

Посмотрите jQuery MapHilight.
Я не уверен, что он делает именно то, что вам нужно, но вы можете добиться этого с незначительной настройкой.

Ответ 3

Как окладывать полупрозрачный блок <DIV> в область щелчка, чтобы выделить его?

Ответ 4

Есть много способов,

В способе d сломайте свои изображения на несколько небольших кусочков и используйте таблицу, чтобы объединить их. После этого, используя javascript для замены атрибута thr "src" для эффекта выделения.

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

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