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

Implementing a Responsive Form on an Image Using Bootstrap

I am facing a challenge where I need to position a form on top of a Responsive Image. My goal is to ensure that the form is responsive as well and adjusts its size according to the image. As of now, the image is responsive but I am struggling to make the ...

htmlcssformstwitter-bootstrap

The double click functionality does not seem to be functioning within the Backbone View

I am trying to detect double click event within a Backbone view var HomePage = Backbone.View.extend({ initialize: function(){ this.render(); }, render: function(){ var template = _.template($('#app1').html()); ...

javascriptjquerybackbone.js

Combine the object with TypeScript

Within my Angular application, the data is structured as follows: forEachArrayOne = [ { id: 1, name: "userOne" }, { id: 2, name: "userTwo" }, { id: 3, name: "userThree" } ] forEachArrayTwo = [ { id: 1, name: "userFour" }, { id: ...

javascriptangulartypescriptobjectmerge

AngularJS is throwing an error stating that the URL ID is undefined

I am developing an application that utilizes angularjs with codeigniter as the backend. Within my URL, I have http://localhost/submit/1234, with 1234 serving as the ID. Within my angularjs setup: var singlepost = angular.module('singlepost', [ ...

javascriptphpangularjscodeigniter

Ways to have Express display a randomly selected question from my personal JSON file

I have set up a personal server to enhance my backend coding skills. Currently, it is in its initial phase. I have developed a basic express application where I can import and display a JSON file. However, I am facing a challenge with automatically loading ...

javascriptnode.jsjsonexpress

Learn the process of utilizing AJAX to upload files in CodeIgniter

I have reviewed several solutions How to upload files using ajax in codeigniter File uploads in codeigniter through ajax but none seem to work with my specific code. I am trying to implement a feature where users can upload various types of files (such ...

phpjqueryajaxcodeigniter

How to correctly position a modal in a React application using CSS

Currently, I am working on integrating the react-modal NPM library into a React Typescript project. The issue I am facing is that the modal occupies the entire width of the screen by default, with padding included. My goal is to have it display as a small ...

cssreactjs

Using jQuery datepicker with C#/.NET for asynchronous database queries

In the C#, ASP.NET framework, I am currently exploring some new concepts. My goal is to accomplish the following tasks: Transfer data from a jQuery Datepicker textbox to the controller Analyze the date and execute a database query based on the selected r ...

c#jqueryasp.netajaxjson

Can you please explain the meaning of this wildcard symbol?

We recently came across a part of our grunt file that was written by a former colleague. While the code functions correctly, the specific purpose of one segment remains a mystery to us! Here is the enigmatic code snippet: dist: { files: [{ ex ...

cssjsongruntjswildcard

Ways to fix the error message 'yarn package has unresolved peer dependency'

Whenever I run yarn upgrade or install, a bunch of warnings pop up due to unmet peerDependencies. warning " > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4322332c2f2f2c6e2f2a2d286e2b37373303726d766d7a">[email pro ...

javascriptnode.jsnpmyarnpkg

The functionality of a Cordova application using Framework 7 CSS can vary across different Android devices

A link is shared for reference showcasing how the progress bar appears on Samsung j2 and other Android devices. Here is the link: [https://i.sstatic.net/C9OpS.jpg](https://i.sstatic.net/C9OpS.jpg) On my personal device, the progress bar is displayed at th ...

androidcsscordovahtml-framework-7

What is the best way to pass and save information across different routes in Express using Node.js?

Let's delve into the specific functionalities I envision for my server. Essentially, my project involves user registration and login processes. The URLs for these routes are as follows - localhost:3000/login and localhost:3000/register Upon successf ...

javascriptnode.jsexpressauthenticationroutes

Do you mean using a JSON object as a value?

When creating a JSON object where the value itself is an object, what is the correct way to write it? var data ='{"phone":{"gtd": "080"}}'; OR var data ='{"phone":"{gtd: 080}"}'; This question may seem straightforward. I am curious ...

javascriptjqueryhtmljsonajax

Tips for optimizing search functionality in Angular to prevent loading all data at once

An exploration for information within vast datasets is triggered by AngularJS when the input contains more than 3 characters. var app = angular.module('test_table', []); app.controller('main_control',function($scope, $http){ $scope ...

javascripthtmlangularjs

What benefits can be gained from utilizing the beforeEach function within Jest testing?

I am currently immersing myself in the world of Jest by following this informative guide. Can you explain the benefits of utilizing the beforeEach function in Jest? I have a particular interest in identifying action dispatches. I believe that two segments ...

javascriptvue.jsjestjs

Removing or hiding elements using jQuery

My HTML code includes a select tag, and when the value changes, I want to retrieve data from the database based on this new value. The data is then displayed in a new div. This new div contains a close sign that should hide the div when clicked by the user ...

jqueryhtml

Having trouble accessing a fully loaded Wordpress remotely through Wamp

After installing WAMP Developer Pro on my Windows 7 computer, a testing website was set up locally. Now, I am trying to test it on the LAN, but when accessing the page, only text appears without any images, themes, or styling. Apache is running on port 80 ...

phpcsswordpresswamp

The Click Event Is Triggering Even with Correct Callbacks Being Set

I am struggling to understand why these functions are not executing properly. I know the correct syntax for binding a function, like this: $('#idOfThing').bind('click', foofunc); function foofunc() { ///do things } However, I am facin ...

javascriptjqueryjquery-callback

Have the getter functions for reactive objects in Vue 3 been transformed into computed values?

Is the memoization of bookCount in this instance handled equivalently to a computed reference? const author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - ...

javascriptvue.jsvuejs3

Tips to retrieve an Angular `value` from outside the module

customConfig.js angular.module("steam") .value("customConfig", { baseurl: "http://dev-back1.techgrind.asia/" }); To access the value outside the module, replace the " .." with customConfig.baseurl apiTest.js var frisby = require("frisby"); fris ...

javascriptangularjs