Using relative image path as parameter instead of using this-CodePudding

I'm trying to make an simple Tab Gallery based on the one found at W3Schools.

However I want to be able to use a relative image path instead of using 'this' when calling myFunction. But I don't know how to do that.

As you can see in the Html, I have tried using a relative path for the second image, which doesn't work. My structure is, index.html main.css script.js are all in the same folder and then I have a folder called 'img' for the images.

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 >
    <div >
      <img src="img/img_nature.jpg" alt="Nature" onclick="myFunction(this);">
    </div>
    <div >
      <img src="img/img_snow.jpg" alt="Snow" onclick="myFunction('img/img_lights.jpg');">
    </div>
    <div >
      <img src="img/img_mountains.jpg" alt="Mountains" onclick="myFunction(this);">
    </div>
    <div >
      <img src="img/img_lights.jpg" alt="Lights" onclick="myFunction(this);">
    </div>
  </div>

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

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

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

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

</html>

CodePudding user response：

using "this" is easier and shorter than use relative path but if you still want please try this:

HTML:

<div >
    <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";
  }