Replace the image source with a list of images

I am looking to create a dynamic image list using either an array or an HTML list. When I hover over an image, it should change one by one with a fade or slide effect, and revert back to the default images when I hover out.

Question 1: What type of list should I use - an HTML list or an array?

Question 2: Is it correct to use a span element with data-src attribute to get the image URLs?

Click here to see the demo on CodePen

HTML

<div class="img-area">
 <img src="http://cdn.anitur.com.tr/resimler/logo/2016-11/otel_granada-luxury-belek_9cca25crBlK2lNq0AS5H.jpg" alt="">
    <span data-src="http://cdn.anitur.com.tr/resimler/logo/2014-12/otel_lykia-world-links-golf_UIaJYkbajuilxPCGYzxM.jpg">
    <span data-src="http://cdn.anitur.com.tr/resimler/logo/2014-12/otel_lykia-world-links-golf_UIaJYkbajuilxPCGYzxM.jpg">
 </div>

   <div class="img-area">
 <img src="http://cdn.anitur.com.tr/resimler/logo/2014-12/otel_lykia-world-links-golf_qtNSeosTlMq2dDG35zvY.jpg" alt="">
     <span data-src="http://cdn.anitur.com.tr/resimler/logo/2014-12/otel_lykia-world-links-golf_OnYNchpgK6PJmucaHMHN.jpg">

JavaScript code:

$(document).ready(function(){
 $(".img-area img").hover(function(){
   $(this).parents(".img-area").find("img");
 })
});
javascriptjqueryhtmlcssimage

Answer №1

Rotate pictures at specific intervals

function rotateImage(img){
    // document.getElementById('bigImg').src=img;
    setTimeout(function() {document.getElementById('bigImg').src=img;},1250);
}

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

Help me understand how to display the data in a JSON array

{ "entries": [ { "id": 23931763, "url": "http://www.dailymile.com/entries/23931763", "at": "2013-07-15T21:05:39Z", "message": "I ran 3 miles and walked 2 miles today.", "comments": [], "likes": [], ...

javascriptjqueryhtmljsonjsonp

Ways to create a scrollable div with the help of Javascript

I am currently developing a web app on the Tizen platform. Within my HTML5 code, I have a div element with an image set as its background. In certain scenarios, I need to display random text within this div multiple times. The text can vary in size and ma ...

javascripthtmltizentizen-web-app

A guide on extracting data from various HTML elements effectively with JavaScript

I'm searching for a universal technique to extract values from multiple HTML elements. For instance: <div>Experiment</div> <select><option>Experiment</option></select> <input value="Experiment" /> These thr ...

javascriptjqueryhtml

Tips on setting up AJAX/JSON with the Jackson library in Spring?

I previously inquired about how to refresh a specific section of a JSP page using Spring MVC on this platform. I attempted to send a value via AJAX to my Controller, but encountered difficulties. However, I managed to overcome it without utilizing JSON. ...

javajqueryjsonajaxspring

Conditionally Add Columns to jQuery Datatables

I am working with a jQuery datatable to showcase data retrieved through an AJAX request. However, I am interested in adding a third column to the table specifically for administrators, allowing them to delete entries. Can someone guide me on how to incorpo ...

javascriptjqueryajaxdatatablesconditional-statements

Problem encountered when attempting to insert a new division into an existing flexbox container

I'm in the process of designing a basic login page using HTML/CSS. To center the box on the screen, I opted for a flexbox layout. So far, I have successfully positioned the Username/password fields and login button just the way I want them. The only t ...

htmlcssflexbox

Troubleshooting Issues with jQuery Accordion Buttons

I have a nearly complete accordion that just needs some adjustments. HTML CODE: <footer> <div> <h1>Hide</h1> <h1>Hide</h1> <h1>Hide</h1> <h1>Hide</h1> ...

javascriptjqueryhtmlcss

Creating a Python script to generate a colorful surf graph

The following code generates the image below. https://i.stack.imgur.com/flwud.png This output can be obtained by using the code snippet provided: #%% try: from IPython import get_ipython get_ipython().magic('clear') # to ...

pythonimagematplotlibplot

Learn how to easily incorporate a drop-down list into the material-UI Search component within the navbar to enhance the search results

I integrated a Material UI search bar into my React app's navbar following the instructions from the official documentation on MUI. However, the article does not provide any guidance on how to add a dropdown list when selecting the search input field. ...

javascriptcssreactjsmaterial-ui

Organizing seating arrangements for a concert hall performance

My goal is to develop a custom concert seat booking system using HTML, CSS, and JavaScript. For example, if the concert venue has 10 rows with 20 seats in each row, I could organize them like this: const rows = [ { name: 'A', seats: [1, 2, 3, ...

javascriptmongodbdata-structuresdatabase

Adjust the image's height to adapt to the size of the browser

I'm having trouble resizing the images to match the height of the browser window. My goal is to limit the images' height to a maximum of 1100px and have them scale down based on the height of the browser. I've experimented with setting the ...

htmlcss

PHP: the images uploaded are not located within the designated folder

Having trouble uploading multiple images to a folder and saving them in the database? The images are not moving to the folder, even though the code works on localhost. Here is the code snippet: var abc = 0; // Declaring and defining global incremen ...

javascriptphphtmlcss

Leveraging Emotion API in Video Content (JavaScript or Ruby)

Currently, I'm in the process of uploading a video to the Emotion API for videos, but unfortunately, I have not received any response yet. I managed to successfully upload it using the Microsoft online console. However, my attempts to integrate it in ...

javascriptrubyajaxapiemotion

Guide to dynamically load external JavaScript script in Angular 2 during runtime

Currently, I am integrating Twitter digits for authentication purposes. To implement this feature, a small .js script needs to be downloaded and initialized. The recommended approach is to directly fetch the file from the Twitter server. In order to succe ...

javascriptangularwebpacktwitter-fabrictwitter-digits

Exploring the font variables in the asset pipeline of Rails 7

Creating a habit of defining a set of root variables is crucial for maintaining consistency throughout an application. :root { --main-font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; --kbd-font-family: Consolas, "Libe ...

cssruby-on-railsasset-pipeline

Illuminated container with shading

I'm struggling to style a box with a unique glow effect and shadow at the bottom. I've hit a roadblock in creating this particular effect. The glow effect I am aiming for is shown here: https://i.stack.imgur.com/i2va8.png My attempts to create ...

cssborderglow

Issues arise when using res.send() with ExpressJS and Mongoose

Initially, I have multiple callbacks that need to be executed before sending a res.send() to construct a JSON API: app.get('/api', function (req, res){ ... function logPagesId() { console.log("load: " +pagesId); c ...

javascriptnode.jsmongodbexpress

Using Jquery and AJAX to insert a PHP file into a DIV container

I am facing a challenge where I need to dynamically load a PHP file into a DIV element upon clicking a button, all without the page having to reload. If you refer to the 'Jsfiddle' document linked below, you will find further details and explana ...

phpjqueryhtmlajax

Encountering Error with NodeJS Typescript: Issue with loading ES Module when running sls offline command

I have come up with a unique solution using NodeJS, Typescript, and Serverless framework to build AWS Lambdas. To debug it locally in VS Code, I use the serverless-offline library/plugin. You can find my project on GitHub here However, when I run the comm ...

javascriptnode.jstypescriptecmascript-6serverless-framework

Steps to Utilize Google Apps Script from a Website

I've been on a mission to find the solution to my problem. I have a basic web page with HTML/CSS/JS. What I want is for users to visit the page and immediately have it call up a Google script I created, which will pull information from a spreadsheet a ...

javascriptajaxgoogle-apps-script