2009/06/06

Preview Image and text effect

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.





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

7 comments:

All Movies And Trailers said...

Wow, these are some great effects that I could use. Very detailed information with a step-by-step guide on how to do it.

Keep up the good work.

Midfielder1234 said...

That effect is pretty cool, but does it also work on word press blogs? This guide is very detailed and easy to follow. Do you have any templates that you made and if you do can I see them?

Ritesh Sanap said...

I liked your post you gave every thing in so much detail that even an dummy in the world of tech can understand thanks.

vuluganck said...

@Midfielder1234
I don't have time to make my own template.But any way I will do it in july.If I make any template by my own style.That will be the perfect template for blogger.

Hi , My Name is Mia , said...

Youre such an angel Zen :)

I received your message - just busy completing a few things . I will e-mail you everything by tom evening . Thank you so much. Be blessed always , youre a diamond :)

Hugs xoxoxoxoxoxox
Mia 

Anonymous said...

Hi,
I was Wondering if the image have a link when click on..also is there a way the hovered picture change size?...if theres a way,can you give me the details?..THNX..

My Email is flip_chickz69@live.com
Thnx..

vuluganck said...

Yes you can make a link to the image.Just put that image in this form:
<a href="The code here"><b>The text here</b></a>

Then, if you want to resize the pic when hover on, dont have to do anything, just resize your image by any tool and put its link, it will smaller or bigger.That's all.

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.