Is there a way to make the image above change when I hover over the thumbnail?

Seeking assistance with JavaScript to enable changing thumbnails on hover.

As a newcomer to JavaScript, I'm struggling to grasp how to achieve this effect. I've already implemented fancybox for gallery functionality.

Below is the HTML and CSS for reference. Any guidance on the JavaScript part would be greatly valued.

 <html lang="en">
 <head> 
   <link rel="shortcut icon" href="favicon.ico">
   <meta name="description" content="Collectables and memorabilia from the TV show LOST. Screen used props, action figures, trading cards, costumes and much more">
   <meta name="keywords" content="autographs, props, trading cards, LOST, authentic, dharma initiative, hawaii, beach, jungle, special events, toys, games, trading cards, everything else">
   <meta charset="UTF-8"></script>
    <div class= <title>LOST Collector</title>
   <link rel="stylesheet" type="text/css" href="main.css"/>

   <!-- Add jQuery library -->
   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
   <script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
   <link rel="stylesheet" href="fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
   <script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
   <link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
   <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
   <script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
   <script type="text/javascript">
   $(document).ready(function() {
       $(".fancybox").fancybox();
   });
   </script>
                    
</head>
<body>
    <div class="pagecontent">
        <header>    
            <a href="http://www.lostcollector.com">
                <img src="images/logo.png" alt="Lost Collector" title="Lost Collector"/>
            </a> 
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="about.html">About LOST Collector</a></li>
                    <li><a href="mailto:[email protected]">Contact</a></li>
                </ul>
            </nav>
        </header>
        <ul id="navigation_layout">
            <li><a href="artwork.html" id="artworknav">Artwork</a></li>
            // Rest of the navigation items...
        </ul> 
        <div class="itemdetails">
           <div class="itemtext">
                <h1>Inkworks: Season One</h1>
                <h2>AR-1 unused Redemption Card</h2>
                <h3>For Maggie Grace autograph card A-3</h3>
                <p>Description here.</p>
           </div>

           <div class="itemdetails_aside">
                <a class="fancybox" rel="group" href="images/tradingcards/season1inkworks/AR1big.jpg"><img src="images/tradingcards/season1inkworks/AR1.jpg" alt="AR-1 Redemption Card" title="click to enlarge" height="430" width="308"/>
           </div>
           <div class="thumbnails">
                <img src="images/tradingcards/season1inkworks/thumbnails/ar1.jpg" alt="ar1" title="Click thumbnail to enlarge" width="107" height="150" /></a>
                // Add more thumbnail images...
            </div>
        </div>
 </body>  

body {
background-color: #5D6D7E;
display: inline;
}

// CSS rules
// ...

Answer №1

To ensure proper functionality, it is important to assign IDs and classes to the img elements in the following manner:

  <div class="iteminfo_box">
        <a class="gallery" rel="group" href="images/photos/season2prints/PT1big.jpg">
        <img id="bigImage" src="1.jpg" alt="PT-1 Promo Card" title="click to view full size" height="430" width="308" />
  </div>
  <div class="thumbnails">
        <img class="smallImage" src="1.jpg" alt="pt1" title="Click to view larger" width="107" height="150" /></a>
        <img class="smallImage" src="2.jpg" alt="mgpromo" title="Click to view larger" width="107" height="150" /></a>
  </div>

Implementing the corresponding JavaScript code can be achieved with relative ease:

var bigImage = document.getElementById("bigImage"),
    smallImages = document.getElementsByClassName("smallImage");

for(var i=0; i<smallImages.length;i++) {
    (function(i){
        smallImages[i].addEventListener("mouseover",function(){
            bigImage.setAttribute("src",smallImages[i].getAttribute("src"));
        });
    }(i));
}

Answer №2

Supposing that your images adhere to the following naming convention..

ar1.jpg (small version)    
ar1big.jpg (full version)

You can either include a new attribute in the thumbnail tags, for instance rn="" (rootname) or ensure that the alt="" contains the root image name (minus .jpg) so you can simply append 'big' to the root to link to the larger, full-size images when the mouse hovers over them.

Using jquery

$(function() { // when document is ready
    $('.thumbnails img').mouseover(function() { // upon hovering over thumbnail..
        var fullImagePath = 'images/tradingcards/season1inkworks/'; // base path for full-size images
        var imageRootName = $(this).attr('rn'); // retrieve root image name
        var bigImageNameAndPath = fullImagePath + imageRootName + 'big' + '.jpg'; // combine all elements
        $('.fancybox img').attr('src', bigImageNameAndPath); // replace src="" with path to corresponding full-size image when hovering over thumbnail
    });
});

The above code has not been tested, so please let me know if you encounter any issues.

Using html

<div class="itemdetails_aside">
    <a class="fancybox" rel="group" href="images/tradingcards/season1inkworks/ar1big.jpg">
        <img src="images/tradingcards/season1inkworks/AR1.jpg" alt="AR-1 Redemption Card" title="click to enlarge" height="430" width="308"/>
    </a>
</div>
<div class="thumbnails">
    <img src="images/tradingcards/season1inkworks/thumbnails/ar1.jpg" rn="ar1" alt="ar1" title="Click thumbnail to enlarge" width="107" height="150" />
    <img src="images/tradingcards/season1inkworks/thumbnails/ar1mgb.jpg" rn="ar1mgb" alt="mgrdmp" title="Click thumbnail to enlarge" width="107" height="150" />
