Question

我正在编写一个脚本，在更大的框中显示onmouseover图像。但是，经过3天的工作......它仍然无法正常工作。

所以，我有1/4的微小图像，当我使用mousover时，应该更新较大图像的图像src。

我的代码，

JS

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>

怎么了？

Answer 1

试试这个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");
    }
}

Answer 2

<强> 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>

使用鼠标悬停在其他div中显示图像

2 个答案: