Программирование > JavaScript & JScript

смена картинок

(1/2) > >>

Medalist:
Некак не могу додуматься...

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

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

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

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

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

Mog.:
Я конечно не сильно программер, но там происходит примерно следующее
Прим наведении курсора на элемент срабатывает обработчик этого события (onmouseover) который запускает функцию. Эта функция производит замену элемента А(картинка 1) на элемент Б(новая картинка 2) пользуясь тем, что доступ к массиву картинок имеется . Заглянув в фак находим http://forums.webscript.ru/showthread.php?s=&threadid=2241

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



function rollOver(name_1,img_1,name_2,img_2)
{
eval(name_1+".src = \'"+img_1+"\'");
eval(name_2+".src = \'"+img_2+"\'");
}






 
Вот примерно так :)

Nickii:
Решение:

 При событии 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:
Большое спасибо !

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

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

Nickii:
Решение:
 Воспользоваться стандартным объектом 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

Навигация

[0] Главная страница сообщений

[#] Следующая страница