Question 262375 in Html Question posted in
Some basic documentation can be found here.

Html – Switch image by using hover

Hi there I want to ask if it is possible to have an image list and everytime I hover on one of them it will display on another div and will not disappear.

Take a look on the picture below instead of clicking the list of image I want to hover it and it will display on the bigger div and will stay there. The hovered image will replace the displayed image

(https://phpout.com/wp-content/uploads/2023/10/2Iip7.png)

Tags:

3

Answers


  1. 0

    the key is to use "onmouseover" in html, if u want it to change after leaving use "onmouseleave"

    var a = 'url("https://i.stack.imgur.com/2Iip7.png" )';

function noone(element) {
  document.getElementById("div1").style.backgroundImage = a;
}
    <!-- div for the main -->
<div id="div1">This statement will change</div>
<!-- div for the one of the down image, i used img not div -->
<img src="https://i.stack.imgur.com/2Iip7.png" onmouseover="noone(this) ;" alt="">
    Login or Signup to reply.
  2. 0

    You will need JS for this. On events onmousenter for the thumb you get src of the thumb and change src of the target picture and onmouseleave you switch it back to original.

    Login or Signup to reply.
  3. 0

    Change the large image’s source to that of the hovered thumbnail.

    EG:

    var main = document.querySelector("#main");
var thumbs = document.querySelectorAll("#thumbs img");
thumbs.forEach((thumb) => {
  thumb.addEventListener('mouseover', () => {
    main.src = thumb.src;
  });
});
    #wrap {
  width: 300px;
}

#main {
  width: 100%;
}

#thumbs {
  display: grid;
  grid-auto-flow: column;
}

#thumbs img {
  width: 100px;
  aspect-ratio: 1;
}
    <div id="wrap">
  <img id="main" src="" />
  <div id="thumbs">
    <img src="http://placekitten.com/200/200" />
    <img src="http://placekitten.com/300/300" />
    <img src="http://placekitten.com/400/400" />
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search