[JavaScript] Zmiana obrazka po najechaniu na diva Opcje

[bahh]

Mam taki kod:

[HTML] pobierz, plaintext 
<div id="box">
  <img src="zdj1.jpg" alt="" />
</div>
[HTML] pobierz, plaintext 

Chcę, by po najechaniu na diva o id="box" zmieniło mi obrazek ze zdj1.jpg na zdj2.jpg

Użyłbym hovera, gdyby nie fakt, że zdjęcie ładowało by się podczas najechania. Chcę efektu płynnego przejścia z załadowanym obrazkiem już w tle przy ładowaniu się strony.

Wie ktoś jak coś takiego zrobić? Rzecz jasna jQuery wchodzi w grę.

[markuz]

Do takich rzeczy używa się "css sprites"

[bahh]

pamiętam, że kiedyś używałem kodu jquery, który sam ładował grafikę na starcie (onload) oraz sam stosował efekt hovera - ta technika jest szybsza od css sprites gdzie musiałbym łączyć grafiki i przerabiać stronę pod tego cssa

markuz, zresztą twoje rozwiązanie nijak ma się do mojego problemu.

Mam diva o wysokości np. 600 pikseli i wysokości 550 pikseli a zdjęcie ma 1/3 tych wymiarów. Także nawet jak użyję css sprites to nic to nie da, bo po najechaniu na diva, img src ma się zmienić na inny

[maviozo]

Najprościej (ale chamsko):

Kod

<div id="box" onmouseover="document.getElementById('obrazek').src='zdj2.jpg'">
<img src="zdj1.jpg" id="obrazek" alt="" />
<img src="zdj2.jpg" style="position:absolute;top:-1000px"/>

Zrobienie gotowca dla grup mogłoby wyglądać tak, tylko wymaga stosowania stałego układu DOM oczywiście.

Kod

<div class="box">
<img src="zdj1.jpg" data-nowe="zdj2.jpg"/>
</div>

$(".box img").each(function(){
var $img=$("<img/>",{
src:$(this).data("nowe"),css:{
position:'absolute',top:'-1000px'
}
});
$img.appendTo("body");
}).on("mouseenter",function(){
var $t=$(this);
$t.attr("src",$t.data("nowe"));
});

Mogą być błędy, bo pisałem w okienku, bez sprawdzenia, ale ideę powinieneś złapać. Technicznie sposób z wstawianiem obrazka na -1000 nie jest elegancki, ale pamiętam, że działał.

Ten post edytował maviozo 9.12.2014, 23:50:32