Make your image change when hovered

Hello! Today's tutorial is on how to make an image change (to a different image) when it's hovered over (requested by Boy11). For example:

If you hover over the image above, the images will change.

Here's how to do it!

First of all, make two images. One is the "default" image (for when your mouse isnt hovering it) and the second one is the hovered image.

Upload both of your image to an image editing site!

Now, copy this code below and paste it into a text editing document:

<object><a href="Website Link Goes Here"><img alt="Website Name" border="0" onmouseout="this.src='IMAGE LINK ONE'" onmouseover="this.src='IMAGE LINK TWO'" src="IMAGE LINK ONE" /></a></object>

Now, using the color key below, follow the instructions to make your image!

Website Link Goes Here - if you click on the button, it'll go here. If you don't want your button to link to anywhere, remove <a href="Website Link Goes Here"> and </a>
Website Name - This is the name of the website. If you hover over the image, this is a tiny "hint" that appears.
IMAGE LINK ONE (both times) - This is the link to the first image you created (the default one)
IMAGE LINK TWO - This is the link to the second image you created (the hover one)

That's it!

Oh and if your computer is acting weird and it copies the whole code (including the colors and bolded stuff) here's a normal version of the code:

<object><a href="Website Link"><img alt="Website Name" border="0" onmouseout="this.src='IMAGE LINK ONE'" onmouseover="this.src='IMAGE LINK TWO'" src="IMAGE LINK ONE" /></a></object>

Have fun!
Until next time,