Modifying Image Source on Hover Using Jquery

Question

Modifying Image Source on Hover Using Jquery

Is it possible to change the source of an image on hover and then back to the original source? For example, the name of the file always remains the same, but the number changes - 1 for the original and 2 for the hover. Thank you for any advice.

Code:

<ul class="nav navbar-nav">
    <li><a href="#">Featured</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Meet ATS<b class="caret"></b></a>
            <ul class="dropdown-menu meet-ats-top">
            <li><a href="#"><img src="/images/google1.png"></a></li>
            <li><a href="#"><img src="/images/in1.png"></a></li>
            <li><a href="#"><img src="/images/youtube1.png"></a></li>
            <li><a href="#"><img src="/images/facebook1.png"></a></li>
            <li><a href="#"><img src="/images/twitter1.png"></a></li>
            </ul>
     </li>
</ul>

javascript jquery html css

Answer 1

Answer №1

Experiment

jQuery(function ($) {
    $('.meet-ats-top li').hover(function () {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace('1.png', '2.png')
        })
    }, function () {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace('2.png', '1.png')
        })
    })
})

Alternatively

jQuery(function ($) {
    $('.meet-ats-top li').hover(function (e) {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace(/(\d+)(?=\.)/, function (val) {
                return e.type == 'mouseenter' ? 2 : 1
            })
        })
    })
})

Answer 2

Experiment

jQuery(function ($) {
    $('.meet-ats-top li').hover(function () {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace('1.png', '2.png')
        })
    }, function () {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace('2.png', '1.png')
        })
    })
})

Alternatively

jQuery(function ($) {
    $('.meet-ats-top li').hover(function (e) {
        $(this).find('img').attr('src', function (i, src) {
            return src.replace(/(\d+)(?=\.)/, function (val) {
                return e.type == 'mouseenter' ? 2 : 1
            })
        })
    })
})

Answer 3

Answer №2

If you want to give it a shot, consider implementing this:

$(".dropdown-menu li a img").hover(function(){
   $(this).attr('src', $(this).attr('src').replace('1','2'));
}, function (){
   $(this).attr('src', $(this).attr('src').replace('2','1'));
})

Give it a try and see if it does the trick!

Answer 4

If you want to give it a shot, consider implementing this:

$(".dropdown-menu li a img").hover(function(){
   $(this).attr('src', $(this).attr('src').replace('1','2'));
}, function (){
   $(this).attr('src', $(this).attr('src').replace('2','1'));
})

Give it a try and see if it does the trick!

Answer 5

Answer №3

Check out the jQuery method called Hover:

http://api.jquery.com/hover/

Alternatively, you can achieve the same effect using CSS and the :hover pseudo-class

How to use the 'hover' pseudo-class in CSS

Answer 6

Check out the jQuery method called Hover:

http://api.jquery.com/hover/

Alternatively, you can achieve the same effect using CSS and the :hover pseudo-class

How to use the 'hover' pseudo-class in CSS

Answer 7

Answer №4

Creating this with CSS is the way to go.

Here's the HTML:

 <ul class="dropdown-menu meet-ats-top">
   <li><a href="#" class="google"></a></li>
        ...
 </ul>

Now for the CSS:

.google {
    background-image: url(/images/google.png);
    >>Remember to specify width and height based on the Image
}
.google:hover {
    background-image: url(/images/google1.png);
}

UPDATE:

Since an empty a-Tag has no dimensions, you need to include another div/span inside:

<li><a href="#" class="google">**<span></span>**</a></li>

And update the CSS like this:

.meet-ats-top a span { width: XYpx; height: XZpx; }

Answer 8

Creating this with CSS is the way to go.

Here's the HTML:

 <ul class="dropdown-menu meet-ats-top">
   <li><a href="#" class="google"></a></li>
        ...
 </ul>

Now for the CSS:

.google {
    background-image: url(/images/google.png);
    >>Remember to specify width and height based on the Image
}
.google:hover {
    background-image: url(/images/google1.png);
}

UPDATE:

Since an empty a-Tag has no dimensions, you need to include another div/span inside:

<li><a href="#" class="google">**<span></span>**</a></li>

And update the CSS like this:

.meet-ats-top a span { width: XYpx; height: XZpx; }

Answer 9

Answer №5

$('.dropdown-menu').on('mouseover', function(){
    var imageSrc = $(this).find('img').attr('src');
    var temp = imageSrc.split('.');
    var newSrc = imageSrc.substr(0, temp[0]-1);
    $(this).find('img').attr('src', newSrc + '2.' + temp[1]);
});

Fingers crossed that this solution does the trick!

Answer 10

$('.dropdown-menu').on('mouseover', function(){
    var imageSrc = $(this).find('img').attr('src');
    var temp = imageSrc.split('.');
    var newSrc = imageSrc.substr(0, temp[0]-1);
    $(this).find('img').attr('src', newSrc + '2.' + temp[1]);
});

Fingers crossed that this solution does the trick!

Answer 11

Answer №6

1. Optimal CSS Approach

Utilize CSS sprites by combining all social icons into a single file and positioning them using background-position. This method allows for all icons to be downloaded in one HTTP request.

2. Alternative CSS Technique for Images

Embed all images in the HTML and hide them using CSS:

<li>
     <a href="#">
        <img src="/images/google1.png">
        <img src="/images/google2.png">
     </a>
</li>

Apply the following CSS:

.dropdown-menu a img {
    display: none; // hides all images
}

.dropdown-menu a img:first-child {
    display: inline-block; // shows the first child image
}

.dropdown-menu a:hover img {
    display: inline-block; // shows all images on hover
}

