Mouseover image code generator
- Enter the image URL for the base image you want displayed
- Enter the URL for the image you want it to change to on mouseover
- Enter the URL that you want the image to link to (including https:// if you want to see a preview)
- If you don't want the image linked, leave the link url out
- Code is included to pre-load images to reduce loading time when mousing over
Pass your mouse
over this image
This image is linked
click to open in new window
Set the border radius to 50% to achieve this look
Frequently asked questions
Why does the code "preload" both images?
Without preloading, the mouseover image only downloads the first time someone hovers, which causes a visible flicker or blank flash while it loads. Loading both images upfront (before the hover happens) means the swap is instant.
Should I choose JavaScript or jQuery?
Pick jQuery if your page already loads jQuery (most WordPress and many CMS themes do) - it keeps the swap logic in one clean external block. Pick plain JavaScript if you don't want to depend on jQuery being loaded at all, or if you're placing this on a lightweight static page.
Do the two images need to be the same size?
Not strictly, but they should be - if the mouseover image is a different size, the layout will jump or the image will stretch to fit the <img> tag's set width/height. Keep both images the same dimensions for a smooth effect.
Can I link the image somewhere when it's clicked?
Yes - fill in the "URL for link" field and choose whether it opens in the same or a new window/tab. Leave it blank if you just want the hover effect with no click action.