Mouse Over Text To Display Image On A Fixed Location

Question

I am new to HTML, CSS, and Javascript. For some time I have been looking to design my website the same as Harvard school of design but after a lot of search over the internet, I can only find this result change links with images

$('#thumbs img').hover(function(){
    $('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

$('#thumbs2 a').hover(function(){
   $('#largeImage2').attr('src',$(this).attr('href').replace('thumb','large'));
});

$('#thumbs3 a').hover(function(){
   $('#largeImage3').attr('src',this.getAttribute('data-swap'));
});

#thumbs ,#thumbs2, #thumbs3 {overflow: hidden; }
#thumbs img, #largeImage, #largeImage2 ,#largeImage3
{ border: 1px solid gray; padding: 4px; background-color: white; cursor: pointer; }
#thumbs img ,#thumbs2 a ,#thumbs3 a{ float: left; margin-right: 6px; }
#panel { position: relative; }

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

//WITH IMAGE LINKS </br><hr></br>
<div id="gallery"> 
    <div id="panel"> 
        <img id="largeImage" src="http://placehold.it/100" /> 
        <div id="description">main image with image links</div> 
    </div> 

    <div id="thumbs"> 
       <img src="http://placehold.it/100/ee55ee" alt="1st image description" />
       <img src="http://placehold.it/100/080" alt="2nd image description" />
       <img src="http://placehold.it/100/ff6" alt="3rd image description" />
       <img src="http://placehold.it/100/ff3322" alt="4th image description" />
    </div> 
</div> 
</br><hr></br>
    //WITH SIMPLE LIVE LINKS </br></br>
<div id="gallery2"> 
    <div id="panel"> 
        <img id="largeImage2" src="http://placehold.it/100/" /> 
        <div id="description">main image with simple links</div> 
    </div> 

    <div id="thumbs2">
        <a href="http://placehold.it/100/ff3322" >link1</a>
         <a href="http://placehold.it/100/ffc5c5">link1</a>
        <a href="http://placehold.it/100/eec777">link1</a>
        <a href="http://placehold.it/100/887744">link1</a>
    </div> 
</div> 
 </br><hr></br>
    //WITH SIMPLE [DISABLED] LINKS </br></br>
<div id="gallery3"> 
    <div id="panel"> 
        <img id="largeImage3" src="http://placehold.it/100/" /> 
        <div id="description">main image with simple links</div> 
    </div> 

    <div id="thumbs3"> 
        <a href="#" data-swap="http://placehold.it/100/ff3322" >link1</a>
         <a href="#" data-swap="http://placehold.it/100/ffc5c5">link1</a>
        <a href="#" data-swap="http://placehold.it/100/eec777">link1</a>
        <a href="#" data-swap="http://placehold.it/100/ff88ee">link1</a>
    </div> 
</div>

which is not much desired. The result which I got on this website is really I am looking forward to the time being. Being new to front-end technologies facing a hard time achieving this goal. I would really appreciate getting help.

Answer 1

Having looked at the code referenced in the question, I wonder whether something a bit simpler would suffice.

In particular, there doesn't really seem to be a need for jquery and it's probably useful to get a basic understanding of 'raw' Javascript before taking on a library.

This snippet has very minimal styling deliberately, just to show the basic JS. UPDATE To make the transition to the hovered element smoother all images are loaded to begin with. They are stored in the bigImage element so it will be possible to show them offset and transition them in and out as desired using CSS. This code is just the basic stuff needed to show an image on a hover event.

  

<!-- begin snippet: js hide: false console: true babel: false -->

    #container div.bigImage {
      display: inline-block;
    }
    .bigImage img {
      display: none;
    }

    #container ul {
      list-style: none;
      width: auto;
      float: left;
      margin: 2vw;
    }

    #container ul li {
      width: auto;
    }

    #container ul li a {  
      text-decoration: none;
    }
    
 .bigImage img.show {
   display: block;
   }

    <div id="container">
        
            <ul id="ul">
                    <li><a href="#">Pic 1</a></li>
                    <li><a href="#">Pic 2</a></li>
                    <li><a href="#">Pic 3</a></li>
                    <li><a href="#">Pic 4</a></li>
            </ul>

            <div class="bigImage">
          <img src="https://picsum.photos/id/1/300/300.jpg" class="show">
          <img src="https://picsum.photos/id/2/300/300.jpg">
          <img src="https://picsum.photos/id/3/300/300.jpg">
          <img src="https://picsum.photos/id/4/300/300.jpg">
          </div>
        </div>

const bigImage = document.querySelector("#container div.bigImage"); //get the bigImage element const img = bigImage.querySelector("img"); // get the img element within it const textdiv = bigImage.querySelector("div.text"); //get the div which holds the text

    const lis = document.querySelector("#container ul").getElementsByTagName("li"); //get a collection of the li elements inside the ul element
  
  // listen for mouseover event on the li elements
    for (var i=0; i<lis.length; i++) {
        lis[i].addEventListener('mouseover', function() {
    // on an event this will refer to the element that witnessed that event
      img.src = this.getAttribute("data-src");
      textdiv.innerHTML = this.getAttribute("data-text");
        }
    );
    }
  
  // initialise the bigImage with the image and text from the first list element  
  bigImage.querySelector("img").src = lis[0].getAttribute("data-src");
  bigImage.querySelector("div").innerHTML = lis[0].getAttribute("data-text");

#container div.bigImage {
  display: inline-block;
}

#container ul {
  list-style: none;
  width: auto;
  float: left;
  margin: 2vw;
}

#container ul li {
  width: auto;
}

#container ul li a {  
  text-decoration: none;
}

<div id="container">
    
        <ul>
                <li data-src="https://picsum.photos/id/1/300/300.jpg" data-text="Picture 1"><a href="#">Pic 1</a></li>
                <li data-src="https://picsum.photos/id/2/300/300.jpg" data-text="Picture 2"><a href="#">Pic 2</a></li>
                <li data-src="https://picsum.photos/id/3/300/300.jpg" data-text="Picture 3"><a href="#">Pic 3</a></li>
                <li data-src="https://picsum.photos/id/4/300/300.jpg" data-text="Picture 4"><a href="#">Pic 4</a></li>
        </ul>

        <div class="bigImage">
      <img src="">
      <div class="text">
      </div>
    </div>