Link Previewer

JavaScriptSource Staff Oct 29, 2004

If you want to generate a preview image for a link, this script is for you. It will generate an image preview before the user clicks on that link. You can also generate description for the image.

Move you mouse over a link to generate a preview.

The JavaScript Source: Navigation: Link Previewer

Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as Note Pad or Simple Text) and save (Control-s or Command-s). The script is yours!!!

<!-- TWO STEPS TO INSTALL LINK PREVIEWER:

1.  Copy the coding into the HEAD of your HTML document
  2.  Add the last code into the BODY of your HTML document  -->

<HEAD>

<style type="text/css">
<!--

a.ln
{
	font-family: "Courier New", Courier, monospace;
	font-size: 11pt;
	color: Teal;
}

a.ln:hover
{
	font-family: "Courier New", Courier, monospace;
	font-size: 11pt;
	color: #32CD32;	
}

span.txt
{
	font-family: "Courier New", Courier, monospace;
	font-size: 10pt;
	color: Navy;
}

.box
{
	border: solid 1px #000000;
}

-->
</style>

/*
 * Program - Link Preview
 * File Name - link_prev.html
 * Author - ShuvoRim
 * Web site - http://www.shuvorim.tk
 * Email - shuvorim@hotmail.com
 * (c)ShuvoRim Pvt. Ltd. 2002 - 04
 * All rights reserved.
 * ------------------------------
 * Visit our web site for free open
 * source Applications, Applets,
 * Scripts and Games. Please tell
 * us whether you liked it or not!
 * Thank you for using our program.
 */

/*****************************************************
THIS FUNCTION WILL GENERATE THE PREVIEW. IT TAKES 5
ARGUMENTS. THE FIRST ARGUMENT IS REQUIRED. OTHERS ARE
OPTIONAL.
******************************************************/
function showPreview(url, border, width, height, desc)
{

border = typeof(border) == "undefined" ? 0 : border;
  width = typeof(width) == "undefined" ? 100 : width;
  height = typeof(height) == "undefined" ? 100 : height;
  desc = typeof(desc) == "undefined" ? "" : desc;

document.getElementById("sp").innerHTML = '<img src="' + url + '" border="' + border + '" width="' + width + '" height="' + height + '"><br>' + desc;

}

/***************************************************
THIS FUNCTION WILL CLEAR THE GENERATED PREVIEW. IT
DOES NOT TAKE ANY ARGUMENTS.
****************************************************/
function clearPreview()
{

document.getElementById("sp").innerHTML = "Move you mouse over a link to generate a preview.";

}

//-->
</script>
</HEAD>

<BODY>

<li><a href="./images/ball.html" onMouseOver='showPreview("./images/ball.jpg", 0, 100, 100, "This is a photo of a football. It is a very popular game all over the world.");' onMouseOut="clearPreview();" class="ln" title="Browse this category">Football</a>

<li><a href="./images/butterfly.html" onMouseOver='showPreview("./images/butterfly.jpg");' onMouseOut="clearPreview();" class="ln" title="Browse this category">Butterfly</a>

<li><a href="./images/rabbit.html" onMouseOver='showPreview("./images/rabbit.jpg", 0, 100, 100, "<b><font color=red>You are allowed to use HTML tags and attributes as description.</font></b>");' onMouseOut="clearPreview();" class="ln" title="Browse this category">Rabbit</a>

<li><a href="./images/spider.html" onMouseOver='showPreview("./images/spider.jpg", 0, 100);' onMouseOut="clearPreview();" class="ln" title="Browse this category">Spider</a>

</ul>
<br><br>
</td>

<span id="sp" class="txt">Move you mouse over a link to generate a preview.</span>

</td></tr>
</table>

<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided<br>
by <a href="http://javascriptsource.com">The JavaScript Source</a></font>
</center><p>

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

Link Previewer

Leave a Response

Attention JavaScript Coders

Go Deeper