Modify the displayed image when hovering using inline coding techniques

Question

Modify the displayed image when hovering using inline coding techniques

I am having trouble changing an image on hover. I have attempted various methods without success. However, I need to stick with something similar to this code. Please let me know if there are any issues with this code. Thank you 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>

jquery html css

Answer 1

Answer №1

Before proceeding, make sure to verify that jQuery is included and inspect the console for any errors. Additionally, it seems like you may be overcomplicating your code when a simpler solution exists. You can simply 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>

Things to Check:

Check the browser console for errors.
Confirm if jQuery has been properly loaded.
Verify that the image path is accurate.

Answer 2

Before proceeding, make sure to verify that jQuery is included and inspect the console for any errors. Additionally, it seems like you may be overcomplicating your code when a simpler solution exists. You can simply 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>

Things to Check:

Check the browser console for errors.
Confirm if jQuery has been properly loaded.
Verify that the image path is accurate.

Answer 3

Answer №2

If you're looking to add a hover effect to an image, there's a couple of ways you can achieve this. One option is using jquery, but for a simpler solution, you can stick with CSS. All you need is the :hover selector to change the background-image property upon hovering over the image. Check out this example. Here's the code snippet:

<!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>

Answer 4

If you're looking to add a hover effect to an image, there's a couple of ways you can achieve this. One option is using jquery, but for a simpler solution, you can stick with CSS. All you need is the :hover selector to change the background-image property upon hovering over the image. Check out this example. Here's the code snippet:

<!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>

Answer 5

Answer №3

If you are looking to dynamically alter image on hover, one efficient way is by utilizing CSS.

Alternatively, if you prefer to achieve this at runtime, you can refer to the methods outlined in the following post: Changing CSS properties on hover using JavaScript

Answer 6

If you are looking to dynamically alter image on hover, one efficient way is by utilizing CSS.

Alternatively, if you prefer to achieve this at runtime, you can refer to the methods outlined in the following post: Changing CSS properties on hover using JavaScript

Answer 7

Answer №4

Give this a try, it should do the trick.

Here's how you can create a hover effect using jQuery:

function addHoverEffect(element) {
    element.setAttribute('src', 'http://placeholderimage.com/100x100/ff00ff/fff');
}
function removeHoverEffect(element) {
    element.setAttribute('src', 'http://placeholderimage.com/100x100/000/fff');
}

Don't forget to include the following in your HTML:

<img src="my-src" onmouseover="addHoverEffect(this);" onmouseout="removeHoverEffect(this);" />

Answer 8

Give this a try, it should do the trick.

Here's how you can create a hover effect using jQuery:

function addHoverEffect(element) {
    element.setAttribute('src', 'http://placeholderimage.com/100x100/ff00ff/fff');
}
function removeHoverEffect(element) {
    element.setAttribute('src', 'http://placeholderimage.com/100x100/000/fff');
}

Don't forget to include the following in your HTML:

<img src="my-src" onmouseover="addHoverEffect(this);" onmouseout="removeHoverEffect(this);" />

Modify the displayed image when hovering using inline coding techniques

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Learn how to display a "not found" message in a React.js application

What is the correct way to utilize Html.Raw(Json.Encode(Model))?

Automatically navigate to a different page using JavaScript after 5 seconds without interrupting the execution of other code

Resize the div blocks by scaling the button placed beneath them

Display Rails view using JavaScript when clicked

Looking to display several charts on a single page with varying datasets?

Guide on triggering a function with the Enter key in Angular 9

Which is better to use: sql==true or sql===true?

The icon for the weather on openweathermap is currently not displaying

"Implementing a Jquery event to handle the closing of a select

Differences Between Vuetify Breakpoints and CSS Helper Classes

What steps should I take to ensure the height of this navigation bar is correct?

Issue with static resource fetching when referencing a .js file within an HTML document while using Flask

Why does the control skip the onreadystatechange function for the ajax object?

Conflicting configurations in VS Code causing issues

The jQuery AJAX post request is displaying an error message stating that the website xxx is not permitted by

The Json request is invalid because it contains the @ symbol

Should I implement this practice when developing an AJAX website? Is it recommended to enable PHP code within .html files, or should I switch to using .php files instead?

Iterating through HTML table data using a JQuery for each loop

Tips for managing an event using the bxSlider callback API