Отображение изображения на изображении

Question

Я хочу сделать показ продуктов моего сайта при наведении курсора. Сначала я использовал функцию show / hide jQuery, после чего я решил, что лучше всего использовать массивы, но у меня нет 0 знаний

Это именно то, что я хочу

При наведении курсора на любой продукт его значение массива отображается ниже в контейнере с различной информацией.

Это код, который у меня есть на данный момент:

Я знаю свой код это тра sh, но это только для иллюстрации моего подхода, я работаю над тем, чтобы сделать его более человечным, но моя неопытность останавливает меня для выполнения моей задачи. Приветствуется любой связанный материал, даже учебник по использованию массивов с html. Заранее спасибо

Answer 1

Предположим, что ваш набор бутылок выглядит примерно так, как в моей скрипке ниже. Затем я бы сначала начал добавлять ваши бутылки программно на вашу страницу. Это сэкономит вам много работы в долгосрочной перспективе, когда бутылки / изображения или данные из вашего бэкэнда изменятся.

Поэтому вам понадобится некоторая функция addBottle для отображения bottle на вашей "полке". В этой функции вы прикрепляете обработчики событий для бутылок для mouseleave и 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>