Простенький скрипт *при наведении курсора картинка меняется*

Jackson в 13h31
14
Mar
2009
Был у меня простенький скрипт, но затерялся. Искал в гугле похожего не нашел. Может вы поможете, мне нужно, что бы при наведении курсора картинка менялась. Обе картинки должны загружатся сразу, а не после наведения, и хочется, что б скрипт все таки был простенький и не грамоздкий (без ввода в часть head). 39
1 Jackson, в 14/03/2009 в 20h48
Нашел тот скрипт... ура! Вот, каму интересно:

Код:
<a href="ССЫЛКА"><img src='простая картинка без наведения'
onmouseover="this.src='картинка при наведение'"
onmouseout="this.src='простая картинка без наведения'" border=0>


1. скрипт прост, по сравнению с отсальными
2. картинка загружается сразу при открытии страницы
2 F@lcon, в 15/03/2009 в 21h19
А куды его ставить?
3 X-WoL, в 15/03/2009 в 21h23
smile вместо картинки) pardon где хочешь чтобы картинка при наведении менялась)
4 artvs, в 14/04/2010 в 14h22
yes код и вправду очень прост! И что самое главное великолепно работает! Спасибо!
p.s. давно искал его
5 Rastamore, в 17/04/2010 в 05h53
тама где написано картинка надо вставлять адрес картинки?
6 Lucky, в 17/04/2010 в 10h25
да
7 Argaman, в 07/05/2010 в 00h05
использовала скрипт и вставила в виджет
Код:
<a href="http://i082.radikal.ru/1005/50/52fa33a5b91b.jpg"><img src="http://s002.radikal.ru/i198/1005/73/879d553dc98a.jpg"
onmouseover="this.src='http://i082.radikal.ru/1005/50/52fa33a5b91b.jpg'"
onmouseout="this.src='http://s002.radikal.ru/i198/1005/73/879d553dc98a.jpg'" border="0"></a>


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


благодарю заранее.
8 Sunnyta, в 07/05/2010 в 08h16
Argaman пишет:использовала скрипт


Вот скрипт (спасибо Ирбису):
Код:
  <script type="text/javascript" language="Javascript">//<![CDATA[

function getElementPosition(elem)
{
w = elem.offsetWidth;
h = elem.offsetHeight;

l = 0;
t = 0;

while (elem)
{
l += elem.offsetLeft;
t += elem.offsetTop;
elem = elem.offsetParent;
}

return {"left":l, "top":t, "width": w, "height":h};
}

 
function mousePageXY(e) {
  var x = 0, y = 0;
 
  if (e.pageX || e.pageY){
      x = e.pageX - 5;
      y = 21 + e.pageY;
  }
  if (e.clientX || e.clientY){
      x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft - 5;
      y = 21 + e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
  }

  return {"x":x, "y":y};
};


function deleteimg(imig){
      if(document.getElementById('nimimg')){
      testolldimg = document.getElementById('nimimg');
      imig.parentNode.removeChild(testolldimg);
  }
};


function dragimg(oldimg, even){
      zWidth = getElementPosition(oldimg);
      if(document.getElementById('nimimg')){
      xypos = mousePageXY(even);
      if(document.getElementById("nimimg").style.display == 'none'){
        document.getElementById("nimimg").style.display = 'block';
      }
      lwidth = screen.width/2;
      if((screen.width - lwidth) < zWidth.left){
            document.getElementById("nimimg").style.left = xypos.x - document.getElementById("nimimg").width + 15 + "px";
            document.getElementById("nimimg").style.top = xypos.y + "px";
      }
      else{
            document.getElementById("nimimg").style.left = xypos.x + "px";
            document.getElementById("nimimg").style.top = xypos.y + "px";
      }
        }
};


function resizeimg(imig, ri){
  newsrc = imig.name;
  xypos = mousePageXY(ri);
  newimg = document.createElement('img');
  newimg.src = newsrc;
  newimg.style.position = 'absolute';
  newimg.style.display = 'none';
  newimg.id = 'nimimg';
  imig.parentNode.appendChild(newimg);
};
    //]]></script>


А это прописать к картинке:

Код:
<img src="АДРЕС МАЛЕНЬКОЙ КАРТИНКИ"
name="АДРЕС БОЛЬШОЙ КАРТИНКИ"
onmouseover="resizeimg(this, event)" onmouseout="deleteimg(this)"
onmousemove = "dragimg(this, event)" img style="float: right" alt="" />
9 Argaman, в 08/05/2010 в 02h09
Sunnyta, спасибо за скрипт! d_daisy d_daisy d_daisy
10 KJS, в 20/05/2010 в 15h44
Вас интересовал этот пункт
Обе картинки должны загружатся сразу, а не после наведения

________________________________________________________________________

В каком месте этот код загружает вторую картинку вместе с сайтом ?
Вот именно, не в каком, это простой шоу-хайд без прелоада.
Нашел тот скрипт... ура! Вот, каму интересно:

КОД:
<a href="ССЫЛКА"><img src='простая картинка без наведения'
onmouseover="this.src='картинка при наведение'"
onmouseout="this.src='простая картинка без наведения'" border=0>


1. скрипт прост, по сравнению с отсальными
2. картинка загружается сразу при открытии страницы


Во 2м пункте написано картинк"А" загружается, о второй картинке и речи не идет. Вообще не понимаю смысла описывать это так smile кудаж она денится.
11 RF9400, в 30/06/2010 в 13h56
ОООО, Огромное спасибо Jackson

<a href="ССЫЛКА"><img src='простая картинка без наведения'
onmouseover="this.src='картинка при наведение'"
onmouseout="this.src='простая картинка без наведения'" border=0> good 13

Я долго 23 , 17 и искал такой кодиГГГ.По сравнению с другими кодами

флдвофлдаокпргкрпгукрпушолктопрпгуцрпфлдвофлдаокпргкрпгукрпушолктопрпгуцрп
флдвофлдаокпргкрпгукрпушолктопрпгуцрпфлдвофлдаокпргкрпгукрпушолктопрпгуцрп
флдвофлдаокпргкрпгукрпушолктопрпгуцрпфлдвофлдаокпргкрпгукрпушолктопрпгуцрпфлдвофлдаокпрг..............

вот такого плана - Твой реалино КРУТ огромное СПАСИБО! 28

Кстатеее Argaman не пользуйся такими большими скриптами какие тебе предлогают Ищи ПРОЩЕЕ!!
Информация

11 Ответов в теме :
"Простенький скрипт *при наведении курсора картинка меняется*"

Просмотров темы : 10063 .

Последнее сообщение :
14/03/2009 в 13h31 автор "Jackson"