Preview Image and text effect Posted by vuluganck | at Saturday, June 06, 2009

Hi every body, at the previous posts, I have introduce to you and show you how to make some kinds of image effect such as Auto Zoom, FancyZoom...Very cool, and now I will show you and guide you how to make 1 more effect for the images, it is very useful that you don't have to use zoom anyway.

That's called Preview Image and Text.The name is so simple that you will understand now.

As it name, the image will automatically open its default size when you hover on the resized image.

• Demo is below


• Download the file

• I'm a text Tooltip. Hover over me for an example.


• And me, I'm an Image Tooltip. Hover over me to see an image.


• 


• 

Let's start:
1.Log in your blogger account, view your source code and add this code before the ]]></b:skin>

#tooltip{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
color:#fff;
}

#tooltipList ul
{
margin:0px;
padding:0px;
}

#tooltipList li
{
display:block;
margin-bottom:20px;
}

2.Next download the file I gave you at top post.
You will see 1 js file name preview.zen.js, upload it to your favorite host to get the direct link, I will show you some hosts that you can upload:110mb.com , hotlinkfiles.com

After you upload it, add this before the </head> tag:

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='preview.zen.js' type='text/javascript'/>

Paste the direct link to the file preview.zen.js and paste instead of the red code.

3.The last step, when you publish a new post and want to use the Preview Test and Image, add this code :

<div id="tooltipList">
<ul>
<li><a class="tooltip" rel="Glimmer is great! Thanks MIX Online and Zenplate to bring this to you.">I'm a text Tooltip. Hover over me for an example.</a></li>
<li><a class="tooltipImage" rel="http://i651.photobucket.com/albums/uu240/zendersto/ico_045.png">And me, I'm an Image Tooltip. Hover over me to see an image.</a></li>
<li><a class="tooltip" rel="Get this tip on http://zenplate.blogspot.com"><img src="http://i651.photobucket.com/albums/uu240/zendersto/zenpreview.jpg" height="90" width="355"></img></a></li>
<li><a class="tooltipImage" rel="http://i651.photobucket.com/albums/uu240/zendersto/ico_046.png"><img src="http://i651.photobucket.com/albums/uu240/zendersto/previewzenplate1.jpg" height="90" width="355"></img></a></li>
</ul>
</div>

Or you can create a HTML/javascript to add this code,up to you.At this step,option it by your own info.
All done, Save all and join it.I hope this tip will be useful for you,if you like it please do me a back link for thanks.
And don't forget to subscribe,comment to me.
Zen


Requirements:Jquery
Website: http://visitmix.com/labs/glimmer/samples/tooltip.html
Author: MIX Online
Convert to Blogger: Zenplate