JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



Item Info (in Frames)		[View Sample]

Displays information in the bottom frame about the current item from the top frame as the user hovers over the image or alternately a text link. The bottom page returns to blank when no item is touched. Useful to convey additional information about products or sections of your site. Clicking the image loads the order page in the entire window.


Insert into <HEAD>


Insert into <BODY>


Other Options
<!-- THREE STEPS TO INSTALL ITEM INFO (IN FRAMES): 1. Copy the coding into a new frameset page 2. Add the last code into the HEAD of your HTML document 3. Paste the final code into the BODY of your items page --> <!-- STEP ONE: Paste this code into a new frameset page --> <HEAD> <SCRIPT LANGUAGE="JavaScript"> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Original: Ronnie T. Moore, Editor --> <!-- Web Site: The JavaScript Source --> <!-- Begin var blank = " "; // blank page function showInfo(description) { with (parent.frames[1]) { document.open(); document.write("<html><body>" + description + "</body></html>"); document.close(); } } // End --> </SCRIPT> </HEAD> <frameset rows="*,100"> <frame src="item-info-top.html"> <frame src="javascript:parent.blank" scrolling=no> </frameset> </HEAD> <!-- STEP TWO: Copy this code into the HEAD of your items page --> <BODY> <HEAD> <SCRIPT LANGUAGE="JavaScript"> if (window == top) location.href = "frameset-page.html"; // change this URL to the address of your frameset page </script> </HEAD> <!-- STEP THREE: Copy this code into the BODY of your items page --> <BODY> <center> <!-- Remember to change the "Description of the image...." text below --> <!-- And you change 'order-page.html' to an order page for the item --> <a href="order-page.html" target="_top" onMouseOver="javascript:parent.showInfo('Description of the image goes here');" onMouseOut="parent.showInfo('');"><img src="http://www.your-web-site-address-here.com/logo.gif" ALT="Product Image" width=267 height=103></a> </center> <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> <!-- Script Size: 1.42 KB -->