Question

我无法更改html或css文件。我的任务是为我的缩略图设置一个点击处理程序，以放大元素中img中的图像。同时还将图中的figcaption文本设置为thumbs title属性。我需要附加到div id =缩略图。我的脚本没有放大我的缩略图或标题。

这是我到目前为止所做的。

<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>

<link rel="stylesheet" href="css/styles.css" />

<script type="text/javascript" src="js/chapter09-project02.js">

document.getElementById("thumbnails").addEventListener("click", function(e) {

if(e.target && e.target.nodeName.toLowerCase == "img") {

    // Taking the image src and converting it to medium image.
   var srcValue = e.target.src.replace("small","medium");

    // Taking title and storing it for later.
   var titleValue = e.target.title;

   document.getElementById("featured").src = srcValue;
   document.getElementById("featured").title = titleValue;
   document.getElementById("figcaption").innerHTML = titleValue;
}
});

document.getElementById("figcaption").addEventListener("onmouseover", function(e) {
var figcaption = e.target.style.opacity = .8;
});

document.getElementById("figcaption").addEventListener("onmouseout", function(e) {
var figcaption = e.target.style.opacity = 0;
});
</script>


</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
    <img src="images/medium/5855774224.jpg" title="Battle" />
    <figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
    <img src="images/small/5855774224.jpg" title="Battle" />
    <img src="images/small/5856697109.jpg" title="Luneburg" />
    <img src="images/small/6119130918.jpg" title="Bermuda" />
    <img src="images/small/8711645510.jpg" title="Athens" />
    <img src="images/small/9504449928.jpg" title="Florence" />
</div>

</main>
</body>
</html>

Answer 1

这是你想要的吗？

var caption = document.getElementsByTagName("FIGCAPTION")[0];
var images = document.getElementsByTagName("IMG");

for (val of images) {
  if(images[0] !== val){
    val.addEventListener("click", function(e) {
      caption.innerHTML = this.title;
      images[0].title = this.title;
      images[0].src = this.src.replace("small","medium");
    });
  }
}

img {
  width: 100px;
  height: 100px;
  }

<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>

<link rel="stylesheet" href="css/styles.css" />

</head>
<body>
<header>
<h2>Share Your Travels</h2>
</header>
<main>
<figure id="featured">
    <img src="https://cdn.pixabay.com/photo/2018/01/20/14/26/panorama-3094696__340.jpg" title="Battle" />
    <figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
    <img src="https://cdn.pixabay.com/photo/2018/05/15/09/23/raindrop-3402550__340.jpg" title="Battle" />
    <img src="https://cdn.pixabay.com/photo/2018/04/23/14/23/giraffe-3344366__340.jpg" title="Luneburg" />
    <img src="https://cdn.pixabay.com/photo/2018/04/20/18/19/grass-3336700__340.jpg" title="Bermuda" />
    <img src="https://cdn.pixabay.com/photo/2018/05/12/12/48/mountain-crumpled-3393209__340.jpg" title="Athens" />
    <img src="https://cdn.pixabay.com/photo/2018/04/24/19/14/hai-3347787__340.jpg" title="Florence" />
</div>

</main>
</body>
</html>

点击处理程序以放大图片

1 个答案: