divの画像の上にマウスを置いて

Question

私は「リンク」を持っていますが、それらは実際のリンクではなく、実際には私が見たい機材のタイトルです。

このタイトルの上にマウスを置くと画像が変わりますが、私が望むのは、マウスがそのタイトルから外れた後、最後の画像がそこにとどまることです。

私は好きではないコードを手に入れました。それはjquery、CSS、JavaScriptにすることができます、私はそれをwordpressのサイトで実装します。

PICTUREは

機器1 HERE GOES：

シンプルなアイデアは、私が例えばなければならないこと、であるフロント|戻る|側面 設備2：フロント|戻る|側面

最初に機器1：前面が上に開きます。 他のものの上にマウスを置いた場合：前面、背面または側面は画像が読み込まれますが、別のテキスト（正面、背面または側面）にマウスを移動するまで変更されません。

プリロードもOKですが、サイトには既にあります。それはWPで普通の画像とちょうど同じように働くので、大丈夫ですので、画像をクリックするとフルサイズの画像やリンクに行きます。画像上にマウスを置くとキャプション（タイトル）などが表示されます。

正確にはhttp://www.the-digital-picture.com/Reviews/Tamron-18-270mm-f-3.5-6.3-Di-II-VC-Lens-Review.aspxとし、より多くのタイトルを含む画像を見つけ、その上にマウスを置く必要があります。

jqueryはまったく動作せず、CSSでコード化されています。マウスアウト時には画像が変わりますが、マウスでは変更したくありません。

jQueryの - トライアウト1 - 動作しませんが、それは

<script type="text/javascript"> 
    $(document).ready(function() { 

    $("#picture_links a").hover(function(){ 
     var src = $(this).attr("href"); 
     $("#picture_holder img").attr("src", src); 
    }) 

    $("#picture_links a").click(function(){ 
     return false; 
    }) 

}) 
</script> 

CSSロードされている確認 - 異なるスクリプト、作品を、私は望んでいないよう：

/* On mouse image roll over */ 

img.nohover { 
border:0 
} 
img.hover { 
border:0; 
display:none 
} 
a:hover img.hover { 
display:inline 
} 
a:hover img.nohover { 
display:none 
} 

Answer 1

使用を

jQuery("elementid").mouseover(function() 
{ 
    var imageId = jQuery(this).attr("imageID"); 
    var image = jQuery(this).css('background-image'); 

    var newImageId = imageId++; 
    if (newImageId >= 3) 
     newImageId = 0; 

    var newImage = image.replace(imageID, newImageId); 
    jQuery(this).css({ "background-image": "newImage " }) 

} 

これは、画像の名前が連続している場合にのみ有効です。 シーケンス番号 のほかに実際の名前に数字がなく、divにimageIdという名前の属性を追加すると、

Answer 2

は、彼らはそれ

function chgimage(imgDocID,imgObjName) 
{ 
    document[imgDocID].src = eval(imgObjName + '.src'); 
} 

が行うこの方法あなたはそれが実際の画像になりたいか、それがバックグラウンドすることができますか？

最初のコードが正常に見えます。 どこかで何をしているのかわかりますか？私は興味がある。