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

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

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

спасибо,

10
css html imagemap javascript

4 ответов

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

использовать прозрачный <div> поверх каждой части "image-map" (ссылка), а затем используйте 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>

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

13

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

7

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

0

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

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

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

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

0