Expando Image is a simple script for folks who want to have an image expand onMouseover (to its actual size). Its make your tumbnail image, and have dynamically when the mouse roll over image. Its a simple instally to your blog. Give your "tumbnail image" with a CSS class "Expando".Your "tumbnail image" shoul have explicit width and height atribute that less than actual size.
See example Click Here
This step to make Expando image :
1. Download JavaScript of Expando Here or Mirror Here
2. Save Expando.js to your file hosting, example : geocities.com, googlepages, etc.
3. After Upload please enter to your blog > layout > Edit HTML do not forget to check Expand Widget Templates
4. Copy the following code :
5. Change the text color red with an address file that has been in the media your Upload file storage comrade.
6. Enter the code Under
To change the Image you must follow this step :
<a href="http://yourblog1.blogspot.com" target="_blank"><img class="expando" border="0" alt="test" src="http://blablabla.com/run.jpg" width="80" height="20"></a>
2. Your Image code, Example :
<img class="expando" border="0" src="amster2.jpg" width="100" height="75">
http://yourblog1.blogspot.com << Change with your website
http://blablabla.com/run.jpg << Change with your image link
class="expando" << dont forget to always insert this to your code
width="100" height="75"> << Change with your "tumbnail image" size.
You can modified code with your creation but don forget to always insert class="expando"
Article Info : www.dynamicdrive.com
Expando Image
<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>
<head>
7. Save your template.Chose this code to your image widget.
1. Link Banner image Code, for example like this :
Subscribe to:
Post Comments (Atom)
mumet liat tulisannya, gaptek bangeet saya....
$miling......Pls back to me....
nice info friend, comment back ya..