Issue with changing image source on hover using JQuery not functioning as expected

I've been attempting to modify the image src when hovering using JQuery. I'm currently working in Brackets, and when I preview it live in Chrome, everything seems fine. However, when I try to open the file directly in Chrome or IE, it doesn't function correctly.

Here is my code:

$("#logo img").hover(
    function(){
              $("#logo img").attr("src","/images/img1.gif");
 }, function() {
              $("#logo img").attr("src","/images/img2.gif");
});

Edit: This is the HTML code:

<div id="logo">
    <img id="logo-img" src="images/img1.gif" alt="logo">
</div>

The img tag has an id "logo-img", but even targeting this id directly hasn't solved the issue:

$("#logo-img").hover(
    function(){
              $("#logo-img").attr("src","/images/img1.gif");
 }, function() {
              $("#logo-img").attr("src","/images/img2.gif");
});

Your assistance would be greatly appreciated.

jqueryhtmlcss

Answer №1

If you're encountering issues, give this a shot:

$("#myImage").hover(function(){
  $(this).attr("src", "https://static.pexels.com/photos/54630/japanese-cherry-trees-flowers-spring-japanese-flowering-cherry-54630.jpeg");
}, function(){
  $(this).attr("src", "https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="myImage" src="https://static.pexels.com/photos/207962/pexels-photo-207962.jpeg">

Give it a try and see how it goes. The issue may lie with your image ID. Utilize $(this) for a smoother process.

Answer №2

When it comes to styling images with CSS, you can use the following snippet of code:

img:hover {
  background: url("https://i2.wp.com/www.froutlet.com/store/i/user_icon.png?ssl=1");
  /* padding: [image-height] [image-width] 0 0 */
  padding: 200px 200px 0 0;
  width: 0;
  height: 0;
}
<img src="https://www.vacul.org/extension/site/design/site//images/anonymous-user.png" />

If you prefer to use JavaScript for image manipulation, you can achieve a similar effect like this:

$("#imghover").hover(function(){
  $(this).attr("src", "https://www.vacul.org/extension/site/design/site//images/anonymous-user.png");
}, function(){
  $(this).attr("src", "https://i2.wp.com/www.froutlet.com/store/i/user_icon.png?ssl=1");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id="imghover" src="https://i2.wp.com/www.froutlet.com/store/i/user_icon.png?ssl=1">

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

Storing persistent JSON data in a mobile app built with HTML5 involves utilizing the local storage capabilities of the

I am currently working on a mobile app using PhoneGap that is based on HTML technology. When the app is opened for the first time, my goal is to have it download a zip file that includes a JSON file and media files such as images or audio. Once the zip f ...

javascriptandroidjsonhtmlcordova

PHP/flot for monitoring bandwidth in real-time

Check out this awesome real-time bandwidth monitor: I attempted to customize the code to display both download and upload speeds as two series. The modifications I made were in the last few lines of the data.php file: echo '[ { label: "download ...

phpjqueryajaxflot

Using the linear-gradient method in CSS for border images

I managed to successfully create a design using the CSS properties border-image and linear-gradient. However, I am struggling to understand the syntax involved. While I grasp the concept that the series of colors defines the gradient transition, as well as ...

htmlcss

Error message indicating that the jQuery script has not been properly defined in a Wordpress environment

Seeking assistance with a JavaScript issue on my WordPress site. I have added an external JS file but it's not functioning properly and throwing errors in the code below. Any help to resolve this would be greatly appreciated. var clock; jquery(docu ...

phpjquerywordpress

Formulate a multi-line string using a collection in React's JavaScript framework

I'm working on a React function that involves a set and I need to update an HTML element using the data from this set. Below is an example of my code: const updateElement = (mySet) => { document.getElementById('myId').innerHTML = Arra ...

javascripthtmlreactjstypescript

PHP Script unable to locate results

For some reason, the script I have written is not functioning properly. Upon reviewing the code from walmart.com, I verified that name="query" is accurate. However, I am uncertain about the contents within <script></script> <html> < ...

htmlsearch

Basic progress bar

I'm attempting to create a basic download bar, but it's only displaying as a solid color without any transition animation. Furthermore, the "repeating-linear-gradient" feature isn't functioning and I'm struggling to figure out why. I&a ...

csshtml

Trouble with Ajax call after transitioning from getJSON to Amcharts

Here is the method for making an AJAX call in a JavaScript file to create a bar graph using Amcharts. The script is located in the bar.js file: plot_graph(); function plot_graph(){ $.ajax({ url:back+"/cool?day=30", type: "GET", dataformat ...

javascriptjqueryajaxamcharts

Incorporate concealed image into HTML

When I perform actions with a couple of images, I encounter delays because the browser needs to load the images. For example, if I use $('body').append(''); everything works smoothly without any delays. However, when I try using style= ...

javascriptjqueryhtmlcsscaching

Changing text color with JQuery animation

Is there a way to animate text color using jQuery/jQuery UI? I want the text color to change from #000 to #F00 when an event is triggered, then fade back to #000 over 3 seconds. I attempted using effect("highlight", {}, 3000) with the highlight effect, bu ...

jquerycssjquery-ui

Show one line of text at a time with a pause in between each one

On my HTML page, I am looking to showcase text lines in succession with a delay. The unique condition is that when the second line appears, the color of the first line should change. Then, as the third line emerges, the color of the second line should also ...

jqueryhtmlcssjquery-plugins

Using PHP to create an HTML table that can have variable rows and columns, with the data in each row depending on

My latest project involves an assessment system that evaluates each student's performance in every lesson. I have a form set up to generate a table with the following headers: Student name Student ID Lesson title Lesson ID Lesson grade In order to ...

phphtmlmysql

Showing fetched data from Firebase in an Ionic 3 HTML file

Looking for assistance on how to display data retrieved from my firebase database in my HTML file. I need help with organizing the data, starting with displaying customer user's data. Eventually, I want to make it clickable and put the user's dat ...

htmlangularfirebaseionic-frameworkfirebase-realtime-database

The dropdown in the HTML tbody section is displayed above the thead

I'm experiencing an issue where my tbody element is appearing above the thead section in my table. I've been unable to identify the cause of this problem. <table id="myTable" class="table table-inverse table-hover"> <thead id = "h ...

phphtml

Choose a sibling element using CSS styling

As I'm developing an AngularJS component, I am on the quest to identify ANY sibling of a particular tag, irrespective of whether they are div, span, or p. I'm hoping for a CSS-native solution that resembles something along the lines of div:siblin ...

htmlcssangularjscss-selectors

There seems to be an issue with the hidden field value not being properly set within the

I created a function called getConvertionValue. Inside this function, I make an ajax call to the getCurrencyConvertion function in the controller. function getConvertionValue(from, to) { if (from != to) { $.ajax({ url: base_url + 'admin/o ...

javascriptphpjqueryajaxcodeigniter

Wordpress Custom Post Type with a Sleek Slider Plugin

I am currently using a static slick slider to display testimonials on my website. Instead of hardcoding the testimonials, I want to fetch them from a WordPress custom post type that I have created. Can someone guide me in the right direction: <section ...

phphtmlwordpress

Guide to decoding JSONP data sent from a remote server

Working on retrieving data using JSONP. After observing the returned data in Firebug, I can confirm that it is being returned correctly. However, I am facing a challenge in figuring out how to parse it. Is the data returning as a nested array? The callback ...

javascriptjqueryajaxjsonjsonp

Having trouble displaying values from nested JSON in a datatable

Response from server : ["{\"CLIENT\":[{\"tranche\":\"1-4\",\"prix\":\"65.96\",\"currency\":\"E\"}],\"DISTRIBUTEUR\":[{\"tranche\":\"1-4\",\"prix\ ...

javascriptjqueryangularjsjson

Designing a spacious and visually appealing interface with the Material UI Grid system, while

I created a personalized library using Material UI. The JSX code I am using is displayed below; <MyLayout container spacing={2}> <MyLayout item xs={9}> <MyComp1 /> </MyLayout> <MyLayout ite ...

cssreactjsmaterial-ui