如何在悬停时加载不同的图像

Question

我在电子商务应用程序中工作，在此我想完成下面提到的任务......

当我将鼠标悬停在较小的图像上时，我需要在大盒子上显示相应的图像。

在这个大图像尺寸是2000 * 2000像素 较小的图像尺寸是80 * 80但是我在其他文件夹中有相应较小图像的大图像。当我将鼠标悬停在相关的较小图像上时，我希望将大图像加载到大框中...

我做了一些事情，但这对我不起作用......

$('img[id^=sm00]').click(function() {
  $('#ProductImage').attr('src', $(this).attr('src'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail">
    <img id="sm001" src="assets/bank/bal2.jpg" alt="img1" class="img-thumbnail">
    <img id="sm002" src="assets/bank/bal3.jpg" alt="img1" class="img-thumbnail">
    <img id="sm003" src="assets/bank/bal4.jpg" alt="img1" class="img-thumbnail">
    <img id="sm004" src="assets/bank/bal5.jpg" alt="img1" class="img-thumbnail">
  </div>
</div>

Answer 1

您可以使用.data()进行此操作，请查看以下更新的代码段...

$('img[id^=sm00]').hover(function() {
  $('#ProductImage').attr('src', $(this).data('img'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="https://dummyimage.com/600x400/000/fff" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="https://dummyimage.com/60x40/000/fff" alt="img1" class="img-thumbnail" data-img="https://dummyimage.com/600x400/000/fff">
    <img id="sm001" src="https://dummyimage.com/60x40/ff0/fff" alt="img2" class="img-thumbnail" data-img="https://dummyimage.com/600x400/ff0/fff">
    <img id="sm002" src="https://dummyimage.com/60x40/00f/fff" alt="img3" class="img-thumbnail" data-img="https://dummyimage.com/600x400/00f/fff">
    <img id="sm003" src="https://dummyimage.com/60x40/0ff/fff" alt="img4" class="img-thumbnail" data-img="https://dummyimage.com/600x400/0ff/fff">
    <img id="sm004" src="https://dummyimage.com/60x40/f00/fff" alt="img5" class="img-thumbnail" data-img="https://dummyimage.com/600x400/f00/fff">
  </div>
</div>

Answer 2

这应该有效。您在代码中调用小图像，但是您需要调用大图像的路径，我在此示例中将其放入ref属性中。你也使用点击方法，所以我把它改为悬停。

$('img[id^=sm00]').hover(function() {
  $('#ProductImage').attr('src', $(this).attr('ref'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container col-5">
  <img src="assets/bank/cart.png" id="ProductImage" class="img-fluid" data-toggle="modal" data-target="#exampleModalCenter" alt="Responsive image">
</div>

<div class="12">
  <div class="row">
    <img id="sm001" src="assets/bank/bal1.jpg" alt="img1" class="img-thumbnail" ref="path/to/big/image1.jpg">
    <img id="sm001" src="assets/bank/bal2.jpg" alt="img2" class="img-thumbnail" ref="path/to/big/image2.jpg">
    <img id="sm002" src="assets/bank/bal3.jpg" alt="img3" class="img-thumbnail" ref="path/to/big/image3.jpg">
    <img id="sm003" src="assets/bank/bal4.jpg" alt="img4" class="img-thumbnail" ref="path/to/big/image4.jpg">
    <img id="sm004" src="assets/bank/bal5.jpg" alt="img5" class="img-thumbnail" ref="path/to/big/image5.jpg">
  </div>
</div>

Answer 3

＆＃13;

＆＃13;

.col-xs-6{
  height: 50vh;
}
.col-xs-6{
  background: url('http://joelbonetr.com/images/fwhee.png');
  background-size: cover;
}
.col-xs-6:hover{

height: 75vh;
background: url('http://joelbonetr.com/images/lightwheel.jpg');
background-size: cover;
}

＆＃13;

    <div class="col-xs-6"></div>

＆＃13;

＆＃13;

＆＃13;

我认为这就是你要求的