Hej,
Dawno dawno tematu... czytałem książkę o JS w której zawarty był rozdział o preloadingu obrazków. Chciałem z pamięci wykonać port tego skryptu na jQuery, ale zdaje się że coś spietruszyłem.
Jak najadę na przycisk od prawej bądź lewej strony to obrazek się podmienia, a potem znika. Zależy to też od szybkości z jaką najadę na owy link i z niego wyjdę.
#header ul { position:relative; top:62px; left:250px; width:489px; height:38px; margin:0; padding:0;
list-style:none; background:url('/images/Menu.png') no-repeat; }
#header ul li { float:left; margin:9px 0 5px 30px; border:1px solid #F00; }
#header ul li.first { margin-left:20px; }
<li><a href="#" title="Link 1"><img src="/images/Menu/link_1.png" alt="Link 1" /></a></li> <li><a href="#" title="Link 2"><img src="/images/Menu/link_2.png" alt="Link 2" /></a></li> <li><a href="#" title="Link 3"><img src="/images/Menu/link_3.png" alt="Link 3" /></a></li> <li><a href="#" title="Link 4"><img src="/images/Menu/link_4.png" alt="Link 4" /></a></li> <li><a href="#" title="Link 5"><img src="/images/Menu/link_5.png" alt="Link 5" /></a></li>
$m = new Menu();
$m.init();
function Menu()
{
this.aImg = new Array();
this.aImgHover = new Array();
var $ths = this;
this.init = function()
{
$("#header li a").each(
function()
{
$ths.evt_HoverAppend($(this));
});
}
this.evt_HoverAppend = function($link)
{
$iImgIndex = this.aImg.length;
$Img = $("img", $link);
$Img.attr("index", $iImgIndex);
// Define hover image by adding -hover suffix before its extension
$SImgSrc = new String($("img", $link).attr("src"));
$sImgSrcExt = $SImgSrc.substring($SImgSrc.length - 3, $SImgSrc.length);
$sImgHoverSrc = $SImgSrc.substring(0, $SImgSrc.length - 4) + "-hover." + $sImgSrcExt;
$ImgHover = new Image();
$ImgHover.src = $sImgHoverSrc;
this.aImg.push($Img);
this.aImgHover.push($($ImgHover).attr("index", $iImgIndex));
$link.hover(
function()
{
$Img = $("img", this);
$Img.replaceWith($ths.aImgHover[$Img.attr("index")]);
},
function()
{
$Img = $("img", this);
$Img.replaceWith($ths.aImg[$Img.attr("index")]);
});
}
}