使用鼠標懸停在其他div中顯示圖像

我正在製作一個腳本，該腳本在較大的框中顯示onmouseover圖像。但是，3天后工作..它仍然無法正常工作。使用鼠標懸停在其他div中顯示圖像

所以，我有1/4微小的圖像，當我用mousover更大圖像的圖像src應更新。

我的代碼，

function newImage(link) 
     { 
      document.getElementById("imageshow").src=link; 
     }

HTML

<div id="itemimage"> 
         <img src="/images/items/0abdc563a06105aee3c6136871c9f4d1.jpeg" name="imageshow" id="imageshow" width="250"/> // big image 
        </div> 
        <div id="litemimage"> 
         <img src="/images/items/0abdc563a06105aee3c6136871c9f4d1.jpeg" onmouseover="newImage('/images/items/0abdc563a06105aee3c6136871c9f4d1.jpeg')" width="100"/> 
        </div> 
        <div id="litemimage"> 
         <img src="/images/items/46f5ffb3777b7659bb35da6ddab19e05.png" onmouseover="newImage(this.src)" width="100"/> 
        </div><div id="litemimage"> 
         <img src="/images/items/44feb0096faa8326192570788b38c1d1.png" onmouseover="newImage('/images/items/44feb0096faa8326192570788b38c1d1.png')" width="100"/> 
        </div><div id="litemimage"> 
         <img src="/images/items/2d45cbe914655ca562553cb81fdfc464.jpeg" onmouseover="newImage('/images/items/2d45cbe914655ca562553cb81fdfc464.jpeg')" width="100"/> 
        </div>

有什麼不對？

來源

2014-01-14 Just Hilly

id不應多次使用。它應該是唯一的頁面 –

你得到的圖像的src和取代src的皮膚，使圖像不會改變 – 2014-01-14 14:55:51

所以你說，首先隱藏，替換，然後再顯示它？ –

HTML：

<div class="largeView"> 
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTNh6K8kjBSaLwzCmaGHb2HFREfIQR6THrneqDc20mtJHUIXBdkeQ" name="imageshow" id="imageshow" width="250"/> 
</div> 
<div class="litemimage"> 
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTNh6K8kjBSaLwzCmaGHb2HFREfIQR6THrneqDc20mtJHUIXBdkeQ" onmouseover="newImage('http://commun-it.ca/wp-content/uploads/2012/06/Big-Picture-Mountains-credit-blimiers2.jpg')" width="50"/> 
</div> 
<div class="litemimage"> 
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQopJbH0D5IlIYQwQ3iBL4RnA4Dqk0s8csW-jZnfhF6twUuceA0" onmouseover="newImage('http://www.flagstaffbusinessnews.com/wp-content/uploads/2012/10/Picture-Canyon-.jpg')" width="50"/> 
</div> 
<div class="litemimage"> 
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTNh6K8kjBSaLwzCmaGHb2HFREfIQR6THrneqDc20mtJHUIXBdkeQ" onmouseover="newImage(this.src)" width="50"/> 
</div>

js：

<script> 
    function newImage(src) { 
     document.getElementById("imageshow").src = src; 
    } 
</script>

來源

2014-01-14 15:54:43

謝謝你這麼多！你讓我的一天！ –

歡迎您:)剛投票我的答案 –

我做了：D。所以謝謝你！ –

試試這個JSFIDDLE

HTML

<div class="largeView"> 
    <img id="imageshow" src="placeholder.jpg"> 
</div> 

<div id="thumbs"> 
    <div class="litemimage"> 
     <img src="small1.jpg" data-large="large1.jpg"> 
    </div> 
    <div class="litemimage"> 
     <img src="small2.jpg" data-large="large2.jpg"> 
    </div> 
    <div class="litemimage"> 
     <img src="small3.jpg" data-large="large3.jpg"> 
    </div> 
    <div class="litemimage"> 
     <img src="small4.jpg" data-large="large4.jpg"> 
    </div> 
</div>

的Javascript

thumbs.onmouseover = function(e){ 
    if(e.target.tagName=="IMG"){ 
     imageshow.src = e.target.getAttribute("data-large"); 
    } 
}

來源

2014-01-14 15:19:39

它不適合我。這是一個問題，如果每個圖像都有自己的div？ –

@ user3194432沒關係，但你可以隨時改變事件來處理 –

使用鼠標懸停在其他div中顯示圖像

回答

相關問題