5.Adding Expando Effect to your images

What is Expando effect?
Expando effect means when you put your mouse over an image or take your mouse out from the image the image enlarges.

Adding Expando Effect to image.
Step 1:-Download java script of expando from Here
Step2-Save your Expando.js to your www.pages.google.com or any other file hosting.
Step3:-Go to your dashboard-open the layout of the blog to which you want to add expando
effect-Edit HTML -Check Expand Widget Template then copy the following code before
</head>

<style type="text/css">
img.expando{ /*sample CSS for expando images. Not required but recommended*/
border: none;
vertical-align: top; /*top aligns image, so mouse has less of a change of moving out of image while image is expanding*/
}
</style>
<script type="text/javascript" src="http://www.yourhosting.com/your id/expando.js">
/* Expando Image Script ©2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
</script>

Note:-Before adding the above code you must replace the location of the expando.js file with
your expando.js hosted address.
EX:-src="http://www.yourhosting.com/your id/expando.js"
src="http://heroramesh.googlepages.com/expando.js

Step4:-Now go to new post-upload images ...by default the images shows the Html code like this,
Replace <img style with

<img class="expando" style
Step5:-Now change the image size to half
ex:- if img size iswidth: 120px; height: 100px; make it as width: 60px; height: 50px;

Step6:-Now publish your post. You can see your expando effect.

Demo-put your mouse over image

Technorati Tags: 5.Adding Expando Effect to your images, mouseover image script



Advanced way of Adding Expando effect or Image Enlarge-Auto Generation of Expando Effect

Follow all the as they are before the Step4, then you do manually replace Replace <img style with

<img class="expando" style where as you can upload any number of images at a time and change code with a single click with online notepad editor, after adding the class Expando,copy the links to ALT TAG GENERATOR source text, select the image size to be reduced to 50 or any number of percentage you want and click on Generate final results.

That's it, you have done it...copy the changed code to your blog post editor and publish them. Your images will show expando/Image enlarge effect.