イメージロールオーバがこのように動作するのはなぜですか？

Question

私の画像のロールオーバーは機能します...しかし、片方だけです。

function heartOver(id) 
{ 

    if(document.getElementById('heart' + id).src == 'images/heart.png'); 
    { 
     parent.document.getElementById('heart' + id).src = 'images/unheart.png'; 
    } 

    if(document.getElementById('heart' + id).src == 'images/unheart.png'); 
    { 
     parent.document.getElementById('heart' + id).src = 'images/heart.png'; 
    } 

} 


<img src="images/heart.png" id="heart'.$row['id'].'" alt="Love! width="16" height="16" border="0" onmouseover="heartOver'."('$row[id]')".'; return true;" onmouseout="heartOver'."('$row[id]')".'; return true;"> 

私はIF文のいずれかをコメントアウトした場合、他方は動作しますが、彼らは一緒に働く文句を言わない...

注：else if運でこれを試してみました。

私はif（）;を持っています。いいえ。後で...

Answer 1

もしそうでなければ、最初のifがtrueと評価されたときに、2番目のifもtrueと評価されます。ここで

も、img要素も存在するという仮定をチェックする簡単な例です：

var img=document.getElementById('heart' + id); 
if (img) 
{ 
    if(img.src == 'images/heart.png') 
    { 
     img.src = 'images/unheart.png'; 
    } 
    else if(img.src == 'images/unheart.png') 
    { 
     img.src = 'images/heart.png'; 
    } 
} 
else 
{ 
    alert("Ooooh! No heart"+id+" element found!"); 
}  

Answer 2

は、この正しいですか？

<img src="images/heart.png" id="heart'.$row['id'].'" alt="Love! width="16" height="16" border="0" onmouseover="heartOver'."('$row[id]')".'; return true;" onmouseout="heartOver'."('$row[id]')".'; return true;"> 

これを試してみてください：

<img src="images/heart.png" id="heart<?php echo $row['id']; ?>" alt="Love!" width="16" height="16" border="0" onmouseover="heartOver(<?php echo $row['id']; ?>)" onmouseout="heartOver(<?php echo $row['id']; ?>)">