Comment puis-je changer l'image au survol de <td> que l'img est dans-jQuery?

Question

Vous pouvez voir la mise en œuvre ici http://jsfiddle.net/xNSFA/

À l'heure actuelle, lorsque vous passez la souris sur la cellule, elle change certaines caractéristiques. Mais l'image ne change pas. L'image ne change que lorsque vous survolez spécifiquement l'image.

Comment faire pour que l'image change avec tout le reste? Par ailleurs, il ne doit pas être fait dans jQuery. S'il y a un moyen élégant de le faire en CSS, j'aimerais beaucoup cela. Mais j'ai juste supposé que c'était impossible à faire - à cause de la manipulation de l'image et je ne voulais pas définir l'arrière-plan de l'image. Je veux l'image à l'intérieur de la cellule.

Merci.

Answer 1

Vous pouvez mettre le .hover() sur le <td> et trouver le <img> intérieur pour changer, comme ceci:

$("table td").hover(function() { 
    var img = $(this).find("img")[0]; 
    img.src = img.src.replace('-grey.png', '-blk.png'); 
}, function() { 
    var img = $(this).find("img")[0]; 
    img.src = img.src.replace('-blk.png', '-grey.png'); 
}); 

You can test it out here, ou la façon dont jQuery-ish (bien que plus lent - certains préfèrent ... Je » d aller au-dessus):

$("table td").hover(function() { 
    $(this).find("img").attr("src", function(i, src) { 
    return src.replace('-grey.png', '-blk.png'); 
    }); 
}, function() { 
    $(this).find("img").attr("src", function(i, src) { 
    return src.replace('-blk.png', '-grey.png'); 
    }); 
}); 

Answer 2

td:hover img { 
    //css attributes to change 
} 

OU changer la source

$("table td").hover(function() {     
       this.src = $('img', this).src.replace('-grey.png', '-blk.png'); 
       }, function() { 
       this.src = $('img', this).src.replace('-blk.png', '-grey.png');        
    });  

La source d'image ne peut pas être modifiée via CSS, mais vous pouvez modifier l'image d'arrière-plan ou la position d'arrière-plan.

Answer 3

Ce qui suit devrait fonctionner:

$('td').hover(
    function(){ 
    $(this).find('img').attr('src','path/to/new/image.png'); 
    }, 
    function(){ 
    $(this).find('img').attr('src','path/too/old/image.png'); 
    } 
); 

Answer 4

Vous avez deux questions dans votre script. D'abord, vous devez attacher le hover au <td>, pas le <img> lui-même. Si vous exécutez votre test, vous verrez que l'image change lorsque vous quittez l'image réelle. Deuxièmement, vous semblez avoir vos remplacements inversés, de sorte que l'image change d'abord lorsque vous laisser la zone de stationnaire.

Here's a version of your script with both changes.. Je pense que cela fait ce que tu voulais?

Answer 5

Nouvelle réponse:Je n'ai pas remarqué que vous ne vouliez pas utiliser une image d'arrière-plan. Cela peut être fait sans, mais vous auriez juste besoin de charger les deux images.

Exemple:http://jsfiddle.net/patrick_dw/xNSFA/7/

html

<td> 
    <span class="sit-in-the-corner">1</span> 
    <img class="on" src="http://fiwishop.com/feedback/images/2-up-icon-blk.png" /> 
    <img class="off" src="http://fiwishop.com/feedback/images/2-up-icon-grey.png" /> 
</td> 

css

table td img.off{ 
    display:none; 
} 
table td:hover img.off{ 
    display:inline; 
} 
table td:hover img.on{ 
    display:none; 
} 

---

réponse originale:

j'utiliser CSS au lieu de javascript, mais vous aurez besoin de changer l'élément <img> à un élément <a>, et utiliser les propriétés background-.

Exemple:http://jsfiddle.net/patrick_dw/xNSFA/5/

html

<td> 
    <span class="sit-in-the-corner">1</span> 
    <a class='image'></a> 
</td> 

css

table td a.image { 
    width: 100%; 
    height: 100%; 
    background-image:url(http://fiwishop.com/feedback/images/2-up-icon-blk.png); 
    background-repeat:no-repeat; 
    background-position: center center; 
    display:block; 
} 
table td a.image:hover { 
    background-image:url(http://fiwishop.com/feedback/images/2-up-icon-grey.png); 
}