Add Images To Sidebar That Change On Mouseover
July 25, 2012
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.
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!
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.
Posted by: Ellen Gunty | July 26, 2012 at 07:09 AM
Thanks much for this information...it was well-needed!
Posted by: PurposefulGirl | July 26, 2012 at 06:23 PM
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:
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.
Posted by: Jen | July 27, 2012 at 12:48 PM