javascript - onmouseover，显示大图

当您将鼠标悬停在图像的较小版本上时，我正在尝试显示该图像的较大版本。我目前有4个函数可以执行此操作，但是我想知道是否可以使用一个函数来完成。问题是，如果我只有一个功能，我不确定如何更改源路径。我的代码如下。

HTML ：（出于测试目的，我只有鼠标悬停在第一张带有showImage（）的图像上）

<section>
        <article>
            <header>Mouse Over and Mouse Out Events</header>
            <img onmouseover="showImage()" onmouseout="hideImage()" id="one" src="images/small/catbread1.jpg" title="catbread1" alt="Cat with bread on face 1" /> <img onmouseover="bigImage2()" onmouseout="hideImage()" id="two" src="images/small/catbread2.jpg" alt="Cat with bread on face 2" />
            <img onmouseover="bigImage3()" onmouseout="hideImage()" id="three" src="images/small/catbread3.jpg" alt="Cat with bread on face 3" /> <img onmouseover="bigImage4()" onmouseout="hideImage()" id="four" src="images/small/catbread4.jpg" alt="Cat with bread on face 4" />
        </article>
        <article>
            <header>Cat Photos</header>
            <img id="full" src="" />
        </article>

Javascript：

function hideImage() {
    document.getElementById("full").src = "";
}

function bigImage1() {
    document.getElementById("full").src = "images/large/catbread1.jpg";
}

function bigImage2() {
    document.getElementById("full").src = "images/large/catbread2.jpg";
}

function bigImage3() {
    document.getElementById("full").src = "images/large/catbread3.jpg";
}

function bigImage4() {
    document.getElementById("full").src = "images/large/catbread4.jpg";
}

function showImage() {
    document.getElementById("full").src = "images/large/" + this.title + ".jpg";
}

最佳答案

看起来您已经将图像排列为large/和small/的并行层次结构-太好了，它将使此过程变得容易，并且您几乎已经在showImage中进行了此操作。我将使用一些stock photos构建该示例，因此它显然可以工作。

基本上，您想做的是：

抓取鼠标悬停的图像
用small/替换其路径的large/部分
将其分配给full元素

要获取鼠标悬停的图像，请在showImage事件期间将其传递给onmouseover。触发事件的元素可以作为this使用。

<img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/9413/animal-cute-kitten-cat-small.jpg" />

showImage接受参数，您可以使用replace()进行路径转换，然后将其分配给full。

function showImage(img) {
  var src = img.src;
  var largeSrc = src.replace('small', 'large');
  document.getElementById('full').src = largeSrc;
}

弹出以下代码片段以进行演示：

function hideImage() {
  document.getElementById("full").src = "";
}

function showImage(img) {
  var src = img.src;
  var largeSrc = src.replace('small', 'large');
  document.getElementById('full').src = largeSrc;
}

<article>
  <header>Mouse Over and Mouse Out Events</header>
  <img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/9413/animal-cute-kitten-cat-small.jpg" />
  <img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/13937/pexels-photo-13937-small.jpeg" />
  <img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/7517/animal-sitting-animals-inside-small.jpg" alt="Cat with bread on face 3" />
  <img onmouseover="showImage(this)" onmouseout="hideImage()" src="https://static.pexels.com/photos/254/pet-kitten-cat-lying-small.jpg" />
</article>
<article>
  <header>Cat Photos</header>
  <img id="full" />
</article>

ShowImage

javascript - onmouseover，显示大图