Автор Тема: смена картинок  (Прочитано 4018 раз)

0 Пользователей и 1 Гость просматривают эту тему.

Оффлайн Medalist

  • Завсегдатай
  • Пользователь
  • **
  • Сообщений: 83
  • +0/-0
  • 0
    • Просмотр профиля
смена картинок
« : 13 Апреля 2003, 05:23:59 »
Некак не могу додуматься...

Мне нужно чтобы при наведении на элемент (ссылка картинка текст)

картинка 1 менялась на картинка 2
а картинка 3 менялась на картинка 4

(немного запутано :) )

Я пока могу менять только одну картинку а две сразу немогу :(

Подучите меня как ето делать ?!

Оффлайн Mog.

  • Фанат форума
  • Ветеран
  • *****
  • Сообщений: 828
  • +0/-0
  • 0
    • Просмотр профиля
смена картинок
« Ответ #1 : 13 Апреля 2003, 08:45:07 »
Я конечно не сильно программер, но там происходит примерно следующее
Прим наведении курсора на элемент срабатывает обработчик этого события (onmouseover) который запускает функцию. Эта функция производит замену элемента А(картинка 1) на элемент Б(новая картинка 2) пользуясь тем, что доступ к массиву картинок имеется . Заглянув в фак находим http://forums.webscript.ru/showthread.php?s=&threadid=2241

и попытаемся переделать на две картинки








 
Вот примерно так :)
Все болезни от нервов, только сифилис от удовольствия

Оффлайн Nickii

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 218
  • +0/-0
  • 0
    • Просмотр профиля
    • http://www.srccode.spb.ru
смена картинок
« Ответ #2 : 13 Апреля 2003, 12:29:35 »
Решение:

 При событии onMouseOver происходящем от нужного нам элемента
 вызываем функцию, которая меняет src картинок

Реализация:

 1. Если знаете индекс картинки в массиве document.images[] и нужна, только парная смена картинок, т.е. 1 - 2, 3 - 4;

 // JavaScript
 function changePicture()
 {
   document.images[0].src = "путь 2";
   document.images[1].src = "путь 4";
 }
 
 
  ссылка

 
Текст


 

 
 
 

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

 // JavaScript
 function changePicture(id, url1, url2)
 {
  var str = ""+id,
      beg = str.substr(0,2),
      i;

  for(i = 0; i < document.images; i++)
  {
    var img = document.images;
   
    if(img.id == beg+"1") img.src = url1;
    if(img.id == beg+"2") img.src = url2;    
  }
 }

 
  ссылка


 
 
Текст



 
 
 
 
 


 Скрипты я не проверял, но должно работать.
 То что я написал мне не очень нравится, но никаной конкретики не было так что, что есть, то есть. И вообще можно придумать немеренную кучу примеров по вашему вопросу, если не иметь точного задания. (Хрен знает надо вам только эти две картинки менять, или еще две? или потом три? или еще что-то, Или при уходе со ссылки менять картинки на старые? (в этом случае можно завести массив для хранения url) ну и так  далее.)

Оффлайн Medalist

  • Завсегдатай
  • Пользователь
  • **
  • Сообщений: 83
  • +0/-0
  • 0
    • Просмотр профиля
смена картинок
« Ответ #3 : 13 Апреля 2003, 13:56:51 »
Большое спасибо !

Все чудесно работает когда доделаю до конца покажу что получилось ...

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

Оффлайн Nickii

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 218
  • +0/-0
  • 0
    • Просмотр профиля
    • http://www.srccode.spb.ru
смена картинок
« Ответ #4 : 13 Апреля 2003, 16:51:07 »
Решение:
 Воспользоваться стандартным объектом JavaScript\'а Image для создания массива изображений

Реализация: (работающая)

    var img = new Array();

    // все картинки в один массив
     img[0] = new Image();
     img[0].src = \'ship0000.gif\';

     img[1] = new Image();
     img[1].src = \'ship0001.gif\';
 
   function test(mode)
   {
    // вместо url src из массива
     if(mode)
       document.images[0].src = img[0].src;
     else
       document.images[0].src = img[1].src;  
   }


 


А вообще, сходи ко мне на сайт. Там много на тему рисунков, правда примеры гораздо сложней, да ты сообразительный, разберешся что к чему. http://www.srccode.spb.ru

Оффлайн semya

  • Фанат форума
  • Старожил
  • ****
  • Сообщений: 307
  • +0/-0
  • 0
    • Просмотр профиля
смена картинок
« Ответ #5 : 14 Апреля 2003, 12:29:55 »
ну и что, как опера то относится к document.images[0].src ??? у меня че то не рулит (опера 7)

Оффлайн Medalist

  • Завсегдатай
  • Пользователь
  • **
  • Сообщений: 83
  • +0/-0
  • 0
    • Просмотр профиля
смена картинок
« Ответ #6 : 14 Апреля 2003, 12:34:13 »
вот на масяне прикольно сделал там све очень быстро меняется и грузится

Оффлайн Nickii

  • Фанат форума
  • Постоялец
  • ***
  • Сообщений: 218
  • +0/-0
  • 0
    • Просмотр профиля
    • http://www.srccode.spb.ru
смена картинок
« Ответ #7 : 14 Апреля 2003, 13:27:59 »
По поводу Oper\'ы, ее объектов и поддержки ею JavaScript\'а обращайтесь к производителям. То что написано ранее, является стандартом для всех свободно распространяемых броузеров. И работает на всех движках Geko (Mozilla, Netscape), а так же в броузерах имеющих другие движки (Explorer, Galeon).

 Можно попробовать получить объект - изображение другими способами:
 1. document.images[0].src = img.src;
 2. document.images[name].src = img.src; // рисунок должен иметь имя name
 3. document.images.name.src = img.src; // рисунок должен иметь имя name
 4. document.getElementById(id).src = img.src; // рисунок должен иметь id

 В Explorer\'e
 5. document.all(id).src = img.src; // функция all() - универсальна. Ей можно передавать и id, и name. Но использовать эту функцию не рекомендую. Код становится не переносимым.

Оффлайн semya

  • Фанат форума
  • Старожил
  • ****
  • Сообщений: 307
  • +0/-0
  • 0
    • Просмотр профиля
смена картинок
« Ответ #8 : 14 Апреля 2003, 14:20:08 »
Nickii
это все я понимаю, просто говорю, что скрипт приведен не работающий в опере, вот и все... претензий никаких, потому что чтоб это все нормально работало я использую совет с этого же форума и юзаю klayers

 

Sitemap 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28