Saturday 15 September 2012

How To Use The Mouse Over Image In Blogger

08:11  ,  No comments

In this Tutorial i teach you how to use the mouse over image in your blogger. It is a very simple coding in Java Script.This is a great JavaScript trick to beautify your blog post.You can also change the Image according to your blog post combination.You can also change the position of the Image .

 Steps To Follow::

Step1: First login into your blogger account. Go to Layout >> Add a Gadget.

 Step2: Fill The Title Name.

 Step3: Add the below code.
<!doctype html>
<script type="text/javascript">
function moveover()
{
document.getElementById('image').src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQJ83Ml0UhePhEgp37s6UO7wDy5QcRdxjwGs_g0IrJbQJr1q9m4l_XwOKnEUPRxKtdIzun3jAs32iD3U9lzDsMvLwhk0jVTMMmcn7SSCPwzcNpKvqzi0obgGw37o0fqleTB6umUeafYas/s1600/bulbon.gif";
}
function moveback()
{
document.getElementById('image').src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEagyCo9xyvck2lRWSYmuTEmbirkU3Uki1_6_pTysZ_W-gPE-9F8dAcsIfZSJ0vuozJ_DIoOieQ-jSrNbwo1dSALqS8CdXI8ZrM5vcwyZtM-nRu2h8mJsF1ROtZgw36sjc50A-uvLc0Vw/s1600/bulboff.gif";
}
</script>
<br />
<img id="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEagyCo9xyvck2lRWSYmuTEmbirkU3Uki1_6_pTysZ_W-gPE-9F8dAcsIfZSJ0vuozJ_DIoOieQ-jSrNbwo1dSALqS8CdXI8ZrM5vcwyZtM-nRu2h8mJsF1ROtZgw36sjc50A-uvLc0Vw/s1600/bulboff.gif"
onmouseover="moveover()"
onmouseout="moveback()" width="100" height="180" />
</!doctype>


 Step4: Now Save Template.

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)