VPF::Смена картинки - Форум программистов

PARROT

Дата 19.3.2005, 21:28 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50

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

--------------------

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 19.3.2005, 21:38 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

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

Это сообщение отредактировал(а) Aliance - 20.3.2005, 00:14

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 19.3.2005, 21:55 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50

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

--------------------

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 19.3.2005, 23:02 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

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

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 19.3.2005, 23:43 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50

Может я чего не допоняла или неправильно объясняю.
Но у меня не работает.
Пишу по шагам:
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 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

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

Цитата

При том что ячейка может являться ссылкой, а может и нет.

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

Цитата

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

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 20.3.2005, 00:20 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50

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

--------------------

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Aliance

Дата 20.3.2005, 00:28 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

Цитата(PARROT @ 20.3.2005, 00:20)

Мое открывающееся меню теперь закрывается обратно, так как возвращается обратно на index.php

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

Цитата(PARROT @ 20.3.2005, 00:20)

Все работает, а нельзя это сделать без a href ?

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

Код


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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 20.3.2005, 00:33 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50

Вот так не работает:

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

PARROT

Дата 20.3.2005, 00:44 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50

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

--------------------

Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!

Sardar

Дата 20.3.2005, 16:15 (ссылка)

(нет голосов)

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317

Вставлю и своё слово 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см". Хотя я предпочитаю задавать размеры стилями, ИМХО проще.

--------------------

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »