Monday, 22 April 2013

How to Shake an Image on Hover



This is a clever little piece of code which allows you to have an image shake on hover, just like the Milk"shake" above.
The first piece of code is to be placed as is, into the HTML code of your blog.
Before proceeding though, please take a quick look at my post regarding backing up your blog, HERE.
Copy the following code and go to:
Template → 
Edit HTML → 
Click in the content box and press Ctrl F → 
Type </head> into the pop-up "find" box → 
Hit Enter → 
Paste the first code below, above the </head> tag → 
Click "Save Template"
<script>
function shakeleft()
{
document.getElementById('shake').style.position="relative";
document.getElementById('shake').style.left="5px";
timer=setTimeout("shakeright()",10);
}

function shakeright()

{
document.getElementById('shake').style.left="0";
timer=setTimeout("shakeleft()",10);
}

function stoptimer()

{
clearTimeout(timer);
}
</script>


This next piece of code is your actual image, and is placed in either the HTML edit view of your blog post or as a new HTML/Java Gadget/Widget.

<center>
<a href="URL OF WEBSITE YOU WANT YOUR SHAKING IMAGE TO LINK TO HERE" title="TITLE OF LINK" target="_blank"><img id="shake" src="IMAGE URL"
onmouseover="shakeleft()"
onmouseout="stoptimer()" alt="NAME OF IMAGE" style="border: solid 0px #c7000cwidth="85"/></a>
</center>

Please visit my post HERE to learn how to adjust the red text above. Just don't delete/edit the green highlighted "shake", as the effect will not be called to work.
That's it! You now have a shaking image.
Thanks for tuning in and come back soon for more simple tips.

No comments :

Post a Comment

Facebook Twitter Google + RSS Feed Email Me