change image on hover with inline code

Question

I am trying to change image on hover. I have tried many ways but nothing is working. And i have to use something like this. Please if there is some problem with this code tell me. Thanks in Advance

Code

    <a href = "https://my-website.com/results/testimonials-global-supply-chain-group/">
    <img id = "home-button" alt = "" src = "https://my-website.com/wp-content/uploads/2017/11/businessman-2606509_1920_20171107090703313.jpg" 
     onmouseover="$(this).attr('src','https://my-website.com/wp-content/uploads/2017/10/testimonialpage.jpg');" 
     onmouseout="$(this).attr('src','https://my-website.com/wp-content/uploads/2017/10/businessman-2606509_1920_20171107090703313.jpg');">
    </a>

There's no excuse for using inline code; especially when delegated event handlers exist. — Rory McCrossan, Nov 08 '17 at 14:40
Open your browser's console and see what errors you're getting — j08691, Nov 08 '17 at 14:46

score 2 · Accepted Answer · answered Nov 08 '17 at 14:38

First thing that you need to do is to check if you have included jQuery and look at the console for errors. Also, you don't need to do much like how you have done in your code. You can just use this.src:

<a href="#">
  <img src="//placehold.it/100?text=Hello"
       onmouseover="this.src='//placehold.it/100?text=Over'"
       onmouseout="this.src='//placehold.it/100?text=Hello'"
       alt=""
  />
</a>

Checklist

Check the console.
Is jQuery loaded?
Is the image path correct?

liamhtml · Answer 2 · 2020-11-14T17:25:21.813

Uhh.. so you could use jquery. But you could also just use CSS which is probably much easier. You just use the :hover selector and change the background-image property on hover as shown here. Code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Alter an image on mouse hover</title>
        <style>
            .image {
                width: 130px;
                height: 195px;
                clip-path: border-box;
                background: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.drodd.com%2Fimages14%2Fred4.jpg&f=1&nofb=1) no-repeat;
            }
            .image:hover{
                background: url(https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.zAvnUSUdzPkfFVXmUxbBpQHaE6%26pid%3DApi&f=1) no-repeat;
            }
            body {
                font-family: sans-serif;
                text-align: center;
            }
 
        </style>
    </head>
    <body>
<div class="image" style="margin-left: auto; margin-right: auto;"></div>
    </body>
</html>

We'd prefer if you include your example as code in your answer. Links can go dead meaning the information will be lost and your answer might not be clear enough by itself. — Exelian, Nov 13 '20 at 22:15

clauub · Answer 3 · 2017-11-08T14:51:11.467

0

Try this, it should work.

Hover effect in jQuery :

function hover(element) {
    element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
    element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}

and HTML :

<img src="my-src" onmouseover="hover(this);" onmouseout="unhover(this);" />

edited Nov 08 '17 at 14:51

answered Nov 08 '17 at 14:46

clauub

1,134
9
19

score 0 · Answer 4 · answered Nov 08 '17 at 14:49

0

If you just want to change image on hover, you can use css to do it.

If you want to do it on runtime, can use method in this post. Change :hover CSS properties with JavaScript

answered Nov 08 '17 at 14:49

lining

11
2

We'd prefer if you include your example as code in your answer. Links can go dead meaning the information will be lost and your answer might not be clear enough by itself. – Exelian Nov 14 '20 at 18:03

change image on hover with inline code

4 Answers4

Linked