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
48 responses to “JavaScript – Changing images on hover”
thank you so much!!!!!
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.
Having a problem. Mine refuses to transition back even though I did it exactly the way you did. No idea why
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?
Ty so mush!!!!
Thanks a lot bro
this is work for me
What if the images have different width and height?
congratutions man! thanks for the help
how do u add img id
Thanks for the help!
Is it possible to use this except set it up so you can get an opacity effect of image 2 over image 1.
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.
It took days to figure out how to do this, and finally found the video for it, Thank You!
Thanks, fam!
GENIUS!
Thanks man, clear and concise.
It works perfectly untill i move on to something else, when i come back the JS disappears? Please help?
I am so glad I found this tutorial, I spent close to an hour and a half trying to find a solution. This worked perfectly. Thank you.
Worked perfectly, and I also was having trouble figuring it out while I was creating a page for a class. Thank you.
Taking a course. Couldn't figure this out for the life of me. Thanks for the help.
can you make the second image a link to another page?
chemikai jigari xar
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 ?
Is there a place to find this code?
It has nothing to do with javascript lol
THANKS !!!!! CHEERS MATE!!!!
Thanks bro..
superb!! mind blowing simple trick,Thanks
superb!! mind blowing simple trick,Thanks
Lovely simple tutorial, mate. Cheers! 🙂
Merci ! 😀
aamazing! pls show this in css only.
THANK YOU, every other video makes it so difficult
Thank , it work !
Fucking boss!
this script won't work. you need to call external functions.
gracias!!!!!!
Sufrí mucho para encontrar una solución.
Nice tutorial. Just what i was needing right now. Thank you.
I didnt know this was regarded as javascript… I hoped this video was with external javscript because then I can use mp4s
thanks!
i knew a little about Javascript but now i'm gonna use it and i gotta bone up my skills! thanks a lot for this tutorial!! 🙂
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.
thank you nice tut ! please is there any way to delay effet on hover ?
Here's the copy-paste version:
<img src="1" onmouseover="this.src='2'" onmouseout="this.src='1'">
i have the same code but for some reason it doesn't work
for some reason when I run over the image and it changes, it moves to a different place does anyone know what could be wrong with it
Thanks!!!!!
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