Перейти из форума на сайт.

НовостиФайловые архивы
ПоискАктивные темыТоп лист
ПравилаКто в on-line?
Вход Забыли пароль? Первый раз на этом сайте? Регистрация
Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Замена нескольких картинок при наведении на картинку/ссылку

Модерирует : Cheery

 Версия для печати • ПодписатьсяДобавить в закладки
Страницы: 1 2

Открыть новую тему     Написать ответ в эту тему

prf_Viper



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Суть проблемы вот в чем:
 
есть скрипт (java), с помощью его работает функция смены картинки. Т.е. я навожу курсор мышки на определенную картинку и она меняется. С этим все понятно.
 
Но мне нужно чтобы еще при этом изменялась и другая картинка, в другом месте.
Возможно ли такое?
Помогите люди!
 
 


 
В файловом архиве лежат два скрипта для реализациии смены картинок.
 
lynx.
 
Уже не два, а четыре  
Svarga.




Уточнил название. — Svarga.

Всего записей: 5 | Зарегистр. 19-03-2003 | Отправлено: 18:58 08-05-2003 | Исправлено: Svarga, 17:44 30-12-2003
Sergeant

Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Ну, смена картинки делается по id, который присваивается определенному изображению. Прибавь один id двум картинкам, например... )

Всего записей: 1553 | Зарегистр. 06-08-2001 | Отправлено: 19:01 08-05-2003
prf_Viper



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Sergeant

Цитата:
Ну, смена картинки делается по id, который присваивается определенному изображению. Прибавь один id двум картинкам

 
По id? Например? Либо ссылочку.

Всего записей: 5 | Зарегистр. 19-03-2003 | Отправлено: 19:06 08-05-2003 | Исправлено: prf_Viper, 19:07 08-05-2003
Cheery



.:МордератоР:.
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
prf_Viper
А не проще проказать скрипт, что есть.. Или самому взглянуть. Там будет что то такое document.id_картинки.src=
вот там же и делаешь вторую строку с id другой картинки.

----------
Away/DND

Всего записей: 52737 | Зарегистр. 04-04-2002 | Отправлено: 02:31 09-05-2003
prf_Viper



Newbie
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Извините, что долго не отвечал.
Ну, собственно я сам давно разобрался. Тему можно закрывать!
 
Если кому интересно или тоже понадобится, то вот:
 
Сам скрипт
----------------
if (document.images) {
image1on = new Image();
image1on.src= "images/img11(измененная).gif";
image1off = new Image();
image1off.src = "images/img1(первая).gif";  
 
image20on = new Image();
image20on.src = "images/img22(измененная).gif";
image20off = new Image();
image20off.src = "images/img2(первая).gif";
}
 
function turnOn(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "on.src");
}
}
 
function turnOff(imageName) {
if (document.images) {
document[imageName].src = eval(imageName + "off.src");
}
}
 
Вставка
------------
первая изменяющаяся картинка
 
<IMG NAME="image11" SRC="images/img1.gif" onMouseOver="turnOn('image11'), turnOn('image1')" onMouseOut="turnOff('image11'), turnOff('image1')">
 
вторая изменяющаяся картинка
 
<IMG NAME="image1" SRC="images/img2.gif">
 
Все очень просто!
 
При нанесении курсора мышки к картинке img1, она изменится на другую (например, на img11), одновременно с этим изменится и картинка img2 на img22, которая может находиться где угодно.
Пример можно посмотреть тут.
Успехов!

 

Всего записей: 5 | Зарегистр. 19-03-2003 | Отправлено: 14:04 22-05-2003
Kexit



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
У меня проблема будет посложнее. Как менять одновременно 2 картинки при наведении на одну из них я разобрался.
Но мне надо следующее:
Есть три картинки: A, B, C. Надо: при наведении на А - А заменялась на А1, а B заменялась на B1; при наведении на B - B заменялась на В2, а С заменялась на С1. При наведении на С - С заменялась на С2.
Вообще то картинок больше, но дальше все понятно будет.
Смысл в том, что практически у каждой картинки (кроме первой) будет не по 2 варианта, а по 3. В моем примере это - В, В1, В2 и С, С1, С2.
Выручите ?

Всего записей: 968 | Зарегистр. 16-02-2003 | Отправлено: 20:44 29-12-2003 | Исправлено: Kexit, 20:58 29-12-2003
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Kexit

Цитата:
У меня проблема будет посложнее. Как менять одновременно 2 картинки при наведении на одну из них я разобрался.  
Но мне надо следующее:  

