CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Scotty_AJ
Scotty_AJ

Reputation: 1

Looking for a better way to change an image with multiple images onclick

So I'm curious if there is a better way to change a single img src with multiple a href images

I am using multiple onclick functions but I am mostly curious if I can create one single function to do this

x = document.getElementById("myImages-1").src = "<img src='https://i.sstatic.net/L7Iwr.png'>";

	function imageChange() {
		document.getElementById("mySlides").innerHTML = x;
	}

y = document.getElementById("myImages-2").src = "<img src='https://i.sstatic.net/cA4jE.png'>";

	function imageChange1() {
		document.getElementById("mySlides").innerHTML = y;
	}
<html>

<body>

<div id="content">

  <div id="mySlides">
  		<img src="https://i.sstatic.net/COgXm.png" width="100px" height="100px">
  	</div>

  <a onclick="imageChange()" id="myImages-1" href="#"><img src="https://i.sstatic.net/L7Iwr.png" width="100px" height="100px">Hello World</a>

<a onclick="imageChange1()" id="myImages-2" href="#"><img src="https://i.sstatic.net/cA4jE.png" width="100px" height="100px">Hello World</a>

</div>
  
  </body>

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

</html>

Upvotes: 0

Views: 758

Answers (3)

Vince
Vince

Reputation: 4232

There's always a better way and there is no best way because opinion and personal style is an important factor. Having said that, here's how I would do it...

  • I'd use a container element with display: grid to contain the display DIV and the image selectors.
  • For the image selectors, I'd use <input type="radio"> so that I don't have to keep track of which one is selected.
  • I'd create a single function that sets the background-image of the display DIV to the selected image and I'd use that as an event handler to be fired on page load and whenever the selection changes.
  • There's no need for jQuery or any other external dependencies.
  • There's a version of this that would work without any JavaScript at all using the checkbox hack and a duplicate image that would be used for the larger display. Alternatively, you could use a single image if you didn't need it to appear in the image selector as well.

function changeDisplay() {
  const display = document.querySelector(`.display`);
  const selected = document.querySelector(`input:checked ~ img`).getAttribute(`src`);
  display.style.backgroundImage = `url("${selected}")`;
}

window.addEventListener( `load`, changeDisplay );

document.querySelectorAll(`input[name="selected-image"`).forEach( selector => {
  selector.addEventListener( `change`, changeDisplay );
});
html, body {
  height: 100%;
  margin: 0;
}

.container {
  padding: 1rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 70% 30%;
  justify-items: center;
  align-items: center;
}

.display {
  width: 100%;
  height: 100%;
  grid-row: 1/2;
  grid-column: 1/4;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

label {
  width: 50px;
  height: 75px;
  display: inline-block;
  overflow: hidden;
  margin: 1em;
}

label img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

input {
  position: absolute;
  left: -9001px;
}
<div class="container">
  <div class="display"></div>
  <label>
    <input type="radio" name="selected-image" id="image1" checked>
    <img src="https://images.unsplash.com/photo-1560443794-1333caf35d20?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="target">
  </label>

  <label>
    <input type="radio" name="selected-image" id="image2">
    <img src="https://images.unsplash.com/photo-1571623696305-323946293072?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" "drone">
  </label>

  <label>
    <input type="radio" name="selected-image" id="image3">
    <img src="https://images.unsplash.com/photo-1571358132905-86642ca1c449?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="bricks">
  </label>
</div>

Upvotes: 0

Madhav Sharma
Madhav Sharma

Reputation: 140

Surely, you can do that! Why don't you try passing some parameters into that function?

This is one way that it can be done. Feel free to try out other ways too. 

<html>
  <body>
    <div id="content">
      <div id="mySlides">
        <img
          src="https://i.sstatic.net/COgXm.png"
          width="100px"
          height="100px"
        />
      </div>

      <a onclick="imageChange(x)" id="myImages-1" href="#"
        ><img
          src="https://i.sstatic.net/L7Iwr.png"
          width="100px"
          height="100px"
        />Hello World</a
      >

      <a onclick="imageChange(y)" id="myImages-2" href="#"
        ><img
          src="https://i.sstatic.net/cA4jE.png"
          width="100px"
          height="100px"
        />Hello World</a
      >
    </div>
  </body>

  <script>
    //declare your images
    x = document.getElementById("myImages-1").src =
      "<img src='https://i.sstatic.net/L7Iwr.png'>";
    y = document.getElementById("myImages-2").src =
      "<img src='https://i.sstatic.net/cA4jE.png'>";

    //Take the image as a parameter
    function imageChange(image) {
      document.getElementById("mySlides").innerHTML = image;
    }
  </script>
</html>

Upvotes: 0

sugars
sugars

Reputation: 1493

function imageChange(e) {
  document.getElementById("mySlides").children[0].src = e.children[0].src;
}

// or
/**
$(function() {
  $('a').on('click', function() {
    $('#mySlides').find('img').attr('src', $(this).find('img').attr('src'));
  });
})
**/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="content">
  <div id="mySlides">
    <img src="https://i.sstatic.net/COgXm.png" width="100px" height="100px">
  </div>

  <a onclick="imageChange(this)" id="myImages-1" href="#"><img src="https://i.sstatic.net/L7Iwr.png" width="100px" height="100px">Hello World</a>

  <a onclick="imageChange(this)" id="myImages-2" href="#"><img src="https://i.sstatic.net/cA4jE.png" width="100px" height="100px">Hello World</a>
</div>

Upvotes: 1

Related Questions