Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 26.11.2010, 16:10   #1
moneyman
Новичок
Джуниор
 
Регистрация: 26.11.2010
Сообщений: 4
По умолчанию появление изображения при наведении

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

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



При на ведении на черные мониторы появляется подсветка (уже готова картинка).
Трудность в том, что у меня не выходит что-то постоянно:
я пробывал спрайтами
Код:
...
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}
Требуется помощь. Возможно у Вас есть другие варианты, я их опробую.

Последний раз редактировалось moneyman; 26.11.2010 в 17:03.
moneyman вне форума Ответить с цитированием
Старый 26.11.2010, 16:58   #2
Виталий Желтяков
Старожил
 
Аватар для Виталий Желтяков
 
Регистрация: 19.04.2010
Сообщений: 2,702
По умолчанию

Я подобную идею воплотил следующим образом:
- На фоновую картинку накладываются скрытые изображения свечения (png). Затем поверх этого накладывается точечное прозрачное изображение, которое растягивается на весь экран, и на которое вешается <map> с <area>. <area> - области активных на рисунке элементов, которые при движении по ним onmousemove делают необходимые изображения свечения видимыми, а при покидании - скрытыми.
Способ проверен.
Виталий Желтяков вне форума Ответить с цитированием
Старый 26.11.2010, 17:07   #3
moneyman
Новичок
Джуниор
 
Регистрация: 26.11.2010
Сообщений: 4
По умолчанию

Виталий Желтяков, похоже Вы сейчас решили почти все мои проблемы с этим сайтом. Еще одна бессонная ночь и, возможно, он будет доделан)
moneyman вне форума Ответить с цитированием
Старый 26.11.2010, 17:20   #4
Виталий Желтяков
Старожил
 
Аватар для Виталий Желтяков
 
Регистрация: 19.04.2010
Сообщений: 2,702
По умолчанию

Пример:
Код:
<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;">
Я думаю сообразите, что есть что.
Виталий Желтяков вне форума Ответить с цитированием
Старый 26.11.2010, 17:47   #5
moneyman
Новичок
Джуниор
 
Регистрация: 26.11.2010
Сообщений: 4
По умолчанию

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

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

Буду очень благодарен, если объясните, но в любом случае я воспользуюсь Вашим советом.
moneyman вне форума Ответить с цитированием
Старый 26.11.2010, 21:24   #6
Виталий Желтяков
Старожил
 
Аватар для Виталий Желтяков
 
Регистрация: 19.04.2010
Сообщений: 2,702
По умолчанию

Что такое <map> и <area> объяснять не буду - яндекс вам в помощь... Кстати, код можно сгенерировать в gimp.
images/backgraund.jpg - фоновая картинка,
images/xxx.png - картинка подсветка. Советую использовать png.
images/1x1.gif - изображение прозрачная точка.
Обратите внимание на порядок следования изображений - он важен.
Виталий Желтяков вне форума Ответить с цитированием
Старый 26.11.2010, 21:40   #7
moneyman
Новичок
Джуниор
 
Регистрация: 26.11.2010
Сообщений: 4
По умолчанию

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

как сделаю - обязательно отпишусь!!
Спасибо Вам!
moneyman вне форума Ответить с цитированием
Старый 26.11.2010, 22:11   #8
Виталий Желтяков
Старожил
 
Аватар для Виталий Желтяков
 
Регистрация: 19.04.2010
Сообщений: 2,702
По умолчанию

Цитата:
только в справочниках описывается этот метод для вставки ссылки на область картинки!
Да, верно. Поэтому этот способ даже работает в древних браузерах.
Виталий Желтяков вне форума Ответить с цитированием
Старый 21.06.2012, 14:58   #9
napacanor
Новичок
Джуниор
 
Регистрация: 20.06.2012
Сообщений: 1
По умолчанию

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

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

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


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение изображения при наведении мышки? lionman Общие вопросы Delphi 24 12.06.2010 13:03
Появление новой формы при нажатии на кнопку. vedro-compota Общие вопросы Delphi 14 11.05.2010 15:08
Увеличение изображения при наведении указателя Savato HTML и CSS 2 07.10.2009 22:39
появление картинки при выполнении кода kate158 Общие вопросы Delphi 13 29.09.2009 15:43
Смена изображения при наведении не на белую область Alex Cones Общие вопросы Delphi 6 10.05.2009 17:17