悬停时更改基本图像

Question

I want to change .product-image div when I click or hover on the small thumbnails only with HTML. Before I use a JavaScript code but I want to skip JavaScript method and leave only pure HTML.

Is there any way to can do this only with HTML?

I just want to say that the images will not have the same name like, instead the image name will be a variable, so every time when the page is loaded there will be other names for the images.

Here is my code:

 ul,ol {list-style:none;} .product-img-box {float:left;} .product-img-box .product-image {width:300px; float: right;} .product-img-box .more-views li img {width:90px; } 

 <div class="product-img-box"> <div class="more-views" style="float:left"> <ul class="slides" id="slides"> <li><a rel="#" href="#"><img src="http://i64.tinypic.com/24cuyhk.jpg" alt=""></a></li> <li><a rel="#" href="#"><img src="http://i64.tinypic.com/23mamww.jpg" alt=""></a></li> <li><a rel="#" href="#"><img src="http://i63.tinypic.com/1zwyaux.jpg" alt=""></a></li> <li><a rel="#" href="#"><img src="http://i63.tinypic.com/1zmk0ag.jpg" alt=""></a></li> <li><a rel="#" href="#"><img src="http://i64.tinypic.com/espx68.jpg" alt=""></a></li> </ul> </div> <p class="product-image" style="float:right"> <a href="#"><img src="http://i64.tinypic.com/24cuyhk.jpg" alt="" id="mainImage"></a> </p> </div> 

Thank you so much

Answer 1

but is imposible for me to use href there, all that href will be populated automatically.

Then In this case you could try to use CSS :hover

What I did is that when you hover the .grid1 it will look for the preceded( ~ ) element that is the .grid6 and then it will look for #img1 where the parent( > ) is .grid6 .

.grid1:hover ~ .grid6>#img1{
  display:block;
}

Please see the sample code below.

 html,body{ height:100%; width:100%; padding:0; margin:0; } .container{ margin-left:5%; margin-top:5%; display:grid; grid-template-columns: 15% 1fr; grid-template-rows: repeat(5, 1fr); justify-items: center; align-items: center; height:80%; width:80%; } .container img{ height:auto; width:100%; } .grid1, .grid2, .grid3, .grid4, .grid5{ height:100%; width:100%; } .grid6{ grid-row: 1 / 6; grid-column: 2 / 3; } .grid6 a{ display:none } .grid1:hover ~ .grid6>#img1{ display:block; } .grid2:hover ~ .grid6>#img2{ display:block; } .grid3:hover ~ .grid6>#img3{ display:block; } .grid4:hover ~ .grid6>#img4{ display:block; } .grid5:hover ~ .grid6>#img5{ display:block; } 

 <div class="container"> <div class="grid1"> <a rel="#" href="#img1"> <img src="http://i64.tinypic.com/24cuyhk.jpg" alt=""> </a> </div> <div class="grid2"> <a rel="#" href="#img2"> <img src="http://i64.tinypic.com/23mamww.jpg" alt=""> </a> </div> <div class="grid3"> <a rel="#" href="#img2"> <img src="http://i63.tinypic.com/1zwyaux.jpg" alt=""> </a> </div> <div class="grid4"> <a rel="#" href="#img2"> <img src="http://i63.tinypic.com/1zmk0ag.jpg" alt=""> </a> </div> <div class="grid5"> <a rel="#" href="#img2"> <img src="http://i64.tinypic.com/espx68.jpg" alt=""> </a> </div> <div class="grid6"> <a href="#" id="img1"> <img src="http://i64.tinypic.com/24cuyhk.jpg" alt=""> </a> <a href="#" id="img2"> <img src="http://i64.tinypic.com/23mamww.jpg" alt=""> </a> <a href="#" id="img3"> <img src="http://i63.tinypic.com/1zwyaux.jpg" alt=""> </a> <a href="#" id="img4"> <img src="http://i63.tinypic.com/1zmk0ag.jpg" alt=""> </a> <a href="#" id="img5"> <img src="http://i64.tinypic.com/espx68.jpg" alt=""> </a> </div> </div> </div> 

Hope this helps.