Tips for changing images when hovering over them

Currently engaged in the development of an e-commerce application, where I am looking to accomplish a specific task...

https://i.sstatic.net/sYoG8.png

The objective is to display the corresponding large image on the big box when hovering over smaller images.

The dimensions of the big image are 2000 * 2000 pixels and the small image measures 80 * 80. However, the large images for the small ones are located in a separate folder. The goal is to load the large image into the big box upon hovering over the related small image...

I have attempted some coding but it seems to be malfunctioning...

$('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>

javascriptjqueryhtmlcssbootstrap-4

Answer №1

To achieve this, you can utilize the .data() method as shown in the updated code snippet below...

$('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

It seems like you are almost there! Just a small adjustment needed in your code. Instead of calling the small image path, make sure to call the path to the big image stored in the ref attribute. Additionally, consider changing the click method to hover for better functionality.

$('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

.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;
}
    <div class="col-xs-6"></div>

i believe this meets the criteria you requested for

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to pull out every Monday and every other Monday within a specific timeframe using PHP?

I'm currently utilizing the widely known jQuery UI's Datepicker for a form where I choose a range of two dates. The first date chosen signifies the starting date, while the second represents the end date. Now, I am in need of an algorithm, some ...

phpjqueryalgorithmdatepickerdate-range

Is it possible to implement a hover animation within another hover animation in WordPress?

Trying to incorporate two hover animations for the images in my photo galleries. When hovering over an image, I want a text to appear in a black overlay, and then when hovering over that text, it should become underlined. Looking for something similar to ...

htmlcsswordpressclasshover

Equal spacing among Bootstrap grid columns

<div class="form-group row"> <div class="col-sm-6"> <input type="text" name="languageSearch" id="languageSearch" class="form-control ui-autocomplete-input" value="" style="background-color: #ffff;" placeholder="Search Language" au ...

bootstrap-4

developing a dynamic map with javascript

In the image provided, my concept is for it to initially be without a green tint. However, when the user hovers over specific areas, they would turn green and become clickable links. There are multiple areas in the image, with this being just one example. ...

javascriptjqueryhtml

What is the process for displaying the current bitcoin price on an HTML page using API integration?

I'm looking to develop an application that can display the current Bitcoin price by fetching data from the API at . I want to showcase this information within an h2 element. Any suggestions on how I could achieve this? Thank you in advance. const e ...

javascripthtmlapiexpressbitcoin

Altering calendar dates using VBA for web scraping

Seeking assistance with creating a VBA program for automatically downloading historical stock data from a website. The code I have currently works for downloading data, but I'm facing challenges in changing the date using my code. You can view the co ...

htmlvbaseleniumweb-scraping

The radio buttons are stuck and not changing their selection

Having a group of radio buttons with the same name, when one is checked, it automatically selects another one in the group. Here is my current code: <input name="a" type="radio"> <input name="a "type="radio" checked> JS $("input[type='r ...

javascripthtml

The function .load() is not functioning properly on iPads

I am experiencing issues with a simple script that is supposed to check an image on my iPad running iOS 5.1. The script is meant to load a stream of jpg images and work on each frame, similar to how it works in a large Safari browser. However, on the iPa ...

jqueryipadloadmobile-safarimjpeg

When making an Ajax call, the response returns the existing HTML page instead of the intended

Recently, I attempted to implement an AJAX call using jQuery in the following manner (the file name is BR_states.txt and it matches correctly): <script> function changeSelectedShippingCountry(select){ var countryCode = select.options[select.select ...

javascriptjqueryhtmlajax

"Observed Issue: Ionic2 Array Fails to Update in HTML Display

I am struggling with updating an array in Ionic2 and Angular2. I have tried updating it on the front end but it's not working, even though it updates perfectly on the backend (ts) as confirmed by checking the console. I need assistance with this. Her ...

javascriptarraysangulartypescriptionic2

Determine the height of the input group when a span, input, and button are included

I have been attempting to create a 3 control input-group using Bootstrap 3.3.7, but I am encountering an issue where the height of the first addon does not match the height of the input field or button that follow. <div class="input-group"> < ...

csstwitter-bootstraptwitter-bootstrap-3

Why is the hashtag (#) mysteriously vanishing from the URL?

Imagine a scenario where you have a page with a URL like mypage.php#tab3, and there is a link that looks like this: When you click on the "Add" link, the URL becomes shorter to just mypage.php#. The code for the "Add" function is as follows: function ad ...

jqueryhtml

How can we display the Recent Updates from our LinkedIn profile on our website using iframe or javascript?

Currently, I am in the process of developing a .NET web application for our company's website. We already maintain an active LinkedIn profile where we regularly post updates. https://i.stack.imgur.com/T2ziX.png My main query at this point is whether ...

javascripthtmliframelinkedin-api

Set the CSS attribute value to be equal to twice the value of another CSS attribute value

Currently, I am experimenting with jQuery to create a specific effect that has been presenting some challenges: My goal is to set a css attribute value to be equal to another css attribute value multiplied by 2. To elaborate further, I want the margin-le ...

javascriptjquerycss

Ways to activate a stylish pop-up box using an input field (when focus is removed)

While attempting to activate Fancybox upon the user shifting focus away from an input field containing a value greater than 25, everything seems to be in order with the focus out and value checking code. Nevertheless, when Fancybox is triggered, the follow ...

javascriptjqueryfancybox

Centered on the page vertically, two distinct sentences gracefully align without overlapping, effortlessly adjusting to different screen sizes

I had no trouble centering horizontally but I'm struggling with vertical alignment. I want these two sentences to be positioned in the middle of the page, regardless of device size. I attempted using vertical-align without success and then tried posit ...

htmlcsscss-positionvertical-alignment

Refreshing HTML with a new data source in knockout.js

Greetings to the Stack Overflow community! I am reaching out for some assistance as a newcomer here. Currently, I am working with MVC and knockout.js. In my Model, I have a list object of data from which I create another one and filter out only 5 items. Th ...

c#jqueryasp.net-mvcknockout.js

Unable to retrieve the unprocessed value (including periods) from an HTML number input

Whenever I press a key on the <input type="number" id="n" /> and then type a ., it appears in the input but does not show up in $('#n').val(). For instance, if I type 123., the result from $('#n').val() is just 123. Is there a w ...

javascriptjqueryhtml

Gravity Forms Dropdown Selections Aren't Visible

I recently made a modification to the footer.php file by adding the following code: <div class="footer-email-form-container"> <?php echo do_shortcode( '[gravityform id="26" title="true" description="false"]' ); ?></div> Howeve ...

javascriptphpjqueryajaxwordpress

Using images stored locally in Three.js leads to undefined mapping and attributes

Currently, I am developing a WebGL application using Three.js that involves textures. To enhance my understanding, I have been referring to the tutorials available at . However, when attempting to run the application locally, I encountered several errors. ...

javascriptthree.js