Featured Blog: Sara Bozich
Blogging Best Practices: Optimize Your Posts for Search Engines

Add Images To Sidebar That Change On Mouseover

You can add a simple dynamic element to your blog's sidebar by adding an image which changes when you hover your mouse over it. The mouseover image is easy to do and can make a module in your sidebar standout.

First, you'll need to upload two separate images to your Typepad account. The images should be the same size. If you have a 200px wide sidebar, the maximum width of your images should be 170px to accommodate for the padding of the sidebar.

To upload the images, go to Library > File Manager, click Browse or Choose File, select the file from your computer, and click Upload. After uploading the images, copy the image URLs.

http://example.typepad.com/first-image.jpg

http://example.typepad.com/second-image.jpg

Now, you can add some HTML to make the image change when you hover your mouse over the image. Start with the below code and place URLs for the images in the appropriate places.

<img src="FIRST-IMAGE-URL" onmouseover="this.src='SECOND-IMAGE-URL'" onmouseout="this.src='FIRST-IMAGE-URL'" />

The updated code with image URLs is:

<img src="https://example.typepad.com/first-image.jpg" onmouseover="this.src='http://example.typepad.com/second-image.jpg'" onmouseout="this.src='http://example.typepad.com/first-image.jpg'" />

To add the images to the sidebar, you can use the Embed Your Own HTML module. Go to Design > Content, select the Embed Your Own HTML, click Add This Module. In the pop-box, paste in the image code and click OK. After rearranging the sidebar modules, click Save Changes to update your blog.

Hover your mouse over the Typepad logo below to see how it works!

Let us know in the comments or forum how you are using this tip!

comments powered by Disqus