Display of image on image Hover

Question

I want to make an on hover display of my site products. My initial though was to use the show/hide jQuery function after that I though using arrays was my best bet but I have 0 knowledge off

This is exactly what I want

When you hover any product it's array value is displayed below in a container with it's various info

This is the code I have for now:

<script>
 function display() {
  var imgArray = ["E11.png", "E11BIO.png", "E22-clear-2018.png", "E22BIO.png"];
 }
</script>

    <img src="E11.png" onHover="display();">
    <img src="E11BIO.png" onHover="display();">
    <img src="E22-clear-2018.png" onHover="display();">
    <img src="E22BIO.png" onHover="display();">

    <div class="display">
        <img src="imgArray[i]" style="width:50px;">
    </div>

I know my code is trash but it is only to illustrate my approach, I am working on making it more humanlike but my inexperience is stopping me for completing my task. Any related material code even tutorial on how to use arrays with html is appreciated. Thanks in advance

Answer 1

Lets assume your array of bottles looks something like in my fiddle below. I would then first start by adding your bottles programmatically to your page. That will save you alot of work in the long term when bottles/ images or data from your backend change.

Therefore you would need some addBottle function to display the bottle on your "shelf". In that function you attach the eventhandlers for the bottles for mouseleave and mouseenter.

let bottles = [
 {img: 'someImageReference 1', title: 'some Title 1', year: '1900'},
  {img: 'someImageReference 2', title: 'some Title 2', year: '1901'},
  {img: 'someImageReference 3', title: 'some Title 3', year: '1902'},
  {img: 'someImageReference 4', title: 'some Title 4', year: '1903'},
  {img: 'someImageReference 5', title: 'some Title 5', year: '1904'},
  {img: 'someImageReference 6', title: 'some Title 6', year: '1905'},
  {img: 'someImageReference 7', title: 'some Title 7', year: '1906'},
  {img: 'someImageReference 8', title: 'some Title 8', year: '1907'},
];

for(var i = 0; i < bottles.length; i++) {
 addBottle(bottles[i]);
}

function addBottle( bottleData ) {
 let $bottle = $('<span></span>').addClass('bottle');
  let $shelf = $('.shelf');
  $shelf.append($bottle);
  $bottle.on('mouseenter', function() {
   displayBottleData( bottleData );
  }).on('mouseleave', function() {
   hideBottleDetails();
  });
}

function hideBottleDetails() {
 let $bartender = $('#bartender');
  $bartender.empty();
}

function displayBottleData( data ) {
 let $bartender = $('#bartender');
 hideBottleDetails();
  $bartender.text('This bottle is from ' + data.year);
}

#bartender {
  width: 100%;
  background: red;
  margin-top: 2em;
  color: white;
}

.shelf {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.bottle{
  width: 10%;
  height: 100px;
  background: black;  
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="shelf"></div>

<div id="bartender">
  
</div>