D4mations.com

JavaScript – Changing images on hover



In this tutorial I’ll be going over a very simple but powerful JAVASCRIPT feature which doesn’t require any external JAVASCRIPT files.

I’ll be teaching how to create images that will change when you hover your mouse over them.

I hope this tutorial helped you, please like and comment with your feedback, if you want to see more videos from me make sure to subscribe – thanks for watching!

Original source

d4mer

, , , , , , , , , , , , , , , , , , , , , ,

48 responses to “JavaScript – Changing images on hover”

  2. Hey there,
    Can you use this js to make an image change multiple times based on the individual hotspots on the image?
    I want to use this to make an interactive map, that highlights each section when they're hovered over.
    Please let me know if I could do it this way.

  4. How to do this on Square-space? I've been converting java to HTML, maybe in all the wrong places on the site I've creating and it does nothing. What I am looking to do is have the hover-over start my java to show data that changes each time a person hovers over it o rat least once once they come to the page and their visit is cached so they get that same data within a time span. The way this was done was less of a headache than what I was attempting. Would it be easier for me to use a dynamic web-page and .ASP?

  12. If you wanted to just change colors of the image to fade or black & white as in the tutorial, you could just use the filter css property with the greyscale or opacity instead of having two images in your folders and that's an additional load that you don't need.

  23. I'm very knew to JavaScript…how do you replace an image with another image and then another image and another (4x) do you do it like this video or something completely different ?

  42. Very clear and concise tutorial.

    The issues involved with this method are: 1) potential for flicker (depends on image size and other server variables) – image will be requested from the server when you hover the element. The reason the image swap is so quick in the video tutorial is that the OP is viewing and requesting the image files from the same machine, the request stays on the machine and does not have to travel across a content or similar. 2) Poor separation of concerns – you're mixing HTML and JS.

    Although already stated in comments, CSS :hover is the way to go using an image sprite. Yes this is a simple proof of concept video but I feel people should also be informed of the proper and more correct alternatives when demonstrating non standard/preferred methods.

  48. i think ist better that you give a element a background image and you say in your css for example:

    img{
    background-image:url(example.png);
    }
    img:hover{
    background-image:url(example2.png);
    }

    its more easy than javascript in my opinion

Leave a Reply