.dropdown-menu a:hover img:first-child {
    display: none; // hides the first image on hover
}

Answer 12

1. Optimal CSS Approach

Utilize CSS sprites by combining all social icons into a single file and positioning them using background-position. This method allows for all icons to be downloaded in one HTTP request.

2. Alternative CSS Technique for Images

Embed all images in the HTML and hide them using CSS:

<li>
     <a href="#">
        <img src="/images/google1.png">
        <img src="/images/google2.png">
     </a>
</li>

Apply the following CSS:

.dropdown-menu a img {
    display: none; // hides all images
}

.dropdown-menu a img:first-child {
    display: inline-block; // shows the first child image
}

.dropdown-menu a:hover img {
    display: inline-block; // shows all images on hover
}

.dropdown-menu a:hover img:first-child {
    display: none; // hides the first image on hover
}

Answer 13

Answer №7

Implementing JavaScript:

<a href="INSERT TARGET URL"><img src="INSERT URL OF FIRST IMAGE" onmouseover="this.src='INSERT URL OF SECOND IMAGE'" onmouseout="this.src='INSERT URL OF FIRST IMAGE'" /></a>

Here is an example:

<ul class="nav navbar-nav">
<li><a href="#">Featured</a></li>
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Meet ATS<b class="caret"></b></a>
        <ul class="dropdown-menu meet-ats-top">
        <li><a href="#"><img src="/images/google1.png" onmouseover="this.src='/images/google2.png'" onmouseout="this.src='/images/google1.png'" ></a></li>
        <li><a href="#"><img src="/images/in1.png" onmouseover="this.src='/images/in2.png'" onmouseout="this.src='/images/in1.png'"  ></a></li>
        <li><a href="#"><img src="/images/youtube1.png" onmouseover="this.src='/images/youtube2.png'" onmouseout="this.src='/images/youtube1.png'"  ></a></li>
        <li><a href="#"><img src="/images/facebook1.png" onmouseover="this.src='/images/facebook2.png'" onmouseout="this.src='/images/facebook1.png'"  ></a></li>
        <li><a href="#"><img src="/images/twitter1.png" onmouseover="this.src='/images/twitter2.png'" onmouseout="this.src='/images/twitter1.png'" ></a></li>
        </ul>
 </li>

Answer 14

Implementing JavaScript:

<a href="INSERT TARGET URL"><img src="INSERT URL OF FIRST IMAGE" onmouseover="this.src='INSERT URL OF SECOND IMAGE'" onmouseout="this.src='INSERT URL OF FIRST IMAGE'" /></a>

Here is an example:

<ul class="nav navbar-nav">
<li><a href="#">Featured</a></li>
<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Meet ATS<b class="caret"></b></a>
        <ul class="dropdown-menu meet-ats-top">
        <li><a href="#"><img src="/images/google1.png" onmouseover="this.src='/images/google2.png'" onmouseout="this.src='/images/google1.png'" ></a></li>
        <li><a href="#"><img src="/images/in1.png" onmouseover="this.src='/images/in2.png'" onmouseout="this.src='/images/in1.png'"  ></a></li>
        <li><a href="#"><img src="/images/youtube1.png" onmouseover="this.src='/images/youtube2.png'" onmouseout="this.src='/images/youtube1.png'"  ></a></li>
        <li><a href="#"><img src="/images/facebook1.png" onmouseover="this.src='/images/facebook2.png'" onmouseout="this.src='/images/facebook1.png'"  ></a></li>
        <li><a href="#"><img src="/images/twitter1.png" onmouseover="this.src='/images/twitter2.png'" onmouseout="this.src='/images/twitter1.png'" ></a></li>
        </ul>
 </li>

Answer 15

Answer №8

Give this code snippet a try:

<div class="image-hover">
 <img src="images/design-1.png" />
</div>

$(function() {
  $(".image-hover").hover(function() {
  $(this).find('img').attr("src", "images/design-2.png");
    }, function() {
  $(this).find('img').attr("src", "images/design-1.png");
    });
  })

Answer 16

Give this code snippet a try:

<div class="image-hover">
 <img src="images/design-1.png" />
</div>

$(function() {
  $(".image-hover").hover(function() {
  $(this).find('img').attr("src", "images/design-2.png");
    }, function() {
  $(this).find('img').attr("src", "images/design-1.png");
    });
  })

Modifying Image Source on Hover Using Jquery

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Similar questions

What's the best way to mount a file on a field?

Scouring the web with Cheerio to extract various information from Twitter

What is the best way to implement a calendar view for selecting time periods on an HTML page?

The hidden visibility feature only activates when the mouse is in motion

Trouble with launching Semantic UI modal

Using assert.rejects() in Mocha and Node: A Complete Guide

Tips for transforming a scroll element into the viewport using Angular 2+

Combining React-Redux and Bootstrap: A sophisticated modal feature

Trigger a fixed bottom bar animation upon hover

Creating a custom useStorage hook to easily save a Set data type in local storage

Tips for maintaining a fixed height for a div while its content is being updated

How can one decrease the size of a React project?

How to upload a file in ReactJS with the help of jQuery

Mastering Vuex: effectively managing intricate data structures and dynamic state transformations

Is it possible for a chrome extension to allow only specific third-party cookies and storage to be

Exploring ways to display a JavaScript object on click from a .json file

Looking to verify the existence of a div using jQuery once other jQuery functions have executed and created HTML?

Issue: unhandled exception: Marketplace URI is not valid

I am experiencing issues with the loading of CSS and JavaScript files in my recently created Laravel project

Troubleshooting regex validation issues in a JSFiddle form