Do Not Open From Index ~ See Link Previewer

D epending on your knowledge of HTML and Javascripts, this is a two part copy and paste code with reconfigurations in both the <HEAD> and <BODY> section of your document. The reconfigurations in the <BODY> section can get a little frustrating or confusing so we will pay particular attention to those settings and make them as clear as possible.

B efore we start, the below link will take you to the default script where you can see how the author designed it. We will show you all the reconfigurations so the default will not be so confusing.
[ Default Link Previewer ]

Head Section Reconfigurations

T he first part of the <HEAD> section of code is basically nothing more than an elaborate CSS Style Sheeet for the text and links inside the script. We will break this part down into the four (4) parts of the style sheet and what it does.

The first or top reconfiguration of the above reconfiguration is for font type, font size and
active link color. Active link color is the color of the link you see when the page first opens and you do not either mouseover or select the link. Just play around with this until you like what you see.

If you are going to use HEX code and replace the word color with HEX code, do it as you see below:
color: #??????;
Do Not use quotation marks around the HEX code
Wrong Way: color: " #??????";

W e have also included a color chart that has both words and HEX codes.
[ Color Picker ]

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

The above reconfiguration is for font type, font size and hover link color. Hover link color is the color of the link you mouseover (hover) with your cursor. This time, the color is in HEX code. You can replace the HEX code with word color. If you do don't forget to remove the # or you will get an erroneous (wrong) color reading. Just play around with this until you like what you see.

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

The above reconfiguration is for font type, font size and span.txt color. Span.txt color is the color of the text inside the effect unless you use HTML coding to change the color. This will be explained in the <BODY> section reconfigurations. Just play around with this until you like what you see.

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

-->
</style>

The above reconfigurations are for the border color around the effect and how wide (thick) the border will be. The default is set for a 1 pixel solid black border. We reconfigured ours to have a solid 5px border with the color of #ba55dc.

T he last thing to can reconfigure if you want is the text that says:
"Move you mouse over a link to generate a preview."
This reconfiguration is at the end of the <HEAD> section of code.

function clearPreview()
{

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

}
//-->
</script>

[ Return ]

T hose are the only reconfigurations within the <HEAD> section that you need to be concerned with. There is some other material within the <HEAD> section that is worthwhile to read. It explains the 5 arguments that compose this script. Below we will cover the howto reconfigure these.

B efore we begin, this part of the effect is to be pasted anywhere within the <BODY> section you want it to appear. It is also enclosed inside a <table>. This table does not have any color configurations so it will appear on any page color without any reconfigurations. Unless, like we have it configured, we added the attribute for a color within the table so it would not be a black table on a black page. See below:

Default <table> Settings

<table width=50% border="0" cellspacing="10" cellpadding="4" class="box">

<tr><td valign="top" width="40%">

<ul type="square">




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

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

<td width="60%">

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

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

Reconfigured <table> Settings

<table width=50% border="0" cellspacing="0" cellpadding="4" class="box">

<tr><td bgcolor="#??????" valign="top" width="40%">

<ul type="square">




<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>

<td bgcolor="#??????" width="60%">

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

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

I n both the default and reconfigured table code notice the <ul type="square">. This is the code to start an unordered list with a defined square bullet. If you were to remove the type="square" attribute, you would have the default round bullet. Also in the code, notice each new link is also started with a <li>. This is because all the links are incorporated with an unordered list. If you would like to learn more about lists, just grab the below link and you are there.
[ All About Lists ]

L ets define and explain what we did to put color into the table and change the cell spacing.

bgcolor="#??????" By placing this inside the <td we will now have a color being defined. Just change the ?????? to a 6 digit HEX code.
Since this is a two section table, you need to add this attribute in two places. See above.

cellspacing="0" If you notice the default was defined with a cellspacing="10". Once you add the color attribute into the two parts of the table and do not change this to a zero (0), you will have "spacing" around the 2 tables and down the middle where the two tables meet and are separated with the cellspacing. If this is unclear, grab the below links and view what we are explaining.
[ cellspacing of 10 ] [ cellspacing of 0 ]

R emember earlier we told you to read the information contained within the [ <HEAD> ] section of the code to explain how the coding is configured. By reading this, it should give you an insight into the different attributes associated with the calling of the URL(s) and image(s).

L ets start with the calling of the URL and image path. From the way it is coded, both the URL and image paths were built and called from a sub directory* as opposed to the main or top directory.

<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>

* This is seen by the coding of the URL(s) and image(s) by the . and the /images. This tells you to call the URL and image from one directory below the top directory.

T o simplify matters, if you would forget about the sub directory and concentrate on just calling the URL(s) and image(s) from whatever directory you want, you can remove some of the coding and just put in the complete URL(s) and image(s) path(s). See below:

Default

Reconfigured

<li><a href="Complete Path To Link URL" onMouseOver='showPreview("Complete Path To Image Address",
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>

Note! In reference to the above and removing some of the coding. Just think of it as just adding a complete URL (address) and you will not need to call from sub directories.

Sub Directory ~ <a href="./images/ball.html"
Normal URL (address) ~ <a href="http://www.link address.html"

N ext we shall cover the 3 image attributes. These will define the border around the image, the width and finally the height of the image.

<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>

T he zero 0 in the above code defines no border around the image when it appears. If you change that to a 1 or higher, the border around the image becomes visible. The higher the number, the wider the border. See an image example below.

