Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   изменения рисунка при наведении курсора (https://javascript.ru/forum/events/2742-izmeneniya-risunka-pri-navedenii-kursora.html)

Kenan Bek 06.02.2009 00:41

изменения рисунка при наведении курсора
 
У меня такой код:

<div onmouseover="yux3.src='../img/yux_3.jpg';"
onmouseout="yux3.src='../img/yux_3b.jpg';">

<img name=yux3 src="../img/yux_3b.jpg">

</div>


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

Андрей Параничев 06.02.2009 00:49

Для предварительной загрузки можно использовать такую конструкцию:
<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>

Kenan Bek 06.02.2009 01:21

пожалуйста скажите как будет выглядет код полностью?

Андрей Параничев 06.02.2009 01:39

Тег 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.

Kenan Bek 06.02.2009 01:58

Ок! спасибо вам огромное.

kolya 17.12.2009 11:43

Извиняюсь за супер ламерский вопрос
 
Но как можно изменить при наведении не картинку на другую картинку, а карту изображения на картинку:
<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>

Понятно, конечно, что это не будет работать, но как лучше сделать?

VovaLun 18.12.2009 14:02

Код:

Но как можно изменить при наведении не картинку на другую картинку, а карту изображения на картинку:
- У меня не менее глупый вопрос к автору...
После замены Карты-изображения на картинку, какие действия предполагаются?
Во всяком случае, как карта УЖЕ НИКОГДА работать не будет.
Я так мыслю :-)

x-yuri 19.12.2009 06:39

а зачем тебе карта изображения, если ты ее на картинку при наведении меняешь?

kolya 19.12.2009 09:55

Ну просто у меня есть уже нарисованная шапка с кнопками (картами изображений), а потом вот решил сделать фишку, чтоб при наведении на кнопку она подсвечивалась..

x-yuri 19.12.2009 10:06

скорее всего тебе не нужна карта изображений (статья)


Часовой пояс GMT +3, время: 00:42.