Замена изображения карты изображения на MouseOver - PullRequest
Новая
       16

Замена изображения карты изображения на MouseOver

0 голосов
/ 24 июля 2010

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

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

Спасибо за помощь

1 Ответ

0 голосов
/ 24 июля 2010

Если вы не возражаете против того, чтобы область наведения была «квадратной», тогда с помощью чистого CSS это должно сработать (обратите внимание, замените цвета фона на соответствующее изображение, а border на a только для иллюстрации).Протестировано в Firefox, IE7, IE8:

HTML: 

<a href="#"><span class="img"></span></a>

CSS (отредактировано для ошибок IE7-8) : 

body {
 margin: 300px 218px 178px 400px; /*see explanation below css*/
 width: 22px; /*total width of a tag including padding and borders*/
 height: 22px; /*total height of a tag including padding and borders*/
}

a { /*warning, do not give this position: use margin to position it*/
 width: 20px; 
 height: 20px; 
 display: block; 
 border: 1px solid red; 
 overflow: visible; 
 /*deleted margin from this: moved to body*/
}
a span.img {
 position: absolute; /*this gives it block display by default*/
 top: 0; 
 left: 0; 
 z-index: -1; 
 background-color: yellow; /*bw image here*/
 width: 640px; /*image width*/
 height: 500px; /*image height*/
}
a:hover span.img {
 background-color: blue; /*color image here*/
}
/*deleted  the a:hover span.img:hover as it was not needed after all*/

Конечно, если IE6 вызывает беспокойство, то вам нужно сделать что-то с javascript, чтобы он распознал span:hover.

ДОБАВЛЕНО В РЕДАКТИРОВАНИЕ: Я обнаружил, что тег a будетиногда зависать за пределами определенной области для браузеров IE.Чтобы избежать этого, на теле должны быть поля, размещенные таким образом, чтобы left и top располагали тег a, а right и bottom должны составлять разницу вразмер изображения минус общая ширина тега a.

...