изменения рисунка при наведении курсора
У меня такой код:
<div onmouseover="yux3.src='../img/yux_3.jpg';" onmouseout="yux3.src='../img/yux_3b.jpg';"> <img name=yux3 src="../img/yux_3b.jpg"> </div> при наведении курсора на рисунок картинка меняется, но и загружается в это время. а это неодубно. приходиться держать курсор над рисунком чтоб он до конца загружался. а как зделать так чтобы рисунки загружались при загрузки станицы и чтобы при наведении сразу менялся? |
Для предварительной загрузки можно использовать такую конструкцию:
<script type="text/javascript">
new Image().src = "путь_к_файлу_изображения";
</script>
Кстати, вы получаете доступ к элементу через глобальную переменную - это будет работать только в Internet Explorer. Для совместимости с другими браузерами лучше использовать функцию document.getElementById или document.getElementsByName для получения элемента по id и name соответственно.
<div onmouseover="document.getElementById('yux3').src='../img/yux_3.jpg';"
onmouseout="document.getElementById('yux3').src='../img/yux_3b.jpg';">
<img id=yux3 src="../img/yux_3b.jpg">
</div>
|
пожалуйста скажите как будет выглядет код полностью?
|
Тег script вы можете разместить в любом месте в секции head или body:
<script type="text/javascript">
new Image().src = "../img/yux_3.jpg";
</script>
<div onmouseover="document.getElementById('yux3').src='../img/yux_3.jpg';"
onmouseout="document.getElementById('yux3').src='../img/yux_3b.jpg';">
<img id=yux3 src="../img/yux_3b.jpg">
</div>
new Image().src = "../img/yux_3.jpg"; Эта конструкция просто говорит браузеру, что изображение нужно загрузить. После того, как изображение будет загружено, оно будет везде отображаться из кеша. Поэтому, если вы сразу наведете мышью на блок, картинка может и не успеет загрузится. Но вот начнется её загрузка во время загрузки всей страницы, а не только тогда, когда сработает onmouseover. |
Ок! спасибо вам огромное.
|
Извиняюсь за супер ламерский вопрос
Но как можно изменить при наведении не картинку на другую картинку, а карту изображения на картинку:
<body> <body onload="preload('Картинка.jpg')"> <table width="800" border="1" align="center" cellpadding="0" cellspacing="0"> <tr> <td><img src="img/header.jpg" width="800" height="156" border="0" usemap="#Map" /></td> </tr> <tr> <td height="441" background="img/center.jpg">текст</td> </tr> <tr> <td><img src="img/footer.jpg" width="800" height="103" /></td> </tr> </table> <map name="Map" id="Map"><area shape="rect" coords="47,83,202,128" href="about.php" onMouseOver="ChangeImg('ImgName1','картинк .jpg')" onMouseOut="ChangeImg('ImgName1','map')"> <img name="ImgName1" border="0" height="100" width="100" src="map" alt=""> /> </map></body> </html> Понятно, конечно, что это не будет работать, но как лучше сделать? |
Код:
Но как можно изменить при наведении не картинку на другую картинку, а карту изображения на картинку:После замены Карты-изображения на картинку, какие действия предполагаются? Во всяком случае, как карта УЖЕ НИКОГДА работать не будет. Я так мыслю :-) |
а зачем тебе карта изображения, если ты ее на картинку при наведении меняешь?
|
Ну просто у меня есть уже нарисованная шапка с кнопками (картами изображений), а потом вот решил сделать фишку, чтоб при наведении на кнопку она подсвечивалась..
|
скорее всего тебе не нужна карта изображений (статья)
|
Карты изображений... Ну когда же сгорят все говнокниги?!:cray:
зы: сори за оффтоп. |
B~Vladi,
если ты ни разу не использовал карты изображений, это не значит, что они не нужны. |
Kolyaj, а ты знаешь примеры, где они используются и нужны?
|
x-yuri,
приходилось, например, как то делать контрол выбора областей на карте России. |
У меня такая проблема Вот мой сайт (http://wowworld.net.ru/) и когда наводишь на Меню сайта
Главная страница Информация о сайте Интернет-магазин Каталог файлов Обратная связь Гостевая книга Фотоальбомы WoW статьи Форум Блог Доска объявлений Фотошоп онлайн меняется курсор как его сделать как на этом сайте ?(http://wowjp.net/news/2008-06-05-312) |
Цитата:
|
google://css custom cursor
|
Цитата:
|
первая ссылка
http://www.google.com.ua/search?clie...utf-8&oe=utf-8 |
Цитата:
|
а как ты делаешь?
|
<head><style type="text/css">
BODY{cursor:url('http://wowworld.net.ru/humans.cur');} </style> вставляю это в страницы сайта ! и в таблицу CSS :help: |
ну ладно, значит третья ссылка. А вообще, лучше не пугать пользователя "левыми" курсорами ;)
|
<head>
<link rel="stylesheet" type="text/css" href="cursor/cursor.css"/> </head> <body> Hello world! Look at me, I have a new cool cursor! </body> а что в боди писать? |
всё сделал спасибо !! помог!!
|
| Часовой пояс GMT +3, время: 03:55. |