JS圖像交換中的多個圖像，mouseout錯誤圖像

Question

我試圖複製一個圖像交換，但mouseout最終成爲圖像3在三次交換中的每一次，當我只希望它是最後一次。任何幫助我可以弄清楚我如何使互換不同，以便他們不會調用相同的圖像將不勝感激，謝謝！

//---imageswap1 

if(document.images) { 
    cars1 = new Array(); 
    cars1[1] = new Image(); 
    cars1[1].src = "car4.png"; 
    cars1[2] = new Image(); 
    cars1[2].src = "car1.png"; 
} 

function swapping_pics(picture_name, value_2) { 
    document.images[picture_name].src = cars1[value_2].src; 
} 

//---imageswap2 

if(document.images) { 
    cars2 = new Array(); 
    cars2[1] = new Image(); 
    cars2[1].src = "car5.png"; 
    cars2[2] = new Image(); 
    cars2[2].src = "car2.png"; 
} 

//---imageswap3 

function swapping_pics(picture_name, value_2) { 
    document.images[picture_name].src = cars2[value_2].src; 
} 

if(document.images) { 
    cars3 = new Array(); 
    cars3[1] = new Image(); 
    cars3[1].src = "car6.png"; 
    cars3[2] = new Image(); 
    cars3[2].src = "car3.png"; 
} 

function swapping_pics(picture_name, value_2) { 
    document.images[picture_name].src = cars3[value_2].src; 
} 


<div id="imageswap1" onMouseOver="swapping_pics('car1',1)" onMouseOut="swapping_pics('car1',2)" href="javascript:void"> 
    <img name="car1" border=」0」 src="car1.png" alt="car1"> 
</div> 

<div id="imageswap2" onMouseOver="swapping_pics('car2',1)" onMouseOut="swapping_pics('car2',2)" href="javascript:void"> 
    <img name="car2" border=」0」 src="car2.png" alt="car2"> 
</div> 

<div id="imageswap3" onMouseOver="swapping_pics('car3',1)" onMouseOut="swapping_pics('car3',2)" href="javascript:void"> 
    <img name="car3" border=」0」 src="car3.png" alt="car3"> 
</div> 

Answer 1

你不能有多個同名功能：swapping_pics，解決你的問題，你可以一個ID添加到每個功能，如：swapping_pics_01，swapping_pics_02，swapping_pics_03。

但對此，好好嘗試解決您的一塌糊塗，而不是所有的代碼，CSS可以做到，在一個更好的方法...

HTML：

<div id="imageswap1" class="swap"></div> 
<div id="imageswap2" class="swap"></div> 
<div id="imageswap3" class="swap"></div> 

CSS：

// This class "swap" is general to all the divs 
.swap { 
    width: 500px; // This is the image size 
    height: 400px; 
} 

#imageswap1  { background-image: url("car01.png"); } 
#imageswap1:hover { background-image: url("car04.png"); } // Mouse over 1 

#imageswap2  { background-image: url("car02.png"); } 
#imageswap2:hover { background-image: url("car05.png"); } // Mouse over 2 

#imageswap3  { background-image: url("car03.png"); } 
#imageswap3:hover { background-image: url("car06.png"); } // Mouse over 3 

撥弄例如：http://jsfiddle.net/qnw6j/