Выделите раздел изображения в JavaScript
Я выполняю маленькую веб-страницу, которая позволяет пользователям нажимать на различные ссылки с помощью карт изображения. Я хотел бы выделить раздел, на который пользователь нажимает, чтобы дать некоторую обратную связь пользователю (они могут нажимать на несколько различных частей быстро).
Существует ли способ, которым я могу инвертировать (или иначе выделиться), маленький раздел изображения JavaScript?
4 ответа
Вместо использования карт изображений вы можете попробовать следующий метод CSS:
Используйте прозрачный CSS: HTML: Обратите внимание, что это будет работать только для прямоугольных ссылок. : hover для обработки выделения.
#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);
}
<div id="image">
<a id="map-part" href="http://www.example.com/"></a>
</div>
Взгляните на jQuery MapHilight.
Я не уверен, что он делает именно то, что тебе нужно, но ты можешь достичь этого с помощью мелкой доработки.
Как насчет наложения полупрозрачного
Есть много способов,
в модном смысле, разбивайте свои изображения на множество мелких кусочков и используйте таблицу для их объединения. После этого, используя javascript, замените атрибут thr "src" на эффект подсветки.
Другим CSS способом, используйте CSS, чтобы зажимать alt. изображение поверх оригинала и контролировать, какая область должна быть видимой.
Лучше иметь одно изображение для всех, чем много маленьких изображений для ускорения, и пользователь получит его без задержек по сети.
.