появление изображения при наведении

[moneyman]

здравствуйте, уважаемые!

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



При на ведении на черные мониторы появляется подсветка (уже готова картинка).
Трудность в том, что у меня не выходит что-то постоянно:
я пробывал спрайтами

...
background: url(img/e1.png); /* Путь к файлу с исходным  рисунком */
    display: block; /* Рисунок как блочный элемент */
    width: 192px; /* Ширина рисунка в пикселах */
    height: 200px; /* Высота рисунка */
    position: absolute;/*Позиция по абсолюту*/
    top: 164px;/*Отсуп сверху*/
    left: 110px;/*Отсуп слева*/
...
background-position: 0 -201px; /* Смещение фона */

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

Так же пытался свойством opacity:

opacity:0.25;filter:alpha(opacity=25); onmouseover:this.style.opacity=1;this.filters.alpha.opacity=0"
onmouseout:this.style.opacity=0.4;this.filters.alpha.opacity=100

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

#rollover {background:url(img/e5.png); 
width:213px; height:201px; 
display:block; position:absolute; top:113px; left:164px; 
opacity:0.25;filter:alpha(opacity=25); onmouseover:this.style.opacity=1;this.filters.alpha.opacity=0"
onmouseout:this.style.opacity=0.4;this.filters.alpha.opacity=100}

Требуется помощь. Возможно у Вас есть другие варианты, я их опробую.

[Виталий Желтяков]

Я подобную идею воплотил следующим образом:
- На фоновую картинку накладываются скрытые изображения свечения (png). Затем поверх этого накладывается точечное прозрачное изображение, которое растягивается на весь экран, и на которое вешается <map> с <area>. <area> - области активных на рисунке элементов, которые при движении по ним onmousemove делают необходимые изображения свечения видимыми, а при покидании - скрытыми.
Способ проверен.

[moneyman]

Виталий Желтяков, похоже Вы сейчас решили почти все мои проблемы с этим сайтом. Еще одна бессонная ночь и, возможно, он будет доделан)

[Виталий Желтяков]

Пример:

<map name="map">
<area shape="poly" alt="Что-то" coords="293,720, 293,672, 258,665, 225,649" href="#" onmouseover="$(\'#xxx\').show();" onmouseout="$(\'#xxx\').hide();" onclick="yyy();return false;" >
</map>
<img src="images/backgraund.jpg" width="800" height="720" border="0" alt="" style="position: absolute; left:0px; top:0px;">
<img id="xxx" src="images/xxx.png" width="800" height="720" border="0" alt="" style="position: absolute; left:0px; top:0px; display:none;">
<img src="images/1x1.gif"  border="0" usemap="#map" style="position: absolute; left:0px; top:0px; width:800; height:720;">

Я думаю сообразите, что есть что.

[moneyman]

"images/1x1.gif" - эта картинка имеет размер 1x1px ?
и что должно "подсвечивать"? как раз эта картинка и должна?

то есть, если я задам необходимую позицию для своей готовой картинки для "подсвечивания" и нанесу координаты ее границ, то при ведении по ней она должна появиться, а при выходе за границы, она прячется. Правильно? то тогда я не совсем понимаю смысл от "images/xxx.png".

Буду очень благодарен, если объясните, но в любом случае я воспользуюсь Вашим советом.

[Виталий Желтяков]

Что такое <map> и <area> объяснять не буду - яндекс вам в помощь... Кстати, код можно сгенерировать в gimp.
images/backgraund.jpg - фоновая картинка,
images/xxx.png - картинка подсветка. Советую использовать png.
images/1x1.gif - изображение прозрачная точка.
Обратите внимание на порядок следования изображений - он важен.

[moneyman]

Сообщение от Виталий Желтяков

Что такое <map> и <area> объяснять не буду - яндекс вам в помощь... Кстати, код можно сгенерировать в gimp.
images/backgraund.jpg - фоновая картинка,
images/xxx.png - картинка подсветка. Советую использовать png.
images/1x1.gif - изображение прозрачная точка.
Обратите внимание на порядок следования изображений - он важен.

<map> и <area> я уже изучил.
как искать координаты я тоже разобрался: mapedit.
только в справочниках описывается этот метод для вставки ссылки на область картинки!

как сделаю - обязательно отпишусь!!
Спасибо Вам!

[Виталий Желтяков]

только в справочниках описывается этот метод для вставки ссылки на область картинки!

Да, верно. Поэтому этот способ даже работает в древних браузерах.

[napacanor]

Подскажите, пожалуйста, что исправить в этой строчке

<area shape="poly" alt="Что-то" coords="293,720, 293,672, 258,665, 225,649" href="#" onmouseover="$(\'#xxx\').show();" onmouseout="$(\'#xxx\').hide();" onclick="yyy();return false;" >

Задал свою область, но при проверке выдается ошибка, если эту строчку не "закомментировать"