Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Смена картинки, при наведении на ссылку 
:(
    Опции темы
PARROT
  Дата 19.3.2005, 21:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


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

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



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


--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
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
PM MAIL WWW ICQ Skype   Вверх
PARROT
Дата 19.3.2005, 21:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


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

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



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


--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
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;, но тогда придется делать контейнер фикс. ширины (например таблицу), дабы не портить дизайн...
PM MAIL WWW ICQ Skype   Вверх
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


--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
Aliance
Дата 20.3.2005, 00:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


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

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



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

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

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

Что именно не так? Исправь ошибки и протести заного.
PM MAIL WWW ICQ Skype   Вверх
PARROT
Дата 20.3.2005, 00:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


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

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



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


--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
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>


PM MAIL WWW ICQ Skype   Вверх
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


--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
Aliance
Дата 20.3.2005, 00:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


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

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



Незачто. Кстати, имхо, поставь пробел между картинкой и ссылкой, ибо смотрится не очень :-)
PM MAIL WWW ICQ Skype   Вверх
PARROT
Дата 20.3.2005, 00:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


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

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



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


--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
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
 Оценить мои качества можно тут.
PM   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1283 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.