Добавил пару строчек в этот скрипт, теперь можно заменять любое количество любых картинок при наведении на картинку/ссылку:
 http://forall.ru-board.com/webarchive/over_mult.rar
(собственно, рабочего кода — строчек семь всего )
 
Добавлено
в действии, readme

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 17:35 30-12-2003
bredonosec



Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga -Красиво! А Есть ли скрипт, обрабатывающий и наведение и клик? В смысле: по дефолту стоит картинка 1, при наведении - картинка2, при клике - картинка3 (или это можно без скриптов сделать, в каждый тег картинки запихивая onmouseover & onclick? Честно говоря, не верится что это заработает)  
 //назначение - кнопки: норма- не выделяется, навел - вспучилась, кликнул - вдавилась
// если бы при этом еще не приходилось для каждой картинки в теле скрипта дописывать строки, а подставлялся бы тот же код для всех -это был бы вообще предел мечтаний// ))

Всего записей: 16045 | Зарегистр. 13-02-2003 | Отправлено: 20:19 30-12-2003
Kexit



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga
 
Спасибо, спасибо, спасибо
Собственно меня самого осенило, что нужно просто добавить дополнительную переменную в скрипт, что prf_Viper запостил (кстати, у него опечатка).
Svarga, твой еще не смотрел, думал пред Новым годом никто не ответит, голова у людей не тем занята... Но все равно огромное тебе спасибо
Как я рад !
 
bredonosec
Я в джава-скриптах полный ноль. Взял чужой, тыкал, тыкал, пока меня не осенило.
Но ! Думаю это возможно. Раз есть в джаве функция для реагирования только на наведение на картинку, то всяко есть функция реагирования и на клик.
А мой пример наглядно доказывает, что 1 картинке можно присвоить 3 вида картинок (В, В1, В2) Все народоваться не могу
 
Пример тут - http://www.kexit.ru/mouseover/
 
Буквы скачут, но это потому, что я сначала нарезал прямоугольники, а потом вставил буквы. Но, в нашем случае, это не главное. Мне надо было создать полосу меню, где кнопки выклядят наклонными.  
 
При наведении на А, А заменяется, на А1, которая больше чем А в размерах, и В заменяется на В2, которая меньше в размерах чем В. При наведении на В, В заменяется на В1, а С на С2. Итого мы имеем - В, В1, В2. Что мне и требовалось.
 
Просто добавил несколько строк в скрипт prf_Viper`а:
 
over.js
---------------------------------------
var imgLoaded=0
var param='images/'
var v=parseInt(navigator.appVersion)
 
if (document.images) {  
image1on = new Image();  
image1on.src= "images/img11.gif";  
image1off = new Image();  
image1off.src = "images/img1.gif";  
 
image11on = new Image();  
image11on.src = "images/img22.gif";  
image11in = new Image();  
image11in.src = "images/img21.gif";  
image11off = new Image();  
image11off.src = "images/img2.gif";  
 
image2on = new Image();  
image2on.src = "images/img32.gif";  
image2in = new Image();  
image2in.src = "images/img31.gif";  
image2off = new Image();  
image2off.src = "images/img3.gif";  
}  
 
function turnOn(imageName) {  
if (document.images) {  
document[imageName].src = eval(imageName + "on.src");  
}  
}  
 
function turnIn(imageName) {  
if (document.images) {  
document[imageName].src = eval(imageName + "in.src");  
}  
}  
 
function turnOff(imageName) {  
if (document.images) {  
document[imageName].src = eval(imageName + "off.src");  
}  
}  
---------------------------------------
 
 
index.html
---------------------------------------
<html><head>
 <script>function turnOn(){}function turnIn(){}function turnOff(){}</script>
<script src="over.js"></script></head>
<body>
<a href="#"><IMG NAME="image1" SRC="images/img1.gif" align=left border="0" Hspace="0" onMouseOver="turnOn('image1'), turnOn('image11')" onMouseOut="turnOff('image1'), turnOff('image11')"></a>
<a href="#"><IMG NAME="image11" SRC="images/img2.gif" align=left border="0" Hspace="0" onMouseOver="turnIn('image11'), turnOn('image2')" onMouseOut="turnOff('image11'), turnOff('image2')"></a>
<a href="#"><IMG NAME="image2" SRC="images/img3.gif" align=left border="0" Hspace="0" onMouseOver="turnIn('image2')" onMouseOut="turnOff('image2')"></a>
</body></html>
---------------------------------------
 
Svarga, мне его скрипт показался проще для применения моего ламерского подхода. Но, если ты подредактируешь свой скрипт, чтоб такое в нем было возможно - твои труды будут не напрасны, и моя благодарность не будет знать границ Кажись и с твоим скриптом разобрался, но уже спать хочу
 
Всех с наступающим Новым годом !

Всего записей: 968 | Зарегистр. 16-02-2003 | Отправлено: 20:32 30-12-2003 | Исправлено: Kexit, 21:36 30-12-2003
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
... перечитал всё это, сорри, Новый год...

Цитата:
Смысл в том, что практически у каждой картинки (кроме первой) будет не по 2 варианта, а по 3. В моем примере это - В, В1, В2 и С, С1, С2.  

мой вариант не пройдёт... ижвиняюсь, протягом наступного тижня (следующей, в смысле, недели... слово-то какое.. от "не делать"...) подправлю... надеюсь...
 
 
Добавлено
ой, однако, два ответа уже )

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 02:04 31-12-2003
Kexit



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga
Конечно, отдыхай пока, а потом за дело
Это я к тому, что я присоединяюсь к просьбе bredonosec`а по поводу скрипта, обрабатывающего и наведение и клик.
 

