-5

このような画像名のリストを持つ2つの配列があります

array 1 = ["arrow1.png", "arrow2.png", "arrow3.png", "arrow4.png", "arrow5.png"]

array 2 = ["arrow_over1.png", "arrow_over2.png", "arrow_over3.png", "arrow_over4.png", "arrow_over5.png"]

id="alter_img"on mouseover と mouseleave"arrow1.png"でdiv タグの画像を変更したいarrow_over1.png

構造はこんな感じ

<div id="alter_img">
  <img src="arrow1.png">
  <img src="arrow2.png">
  <img src="arrow3.png">
  <img src="arrow4.png">
  <img src="arrow5.png">
</div>

どうすればそれができますか？

4

5 に答える 5

8

使用data属性:

HTML

<div id="alter_img">
    <img src="arrow1.png" data-hover_src="arrow_over1.png">
    <img src="arrow2.png" data-hover_src="arrow_over2.png">
    <img src="arrow3.png" data-hover_src="arrow_over3.png">
    <img src="arrow4.png" data-hover_src="arrow_over4.png">
    <img src="arrow5.png" data-hover_src="arrow_over5.png">
</div>

jQuery

$(document).ready(function(){
    $("#alter_img > img").hover(function() {
        $(this).data("orig_src", $(this).attr("src"));
        $(this).attr("src", $(this).data("hover_src"));
    }, function(){
        $(this).attr("src", $(this).data("orig_src"));
    });
});
于 2012-11-23T10:50:42.153 に答える
1

あなたが実際にmouseenterとmouseoutで各画像のsrcプロパティを変更したい配列について言及しているように、私は推測しています。このような場合は、試してみてください

$("#alter_img > img").hover( function( ) {
    var src = $(this).attr("src");
    $(this).attr( "src", Array1[ Array2.indexOf(src) ] );
},
function( ) {
    var src = $(this).attr("src");
    $(this).attr( "src", Array2[ Array1.indexOf(src) ] );
});

デモはこちら

于 2012-11-23T10:56:56.600 に答える
1

私は最高の答えを得ました

$('img').bind('mouseenter mouseleave', function() {
$(this).attr({
    src: $(this).attr('data-other-src') 
    , 'data-other-src': $(this).attr('src') 
})
});

イメージタグは

<img data-other-src="arrow_over1.png" src="arrow1.png">
于 2012-11-23T10:57:32.807 に答える
0

CSSを使った方が良いでしょう。

元のボタンと誇張されたボタンのそれぞれを 1 つの画像にマージし、各状態を隣り合わせにします。

次に、css を使用して、JavaScript を使用せずに、ボタンの表示領域を「通常」から「上」に移動するだけです。

// button normally. Because we specify a width and height that is all that
// will be shown of our background. e.g. Our "normal state"
a.myButton {
    display:block;
     width:200px;
    height:80px;
    padding:10px;
    cursor:pointer;
    background:url(images/my-button-sprite.png) no-repeat top left;
 }

// This will switch the button to our right side (or our "over state")
a:hover.myButton  {
    background:url(images/my-button-sprite.png) no-repeat top right;
}

または、本当に自分のやり方でやりたい場合：

$('#alter_img > img').mouseover(function(){
    var idIndex = array1.indexOf($(this).attr('src'));
    if(idIndex != -1)
        $(this).attr('src', array2[idIndex]);

}).mouseleave(function(){

    var idIndex = array2.indexOf($(this).attr('src'));
    if(idIndex != -1)
        $(this).attr('src', array1[idIndex]);
});

于 2012-11-23T10:53:37.240 に答える
-1

使用する

   onmouseover=document.getElementById("alter_img").src="arrow1.png"          
   onmouseout=document.getElementById("alter_img").src="arrow_over1.png"
于 2012-11-23T10:52:29.153 に答える