</div>

Answer №3

If you're in need of CSS Image Sprites, check out the Hover Effect located at the end of the following page: CSS Image Sprites. You won't require any Javascript for this solution.

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

Geolocation API for determining altitude

When using the geolocation API, I am experiencing no issues with latitude and longitude. However, I have encountered a problem with Altitude. For instance, when I retrieve the coordinates for my current location using my mobile phone with integrated GPS, i ...

Determining the depth difference of nodes between two elements using JQuery

Is there a simple method to calculate the node depth difference between 2 elements? Example : <div id="1"> <div id="2"></div> <div id="3"> <div id="4"></div> </div> </div> <div id="5"></d ...

Seeking guidance on selecting text using XPath

My HTML document contains the following HTML code: <!DOCTYPE html> <html> <head> <title>page XYZ</title> </head> <body> <p><b>bold text</b> some more text </p> <p>< ...

Issues with removing options from Autocomplete persist in React MaterialUI

Currently navigating the world of ReactJS and experimenting with Material UI's Autocomplete component. The challenge lies in managing a complex data structure where options are dynamically generated based on user selections, but removing previously se ...

Encountering the 404 Page Not Found error upon refreshing the page while utilizing parallel routes

I'm currently developing a webapp dashboard using the latest version of Next.js 13 with app router. It features a dashboard and search bar at the top. I attempted to implement parallel routes. The @search folder contains the search bar and page.jsx wh ...

Switching the positions of the date and month in VueJS Datepicker

Recently, I have been utilizing the datepicker component from vuejs-datepicker. However, I encountered an issue where upon form submission, the date and month switch places. For instance, 10/08/2018 (dd/MM/yyyy) eventually displays as 08/10/2018, leading ...

Enhance your React Routing using a Switch Statement

I am currently developing a React application where two distinct user groups can sign in using Firebase authentication. It is required that each user group has access to different routes. Although the groups share some URLs, they should display different ...

Finding it challenging to retrieve the dynamically generated data from the PHP-MYSQL combination through jQuery AJAX

The question's title doesn't provide much information. Let me explain what I'm trying to accomplish here. Using jQuery, I have an HTML form that sends an AJAX request to a PHP file. The PHP file successfully returns the required data back to ...

What is the method for obtaining the current date when altering the system date to a previous time?

To ensure that my datepicker always displays the current date and does not allow selection of past dates, I need to update the date if the system date is in the past. If I change the system date to a past date, I don't want the datepicker to reflect t ...

Guide on transferring JSON information from a client to a node.js server

Below is the code snippet from server.js var express = require("express"), http = require("http"), mongoose = require( "mongoose" ), app = express(); app.use(express.static(__dirname + "/client")); app.use(express.urlencoded()); mongoose.con ...

When the text starts to overlap the column completely at approximately 700 pixels wide

Previously, everything was working fine until it suddenly broke. The column system switches to a 100% width single column at 1500px, but for some reason, the text overflows off the screen around 700px and I can't figure out why. The text at the bottom ...

Implementing Vuejs sorting feature post rendering

Currently, I have elements linked to @click event listeners. <th @click="sort('dateadded')" class="created_at">Date Added I am looking for a way to automatically trigger this sorting function when the Vue.js component renders, so that th ...

javascript - A single image within the array fails to load

I'm encountering a challenge while trying to preload images in an array for later use in drawing on a canvas, such as in a 2D top-down game board. Interestingly, one of these images (which are Greyscale GIFs, by the way) refuses to load. It's evi ...

Tips for passing the element ID as an argument in the jQuery upvote plugin function

var updateVote = function(data) { $.ajax({ url: '/vote/', type: 'post', data: { id: data.id, up: data.upvoted, down: data.downvoted, ...

Create a choppy distortion effect using CSS filters in Google Chrome

Currently working on a hover effect that enhances image brightness and scales the image during hover. However, I am experiencing some choppiness in the transform animation due to the CSS filter. It's strange because it appears to be smooth in Safari a ...

Consistency in table cell formatting

What is the best way to ensure all my table cells have a consistent height and width, regardless of their content? I am working on a crossword puzzle game where some cells are empty, some contain letters as the user fills in words, and others display butt ...

I am unable to align the image in the center, what could be causing it not to center properly?

Why does my code center in mobile view but not in Desktop? How can I solve this issue? I have tried using display: block; margin: auto; width:100%; and text-align: center;, but it did not work. let $slides, interval, $selectors, $btns, currentIndex, ne ...

Exploring Ngrx: Leveraging a single selector to choose multiple property modifications

I need some help with my reactive Form Angular application that uses the NGRX store. Instead of subscribing to the entire state, I want to subscribe to changes in specific fields like "name" and "city." I have been attempting to use the selector selectFor ...

What is the process of invoking Link manually in React-router?

I am working on a component that is passed a <Link/> object from react-router as a prop. When the user clicks on a 'next' button within this component, I need to manually trigger the <Link/> object. Currently, I am using refs to acce ...

Switching the visibility of rows in a table

Imagine this as my example table: <table> <tr> <td>a</td> <td>one</td> <td>two</td> </tr> <tr> <td>b</td> <td>three</td> <td>four</t ...