Всего записей: 968 | Зарегистр. 16-02-2003 | Отправлено: 05:54 31-12-2003
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Kexit

Цитата:
Есть три картинки: A, B, C. Надо: при наведении на А - А заменялась...

Наконец-то после новых годов обнаружил эту тему
 
Вообщем, вот рабочий пример:
http://forall.ru-board.com/Svarga/over_mult_cust/
 
все файлы в архиве здесь:
http://forall.ru-board.com/Svarga/over_mult_cust/over_mult_cust.rar
 
Если какие-то вопросы по использованию — плиз аск
 
bredonosec

Цитата:
А Есть ли скрипт, обрабатывающий и наведение и клик? В смысле: по дефолту стоит картинка 1, при наведении - картинка2, при клике - картинка3 (или это можно без скриптов сделать, в каждый тег картинки запихивая onmouseover & onclick? Честно говоря, не верится что это заработает)  

пока ещё нету

Цитата:
 //назначение - кнопки: норма- не выделяется, навел - вспучилась, кликнул - вдавилась  

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

Цитата:
// если бы при этом еще не приходилось для каждой картинки в теле скрипта дописывать строки, а подставлялся бы тот же код для всех -это был бы вообще предел мечтаний// ))  

Можно добавить функцию для инициализации скрипта, т.е. js-файл неизменный, но при этом на основной странице под  
<script src="over.js"></script>
появится появится пара строк для передачи настроек...
 
PS. sorry, с этими празниками и работами во время них потерялся напрочь

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 02:15 24-01-2004
vu1tur



Moderator-Saaber
Редактировать | Профиль | Сообщение | ICQ | Цитировать | Сообщить модератору
Svarga

Цитата:
Вообщем, вот рабочий пример:  

в мозилле не фурычит

----------
I am free of all prejudice. I hate everyone equally.

Всего записей: 3690 | Зарегистр. 01-02-2003 | Отправлено: 02:30 24-01-2004
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
vu1tur

Цитата:
в мозилле не фурычит

только что проверил в Mozilla 1.5 (FireBird 0.7), 1.0 и 0.7...
странно, в 1.0 и 0.7 картинки не соизволили грузиться, а в 1.5 всё нормально... шайтан, однако.
Сейчас посмотрю...
 
Добавлено
Э-э-э... локально то же самое в них же открыл — нормально всё.
ничего не понимаю ©
 
Добавлено
vu1tur
плиз, скачай архив (он на 7 с копейками К) и посмотри — у тебя локально работает?

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 03:41 24-01-2004
bredonosec



Platinum Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору

Цитата:
А если кликаем на другую, нужно ли, чтоб первая картинка в исходное состояние возвращалась?  
- Ага, именно. Вдавленна только когда кнопка мыши нажата. (отпустил- вернулась к выпуклой, убрал наведение - рельеф исчез)  
 Все одно, рамка вокруг активной зоны, появляющаяся стандартно после клика, даст юзеру подсказку, чего он только что нажимал (если он и забудет ), так что, думаю, нет смысла делать отдельную картинку на посещенную кнопку.  
 

