使用相對影像路徑作為引數而不是使用此-有解無憂

我正在嘗試基于在W3Schools找到的一個簡單的標簽庫。

但是，我希望能夠在呼叫 myFunction 時使用相對影像路徑而不是使用“this”。但我不知道該怎么做。

正如您在 Html 中看到的那樣，我嘗試對第二張影像使用相對路徑，但這是行不通的。我的結構是 index.html main.css script.js 都在同一個檔案夾中，然后我有一個名為“img”的檔案夾來存放影像。

function myFunction(imgs) {
  // Get the expanded image
  var expandImg = document.getElementById("expandedImg");
  // Get the image text
  var imgText = document.getElementById("imgtext");
  // Use the same src in the expanded image as the image being clicked on from the grid

  expandImg.src = imgs.getAttribute("src");


  console.log(imgs.getAttribute("src"));
  // Use the value of the alt attribute of the clickable image as text inside the expanded image
  imgText.innerHTML = imgs.alt;
  // Show the container element (hidden with CSS)
  expandImg.parentElement.style.display = "block";
}

function closeExpandedImg(btn) {
  btn.parentElement.style.display = 'none';
}

* {
  box-sizing: border-box;
}


/* The grid: Four equal columns that floats next to each other */

.column {
  float: left;
  width: 25%;
  padding: 10px;
}


/* Style the images inside the grid */

.column img {
  opacity: 0.8;
  cursor: pointer;
}

img {
  width: 100%;
  height: auto;
}

.column img:hover {
  opacity: 1;
}


/* Clear floats after the columns */

.row:after {
  content: "";
  display: table;
  clear: both;
}


/* The expanding image container (positioning is needed to position the close button and the text) */

.container {
  position: relative;
  display: none;
}


/* Expanding image text */

#imgtext {
  position: absolute;
  bottom: 15px;
  left: 15px;
  color: white;
  font-size: 20px;
}


/* Closable button inside the image */

.closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: white;
  font-size: 35px;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="main.css">
</head>

<body>
  <!-- The grid: four columns -->
  <div class="row">
    <div class="column">
      <img src="img/img_nature.jpg" alt="Nature" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="img/img_snow.jpg" alt="Snow" onclick="myFunction('img/img_lights.jpg');">
    </div>
    <div class="column">
      <img src="img/img_mountains.jpg" alt="Mountains" onclick="myFunction(this);">
    </div>
    <div class="column">
      <img src="img/img_lights.jpg" alt="Lights" onclick="myFunction(this);">
    </div>
  </div>

  <!-- The expanding image container -->
  <div class="container">
    <!-- Close the image -->
    <span onclick="closeExpandedImg(this);" class="closebtn">&times;</span>

    <!-- Expanded image -->
    <img id="expandedImg">

    <!-- Image text -->
    <div id="imgtext"></div>
  </div>

  <script src="script.js"></script>
</body>

</html>

uj5u.com熱心網友回復：

使用“this”比使用相對路徑更容易和更短，但如果你仍然想要，請試試這個：

HTML：

<div class="column">
    <img src="img/img_nature.jpg" alt="Nature" onclick="myFunction("img/img_nature.jpg","Nature");">
</div>

JS：

function myFunction(imgSrc, imgName) {
    // Get the expanded image
    var expandImg = document.getElementById("expandedImg");
    // Get the image text
    var imgText = document.getElementById("imgtext");
    // Use the same src in the expanded image as the image being clicked on from the grid

    expandImg.src = imgSrc;


    console.log(imgSrc);
    // Use the value of the alt attribute of the clickable image as text inside the expanded image
    imgText.innerHTML = imgName;
    // Show the container element (hidden with CSS)
    expandImg.parentElement.style.display = "block";
  }

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/492202.html

標籤：javascript html css 相对路径图片库

上一篇：單選按鈕的多行標簽

下一篇：在Apache中提供靜態HTML檔案