изменения рисунка при наведении курсора
У меня такой код:
<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> Понятно, конечно, что это не будет работать, но как лучше сделать? |
Код:
Но как можно изменить при наведении не картинку на другую картинку, а карту изображения на картинку:После замены Карты-изображения на картинку, какие действия предполагаются? Во всяком случае, как карта УЖЕ НИКОГДА работать не будет. Я так мыслю :-) |
а зачем тебе карта изображения, если ты ее на картинку при наведении меняешь?
|
Ну просто у меня есть уже нарисованная шапка с кнопками (картами изображений), а потом вот решил сделать фишку, чтоб при наведении на кнопку она подсвечивалась..
|
скорее всего тебе не нужна карта изображений (статья)
|
| Часовой пояс GMT +3, время: 18:59. |