动态鼠标悬停图像使用PHP和JavaScript

Question

The hover event on an image should show it on a fixed div. How can i achieve this ?

For example : In flipkart if there is particular product and they give color variation for that product, when we hover on color variation we can see that color product.
If their is blue color option available for bag, we hover on blue box and then blue bag image appears.

Answer 1

Try this:

1. Save the url of img in Javascript
2. Add a data-color attribute to the elements
3. Use hover event

 $("div.color").hover(function() { var color = $(this).attr("data-col"); if (color == "blue"){ $("#box").html("<img src = 'https://rukminim1.flixcart.com/image/312/312/dress/a/p/h/fk01-1-elevate-women-m-original-imaehfswyyqct7jg.jpeg?q=70'/>"); } if (color == "red"){ $("#box").html("<img src = 'https://rukminim1.flixcart.com/image/832/832/sari/p/e/q/1-1-vf-109-varni-retail-free-original-imaem8ypw2dhyekc.jpeg?q=70'/>"); } if (color == "green"){ $("#box").html("<img src = 'https://rukminim1.flixcart.com/image/832/832/lehenga-choli/a/p/t/1-1-yue7984-sareeshop-free-original-imae96y2v3wdz5nr.jpeg?q=70'/>"); } if (color == "yellow"){ $("#box").html("<img src = 'https://rukminim1.flixcart.com/image/832/832/sari/y/u/d/1-1-enix20-digitalmella-original-imaeaz7cehby8kqz.jpeg?q=70'/>"); } }); 

 .color { heigth: 50px; width: 50px; border: solid 1px black; display: inline-block; } #box { height:300px; width:300px; border: solid 1px black; margin-top:20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class= "color" data-col="blue">blue</div> <div class= "color" data-col="red">red</div> <div class= "color" data-col="green">green</div> <div class= "color" data-col="yellow">yellow</div> <div id="box"><img src = "https://rukminim1.flixcart.com/image/312/312/dress/a/p/h/fk01-1-elevate-women-m-original-imaehfswyyqct7jg.jpeg?q=70"/></div> 

Answer 2

BASIC CSS

.clearfix:after {
  content: ".";
  display: block;
  width: 100%;
  height: 0px;
  visibility: hidden;
  clear: both;
}

#prod-image-container {
  border: 1px solid #CCC;
  width: 600px;
  height: 400px;
}

#prod-images {
  list-style: none;
  margin: 0;
  padding: 0;
}

#prod-images li {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid #CCC;
  margin: 0 4px 4px 0;
}

HTML

<ul id="prod-images" class="clearfix">
  <li class="prod-color" data-big-image="https://dummyimage.com/600x400/CC0000/fff.png" data-color="#CC0000" /></li>
  <li class="prod-color" data-big-image="https://dummyimage.com/600x400/CCC/fff.png"  data-color="#CCCCCC"/></li>
  <li class="prod-color" data-big-image="https://dummyimage.com/600x400/FFF000/fff.png"  data-color="#FFF000"/></li>
</ul>
<div id="prod-image-container">
  <img src="https://dummyimage.com/600x400/CC0000/fff.png" />
</div>

Using jQuery

<script>
$(function() {
  $("#prod-images .prod-color").each(function( index ) {
    var color_palette = $(this).attr("data-color");
    $(this).css("background-color", color_palette)
  });
  $("#prod-images .prod-color").hover(function() {
    var prod_image = $(this).attr("data-big-image");
    $("#prod-image-container img").attr("src", prod_image);
  });
});
</script>

Quick little fiddle: https://jsfiddle.net/adrianopolis/ast16g7t/