Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.02.2009, 00:41
Новичок на форуме
Отправить личное сообщение для Kenan Bek Посмотреть профиль Найти все сообщения от Kenan Bek
 
Регистрация: 06.02.2009
Сообщений: 4

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

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

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

</div>


при наведении курсора на рисунок картинка меняется, но и загружается в это время. а это неодубно. приходиться держать курсор над рисунком чтоб он до конца загружался. а как зделать так чтобы рисунки загружались при загрузки станицы и чтобы при наведении сразу менялся?
Ответить с цитированием
  #2 (permalink)  
Старый 06.02.2009, 00:49
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

Для предварительной загрузки можно использовать такую конструкцию:
<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>
Ответить с цитированием
  #3 (permalink)  
Старый 06.02.2009, 01:21
Новичок на форуме
Отправить личное сообщение для Kenan Bek Посмотреть профиль Найти все сообщения от Kenan Bek
 
Регистрация: 06.02.2009
Сообщений: 4

пожалуйста скажите как будет выглядет код полностью?
Ответить с цитированием
  #4 (permalink)  
Старый 06.02.2009, 01:39
Отправить личное сообщение для Андрей Параничев Посмотреть профиль Найти все сообщения от Андрей Параничев
 
Регистрация: 21.02.2008
Сообщений: 1,250

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

Последний раз редактировалось Андрей Параничев, 06.02.2009 в 01:43.
Ответить с цитированием
  #5 (permalink)  
Старый 06.02.2009, 01:58
Новичок на форуме
Отправить личное сообщение для Kenan Bek Посмотреть профиль Найти все сообщения от Kenan Bek
 
Регистрация: 06.02.2009
Сообщений: 4

Ок! спасибо вам огромное.
Ответить с цитированием
  #6 (permalink)  
Старый 17.12.2009, 11:43
Новичок на форуме
Отправить личное сообщение для kolya Посмотреть профиль Найти все сообщения от kolya
 
Регистрация: 17.12.2009
Сообщений: 2

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

Понятно, конечно, что это не будет работать, но как лучше сделать?
Ответить с цитированием
  #7 (permalink)  
Старый 18.12.2009, 14:02
Новичок на форуме
Отправить личное сообщение для VovaLun Посмотреть профиль Найти все сообщения от VovaLun
 
Регистрация: 16.12.2009
Сообщений: 6

Код:
Но как можно изменить при наведении не картинку на другую картинку, а карту изображения на картинку:
- У меня не менее глупый вопрос к автору...
После замены Карты-изображения на картинку, какие действия предполагаются?
Во всяком случае, как карта УЖЕ НИКОГДА работать не будет.
Я так мыслю :-)
Ответить с цитированием
  #8 (permalink)  
Старый 19.12.2009, 06:39
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

а зачем тебе карта изображения, если ты ее на картинку при наведении меняешь?
Ответить с цитированием
  #9 (permalink)  
Старый 19.12.2009, 09:55
Новичок на форуме
Отправить личное сообщение для kolya Посмотреть профиль Найти все сообщения от kolya
 
Регистрация: 17.12.2009
Сообщений: 2

Ну просто у меня есть уже нарисованная шапка с кнопками (картами изображений), а потом вот решил сделать фишку, чтоб при наведении на кнопку она подсвечивалась..
Ответить с цитированием
  #10 (permalink)  
Старый 19.12.2009, 10:06
Аватар для x-yuri
Отправить личное сообщение для x-yuri Посмотреть профиль Найти все сообщения от x-yuri
 
Регистрация: 27.12.2008
Сообщений: 4,201

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



Опции темы Искать в теме
Искать в теме:

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
изменение рисунка в меню при помощи Javasripta Maxim Общие вопросы Javascript 1 05.09.2008 13:59
Изменение изображения при наведении на ссылку MDS Общие вопросы Javascript 1 08.08.2008 20:54
Не отрабатывает событие onmouseout при внедрении нового слоя ilshat Элементы интерфейса 3 28.07.2008 05:27
Всплывающее окошко, как подсказка при наведении на кнопку. rastafaray Общие вопросы Javascript 4 23.05.2008 23:55