Цитата:
Можно добавить функцию для инициализации скрипта, т.е. js-файл неизменный, но при этом на основной странице под  
<script src="over.js"></script>  
появится появится пара строк для передачи настроек...  
- В смысле, в файле стоит переменная, а эти строки присваивают ей имя активной в данное время картинки? Я правильно понял?  

Всего записей: 16045 | Зарегистр. 13-02-2003 | Отправлено: 18:22 24-01-2004
Kexit



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Svarga
 
Спасибо, очень хороший скрипт получился.

Всего записей: 968 | Зарегистр. 16-02-2003 | Отправлено: 18:57 26-01-2004
Solenaja



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
А можно ли сделать без скрипта замену картинок, но чтобы они подгружали обе, а не при наведении грузится другая.
А то обычная контрукция
<IMG src="1.jpg" width="25" height="25" onMouseOver="src=2.jpg'" onMouseOut="src=1.jpg'">
не даёт такого эффекта
а если картинки большие размером, то его вообще не заметно

----------
Могу помочь, но только своими знаниями и ...

Всего записей: 4228 | Зарегистр. 02-09-2001 | Отправлено: 21:19 26-01-2004
8AleX8



Advanced Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Solenaja

Цитата:
А можно ли сделать без скрипта замену картинок, но чтобы они подгружали обе, а не при наведении грузится другая.

Не совсем в тему....
А вот как это можно сделать на чистом CSS без JavaScript
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
http://www.projectseven.com/tutorials/css_menus/list_01/
 

Всего записей: 1813 | Зарегистр. 11-12-2001 | Отправлено: 22:08 26-01-2004 | Исправлено: 8AleX8, 22:09 26-01-2004
Solenaja



Silver Member
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
8AleX8
в общем без явы не обойтись как смотрю - это к тому, что если картинок будет больше 5 css разрастётся.

----------
Могу помочь, но только своими знаниями и ...

Всего записей: 4228 | Зарегистр. 02-09-2001 | Отправлено: 00:12 27-01-2004
Svarga

Moderator
Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
8AleX8

Цитата:
Не совсем в тему....  
А вот как это можно сделать на чистом CSS

CSS, всё-таки, не совсем для этих целей предназначен — только что если что-то простейшее в таком духе:

Цитата:
<style type="text/css">
span{width:60px;height:60px;padding:0;margin:0}
 
.a{background-image:url(a.gif)}
.a:hover{background-image:url(a1.gif)}
.b{background-image:url(b.gif)}
.b:hover{background-image:url(b1.gif)}
.c{background-image:url(c.gif)}
.c:hover{background-image:url(c1.gif)}
</style>
 
<body>
<span class="a">&nbsp;</span>
<span class="b">&nbsp;</span>
<span class="c">&nbsp;</span>

http://forall.ru-board.com/Svarga/over_mult_cust/img/css_mouse_over.html
но "заменять" так можно не больше одной картинки при наведении на неё саму (точнее, на элемент, которому картинка фоном является).
а так как MSIЁ :hover исключительно для ссылок поддерживает, то только их и придётся юзать:
http://forall.ru-board.com/Svarga/over_mult_cust/img/css_mouse_over_msie.html
(в нетскейпе 4.х оба примера не работают, + кошмарно выглядят — придётся вместо &nbsp; spacer лепить + всё в одну строку размещать)
 
Solenaja

Цитата:
в общем без явы не обойтись как смотрю - это к тому, что если картинок будет больше 5 css разрастётся.

Для простейших случаев, в принципе, и CSS'ом обойтись можно, для более сложных случаев код + размеры картинок будут разрастаться, да и о проблемах с совместимостью забывать не стоит...  
Лучше не мудрить, а использовать JavaScript, всё-таки: не думаю, что если кто-то с отключённым javascript'ом на сайт зайдёт, сильно обрадуется работающим CSS-ным roll-over'ам

----------
away.

Всего записей: 4161 | Зарегистр. 25-06-2002 | Отправлено: 02:41 27-01-2004
Открыть новую тему     Написать ответ в эту тему

Страницы: 1 2

Компьютерный форум Ru.Board » Интернет » В помощь вебмастеру » Замена нескольких картинок при наведении на картинку/ссылку


Реклама на форуме Ru.Board.

Powered by Ikonboard "v2.1.7b" © 2000 Ikonboard.com
Modified by Ru.Board
© Ru.Board 2000-2020

BitCoin: 1NGG1chHtUvrtEqjeerQCKDMUi6S6CG4iC

Рейтинг.ru

Рейтинг.ru