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

[Ellen Gunty]

While this is a pretty cool addition, the image innovation I am really waiting for is the ability to have DIFFERENT images on the sidebar panels for different pages. This addition would make the platform much more user friendly as a website platform in addition to being an excellent blogging platform.

[PurposefulGirl]

Thanks much for this information...it was well-needed!

[Jen]

We do have a trick which allows you to display sidebar content only on a specific page. The code required is a bit involved for a comment reply, so I added a new article to the Knowledge Base which you can review here:
http://help.typepad.com/display-sidebar-module-on-set-page.html

If you want to use a different image for a different page, you would need to add a separate module for each page to the sidebar of your blog, and each module would include the entire script included in the article.

If you have any problems or questions about setting this up, please let us know by posting to the forum - https://getsatisfaction.com/typepad - or by opening a help ticket.