Show Different Image On Mouseover Hover.

Checkout the image above. Hover your mouse over it! The image changes! This effect is brought about by a nifty piece of Javascript. It can be used to show two images which are events in a timeline. Like a small boy suddenly grown up to be an adult.


To bring about this effect copy the code below :

<script type="text/javascript">
//<![CDATA[

function pat_getByClass(c){
   ems=new Array();e=document.getElementsByTagName('*');pattern=new RegExp('(^|\\\\s)'+c+'(\\\\s|$)');
   for(i=0,j=0;i<e.length;i++)if(pattern.test(e[i].className)){ems[j]=e[i];j++;}
   return ems;
};

function ps_flipit(){
   var c = pat_getByClass('flipit');
   for(i=0;i<c.length;i++){
       c[i].firstChild.onmouseover=function(){
           this.style.display='none';
           this.parentNode.lastChild.style.display='';
       };
       c[i].lastChild.onmouseout=function(){
           this.style.display='none';
           this.parentNode.firstChild.style.display='';
       };
   }
}

ps_flipit();

//]]>
</script>

Paste the above code immediately before </body> tag in your blog template code box and save template. It is right at the bottom of the template. To get to your Template code box login at Blogger.com and click on Layouts link on Dashboard. Then click Edit Html subtab of Layouts tab.

UPLOADING THE IMAGES

Next click +New Post link on Dashboard to open the Post Editor. Upload two images to your post. Click on Edit Html tab in upper right corner of Post Editor.


Modify the images code by adding <div class="flipit"> before the code and </div> tag after it. Also the code should be modified until it resembles the code below :

<div class="flipit">

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://..../s1600-h/......jpg">

<img style="cursor:pointer; cursor:hand;" src="...../s320/.....jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXXX" /></a>


<a style="display:none" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="...../s1600-h/....jpg">

<img style="cursor:pointer; cursor:hand;" src="......../s320/........jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXXX" />

</a></div>

DO NOT COPY-PASTE THE ABOVE CODE. You have to modify your code till it resembles the above code without including the dots "...../s1600-h/...jpg" and the XXXXXXXs.

Also REMOVE ALL LINE BREAKS IN CODE ABOVE.


Publish Post and Enjoy!