Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Смена картинки


Автор: PARROT 19.3.2005, 21:28
Задача такая, есть меню.
Нужно чтобы при наведении мыши на меню появлялась картинка, а при сведении она исчезала.
Помогите плиз.

Автор: Aliance 19.3.2005, 21:38
PARROT
Опиши задачу конкретнее, вот набросок (чтобы ты поняла суть), но нужно более четче объяснять, что тебе требуется:
Код

<HTML>
<HEAD>
<title>Тест</title>
<script type="text/javascript">
function showpicture(img) {
 var elem = document.getElementById("block");
 elem.innerHTML = "<IMG src='" + img + "'>";
}
function hidepicture() {
 var elem = document.getElementById("block");
 elem.innerHTML = "";
}
</script>
</HEAD>

<BODY>

<IMG src="" onmouseover="showpicture('1.gif')" onmouseout="hidepicture()">

<div id="block" style="border: 1px red solid; padding: 10px;">
</div>

</BODY>
</HTML>



Тут демо: http://files.vingrad.ru/Aliance/file1.html

Автор: PARROT 19.3.2005, 21:55
Вот сайт http://traktora.spb.ru/new/index.php
Там есть меню.
На которое при наведении мыши, рядом с меню, слева, должна высвечиваться картинка (синяя точка), при сведении с меню, точка исчезает.

Автор: Aliance 19.3.2005, 23:02
Аа, так бы сразу. Пример уже есть готовый, так как я на сам пользовался таким (кстати, если восп. поиском - то можно найти обсуждение этой темы...)
Пример тут: http://files.vingrad.ru/Aliance/file1.html
Добавлено @ 23:04
Так же там стоит предварительная загрузка невидимого изображения - IE будет моментально отображать смену...

PS: если тебе не нравится использования пустого изображения - можно использовать display = none;, но тогда придется делать контейнер фикс. ширины (например таблицу), дабы не портить дизайн...

Автор: PARROT 19.3.2005, 23:43
Может я чего не допоняла или неправильно объясняю.
Но у меня не работает.
Пишу по шагам:
1) Этот скрипт я вставила в head
Код

<script language=Javascript>
if (document.images) {
 var img = new Object();
 img['blank'] = new Image(5, 8);
 img['blank'].src = "pic/blank.gif";
 img['viz'] = new Image(5, 8);
 img['viz'].src = "pic/viz.gif";
}
</SCRIPT>

2) В наличии картинки blank.gif и viz.gif
3) сама таблица
Код

<td  title="Тракторы" class=1><IMG src="img/blank.gif" id="pict" width="5" height="8"><a href="index.php" onmouseover="document.getElementById('pict').src = 'img/viz.gif'" onmouseout="document.getElementById('pict').src = 'img/blank.gif'">Тракторы</a></td>

При том что ячейка может являться ссылкой, а может и нет.
Но у меня не работает.
Если можно код в студию.
smile

Автор: Aliance 20.3.2005, 00:09
Во-первых, аргументы функции new Image(); - высота и ширина, а не наоборот!
Во-вторых, в сценарии картинки лежат в папке pic, а в HTML разметке - в img.
И потом, id каждой картинки должен быть разным и совпадать с id, переданным аргументом в функции рядом стоящей ссылки.
Цитата
При том что ячейка может являться ссылкой, а может и нет.

И какого поведения от картинки ты тогда хочешь? Чтобы она всегда отображалась?

Цитата
Но у меня не работает.

Что именно не так? Исправь ошибки и протести заного.

Автор: PARROT 20.3.2005, 00:20
Да... просмотрела. Все работает, а нельзя это сделать без a href ?
Мое открывающееся меню теперь закрывается обратно, так как возвращается обратно на index.php

Автор: Aliance 20.3.2005, 00:28
Цитата(PARROT @ 20.3.2005, 00:20)
Мое открывающееся меню теперь закрывается обратно, так как возвращается обратно на index.php

Чего? Не понял... меню как такогого я там вообще не увидел (может плохо искал?!)

Цитата(PARROT @ 20.3.2005, 00:20)
Все работает, а нельзя это сделать без a href ?

Ну поставь ты, скажем, так:
Код

<td><!-- тут картинка --></td>
<td onmouseover="....." .... <!-- тут обработчики событий --> ... ><!-- тут текст --></td>

Автор: PARROT 20.3.2005, 00:33
Вот так не работает:
Код

<td  title="тракторы" class=1><IMG src="pic/blank.gif" id="pict" width="5" height="8" onmouseover="document.getElementById('pict').src = 'pic/viz.gif'" onmouseout="document.getElementById('pict').src = 'pic/blank.gif'"> Тракторы</td>

Я залила http://traktora.spb.ru/new/index.php где меню закрывается обратно, то есть возвращается на index
Добавлено @ 00:37
Супер! Спасибо! Огромное! Все работает! УРА!!!!
smile

Автор: Aliance 20.3.2005, 00:41
Незачто. Кстати, имхо, поставь пробел между картинкой и ссылкой, ибо смотрится не очень :-)

Автор: PARROT 20.3.2005, 00:44
Поставлю конечно, дизайн только разрабатывается. smile

Автор: Sardar 20.3.2005, 16:15
Вставлю и своё слово smile Пользуйтесь в inline обработчиках событий ссылкой this:
Код
<td  title="тракторы" class=1><IMG src="pic/blank.gif" id="pict" width="5" height="8" onmouseover="this.src = 'pic/viz.gif'" onmouseout="this.src = 'pic/blank.gif'" /> Тракторы</td>

Но на сколько я понял, менять картинку мы будем наведя мышь на пятак 5х8 smile Обычно нужно это:
Код
<td  title="тракторы" class="1" onmouseover="this.firstChild.src = 'pic/viz.gif'" onmouseout="this.firstChild.src = 'pic/blank.gif'"><IMG src="pic/blank.gif" id="pict" width="5" height="8" /> Тракторы</td>


Второе: размеры для презагрузочной картинки вставлять не обязательно, но полезно, т.к. если картинка не загруженна(не найденна), то бродилка не будет убивать дизайн своим "квадратиком 1см х 1см". Хотя я предпочитаю задавать размеры стилями, ИМХО проще.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)