border="0"

border="2"

T he first 100* defines the width of the image and the second 100* defines the height of the image.

* In reference to the width and height of the images, it is best if you have all the images about the same size. Reason being is quite simple. If the images are of all different sizes, the table will appear to move or get larger and smaller to accommodate the different sizes of images. By having them the same approximate size will avoid this happening.

B elow we will cover adding HTML into the code where you have your discription text on mouseover. When you add HTML into the code what it actually it means you can add font <font color=yellow>color</font>, bold <b></b> and or <big>big </big> tags, <strike>~~strike~~</strike> tags, <i>italic</i> tags, <marquee>marquee</marquee>* tags etc. The HTML tags are basically limited to the text that appears when you place your cursor on the respective link. See below:

* In reference to the <marquee> tags, they will not be seen Netscape7.02 and Firefox1.0,. You will not see any text displayed at all on touching the links (that have <marquee> tags) with your cursor. All other mouseover effects will work fine.

<li><a href="URL Path Here" onMouseOver='showPreview("Image Path Here",
0, 100, 100, "<font color=#ff69b4>This is a photo of a football. It is a very popular game all over the world.</font>");' onMouseOut="clearPreview();" class="ln" title="Browse this
category">Football</a>

Note Of Importance: In the above code how notice how the font color is defined. It is lacking the quotation marks " ") around the HEX code <font color="#ff69b4">. Reason being is quite simple. If you were to add the quotation marks " you would receive an error at the bottom of your browser window stating "Page Done With Errors". This code was designed with the double quotation marks " ", so by adding more than the code calls for in ceretain parts of the script, you are producing an error within the script. You can use words here also for colors and the same rule applies, "No" quotations (") around the word and remove the # character. See below:

<li><a href="URL Path Here" onMouseOver='showPreview("Image Path Here",
0, 100, 100, "<font color=hotpink>This is a photo of a football. It is a very popular game all over the world.</font>");' onMouseOut="clearPreview();" class="ln" title="Browse this
category">Football</a>

I f you grab the below link, you will find a complete list of font commands and howto add them.
[ Font Commands and Text Effects ]

T he next thing we shall cover is making the links open in a new browser window as opposed to opening in the same browser window. Just add the attribute of target="_blank" into the URL path. As opposed to not adding the " " double quotation marks in the above section, here you can add the double quotations without getting an error message. Opening in a new browser window has two (3) definite advantages.

You can keep your visitors from not getting away from this menu effect.
Your visitors do not have to keep going back to get to another link within this effect. All they need to do is close the window that opened and grab another link.
If one of your links is associated with a URL that is not part of your domain, you do not want to have them leave your site if possible.

<li><a href="URL Path Here"target="_blank" onMouseOver='showPreview("Image Path Here",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>

T he last three (3) things we shall cover are the "title=", the "link name" and the text on mouseover". The title= is the same thing as an alt tag for text links. By placing your cursor on the text link a little description pops up.
[ Place Cursor Here For Title Effect ]

<li><a href="URL Path Here" onMouseOver='showPreview("Image Path Here",0, 100, 100, "This Is Where You Place Your \" Descriptive\" Text");' onMouseOut="clearPreview();" class="ln" title="Browse this category">Link Name Here</a>

One other thing that Must be adhered to if you want to add quotes around certain words or you will get an error message. You must place the \ prior to the " . Reason being is that the script will not understand the use of extra " quotation marks unless you preface it with the backslash or forward slash (which ever you call it).

* Little Extra Not Included In The Script: On the pages that opened from the [ Default Link Previewer ] that said "Return To Link Preview" if you would like to know howto add the sniplet of javascript that will send you back one page just copy this little code and paste it anywhere in the <BODY> section (of the page that is linked to) not the page the initial effect is on.

Note Of Importance: If you are going to use the sub directory coding with the URL's and image paths, be sure of one thing or this effect will not work and you will wonder why.
Any page you are going to have this effect on or any page that will link to a page this effect is on, be sure of one thing within either the linking URL or the URL this effect is on. Be sure you "Do Not" have the backslash-forward slash / (which ever you call it) at the end of the linking URL. If you do, the images will not appear nor will you be able to select and go to the links. If this sounds confusing, see the below example:

Right Way: https://www.angelfire.com/ny5/consigliere/linkpreviewer1.html
Wrong Way: https://www.angelfire.com/ny5/consigliere/linkpreviewer1.html/

S elect the links above to see what we are explaining about the Correct and Incorrect URL address.

Y ou can add more than the default number (4) links. Just follow the pattern and add them before the closing </ul> tag. This tag represents the closing of an unordered list. In other words use one of the image and URL codes within the table code for each additional link. Be sure to add the additional link codes "Above the closing </ul> tag.

<table width=50% border="0" cellspacing="10" cellpadding="4" class="box">

<tr><td valign="top" width="40%">

* Add the code for each additional link here. Notice it is above the below closing </ul> tag

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

<td width="60%">

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

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

T he last thing we will cover is preloading the images you are going to incorporate into this script. This is not part of the script but a little trick to have the images load faster in the background so when the you call the image, it appears instantly and not have to load when it is called. Just add a preload script into the <HEAD> section of your document with all the images defined.
[ Preload Script ]

I f you would like to add this effect into your pages, just close this window and grab the
"Get Code Here" link and you are there. If you have any problems with this, feel free to contact us.