Forum PHP.pl > [JavaScript] Zmiana obrazka po najechaniu na diva

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript] Zmiana obrazka po najechaniu na diva

bahh

9.12.2014, 13:36:37

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

9.12.2014, 13:51:26

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

bahh

9.12.2014, 20:22:30

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

9.12.2014, 23:36:23

Najprościej (ale chamsko):

Kod

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ł.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.