Question

我正在使用鼠标悬停功能创建一个图库，以使图像朝另一个div缩放。图库应将图像更改为图像div，但该函数不会将图像URL读取为背景URL。下面是我的代码：

</head>
<body>

<h1>Image Zoom</h1>

<p>Mouse over the image:</p>


<div class="row">
<a href="#" onclick="setImage(this);"><img class="gallery" id="image1" src="img_nature.jpg" /></a>
  <div class="column">
    <img src="img_nature.jpg" alt="Nature" style="width:100%" onclick="setImage(this);">
  </div>
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%" onclick="setImage(this);">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%" onclick="setImage(this);">
  </div>
  <div class="column">
    <img src="img_lights.jpg" alt="Lights" style="width:100%" onclick="setImage(this);">
  </div>
</div>
<div class="img-zoom-container">
  <img id="myimage" src=""width="300" height="240">
  <div id="myresult" class="img-zoom-result"></div>
</div>
<p>The image must be placed inside a container with relative positioning.</p>
<p>The result can be put anywhere on the page, but must have the class name "img-zoom-result".</p>
<p>Make sure both the image and the result have IDs. These IDs are used when a javaScript initiates the zoom effect.</p>

<script>
// Initiate zoom effect:
imageZoom("myimage", "myresult");
function setImage(imgParent) {
    document.getElementById("myimage").src =       imgParent.childNodes[0].src;
var src =imgParent.childNodes[0].src:
}
</script>

</body>

脚本图像 https://www.w3schools.com/howto/howto_js_image_zoom.asp

请帮助解决此问题

Answer 1

问题尚不清楚，但是我可以看到您的setImage函数存在问题。该函数是在img以外的每个myImage元素上内联分配的-因此调用childnodes[0]没有意义-您需要图像本身的src，因此您应该可以使用{函数内的{1}}：

this

或

使用事件样式

function setImage( img ) {
    document.getElementById('myimage').src=this.src;
}

大概您正在使用W3Schools上的代码，因此也许您可以对其进行调整以适合-尽管未进行任何测试。

function setImage( e) {
    document.getElementById('myimage').src=e.target.src;
}

如何将鼠标悬停在图库中的图像上

1 个答案: