我的圖庫的JavaScript代碼

Question

我正在使用html和CSS創建一個簡單的圖庫頁面。 我將此代碼編碼到html查看器上，並且工作正常，但是當我在Google chrome和IE中將其打開時，onmouseover無法正常工作。 當您瀏覽選定的縮略圖時，應該在底部框中顯示一個較大的圖像，但是它不起作用。

我之前發布了這個問題，並得到了很好的答復。 我想問問是否有人可以給我一個普通的javascript代碼，我需要將其插入才能進行此工作。 我有一個有人請給出的代碼，它可以工作，但是如果可能的話，我只想使用Java腳本代碼。

$(function(){
    $('.thumbnails img').hover(function(){
        $('#preview').attr('src',$(this).attr('src'));
    },null);
});

謝謝你們！

<!DOCTYPE html>

<head>
<title>Gallery</title>

<style type="text/css">
body {
background: #222;
margin-top: 100px;
}

h3 {
color: #eee;
font-family: Verdana;
}

.thumbnails img {
height: 100px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}

.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}

.preview img {
border: 4px solid #444;
padding: 1px;
width: 800px;
}

</style>

</head>
<body>


<div class="gallery" align="center">


<div class="thumbnails">
    <img onmouseover="preview.src=img1.src" id="img1" src="http://i60.tinypic.com/2qjj62b.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img2.src" id="img2" src="http://i60.tinypic.com/mb4c21.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img3.src" id="img3" src="http://i61.tinypic.com/35avvpw.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img4.src" id="img4" src="http://i60.tinypic.com/29qnjme.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img5.src" id="img5" src="http://i62.tinypic.com/zkmvd2.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img6.src" id="img6" src="http://i61.tinypic.com/oqezus.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img7.src" id="img7" src="http://i57.tinypic.com/1tx6oj.jpg" alt="Image Not Loaded"/>  
    <img onmouseover="preview.src=img8.src" id="img8" src="http://i58.tinypic.com/143onsj.jpg" alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img9.src" id="img9" src="http://i61.tinypic.com/2l16qf.jpg"  alt="Image Not Loaded"/>
    <img onmouseover="preview.src=img0.src" id="img0" src="http://i61.tinypic.com/21l0own.jpg"  alt="Image Not Loaded"/>

</div></br>

<div class="preview" align="center">
    <img id="preview" src="http://i60.tinypic.com/2qjj62b.jpg" alt="No Image Loaded"/>
</div>

</br>



</div>
</body>
</html>

Answer 1

這是圖庫的原始JS版本：

var images = document.getElementsByClassName('thumbnails')[0].getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
    images[i].onmouseover = function () {
        document.getElementById('preview').src = this.src;
    }
}

看到它在這里工作： http : //jsfiddle.net/2AM2N/5/

更新

以下是使用alt屬性的描述的方法：

document.getElementById('desc').innerHTML = this.alt; // this goes inside our loop

這是實時示例： http : //jsfiddle.net/2AM2N/6/

我的圖庫的JavaScript代碼

問題描述

1 個解決方案

解決方案1
0 已采納 2014-03-22 16:41:46

我的圖庫的JavaScript代碼

問題描述

1 個解決方案

解決方案1 0 已采納 2014-03-22 16:41:46

解決方案1
0 已采納 2014-03-22 16:41:46