GDev Resources.com

Top Navigation - Include

Home

Forums

Index

Terms

Developer Resources

DynamicScroller

Scripts

Javascripts
• Navigation
• Miscellaneous

DHTML
• Navigation
• Scrollers

Miscellaneous
Scripts-In-Action

MultiMedia

• Flash
• Music Loops

Recommends

• WebWiz Forums
• Macromedia HomeSite
• Jasc Paint Shop Pro
• Xara Products
• SWiSH

Shareware/Freeware

• Nonags
• Tucows
• ZDNet

Coding References

• ASCII Table
• CSS Property Table
• HTML Tag Attributes

Code Generators

• Cool Tools 1
• Cool Tools 2

Floating Hover-Menu: IE4 Nav4 NS6
Created by: Ron Grafe
Version 1.0
Version Date: 2/14/2002

This script allows you to pop open a link menu by placing your mouse over any tag that supports the mouseover event. When you do, it opens a menu next to your cursor/page element that will stay open for a specified amount of time (you set the time in seconds). You also define the width, height, links, title, colors, and where you want the box to appear relative to your cursor (Top-Left, Bottom-Left, Bottom-Right, or Top-Right). You can add this menu anywhere you like within the HTML page (i.e. in a standard menu format, or to a single word in the middle of a line).

Check out the Demo link to see some possibilities.

DEMO: Floating Hover-Menu

Step 1: Select, Copy and paste the following code into the "HEAD" section of your HTML Page. Then change/add elements in the "titleArray" and "linkArray" to define your content.

SELECT ALL

var titleArray = new Array
titleArray[1]="<img src='dr.gif' border='0'>"
titleArray[2]="<b>Javascript Resources</b>"
titleArray[3]="<b>Java Resources</b>"
titleArray[4]="<b>DHTML Resources</b>"

var linkArray = new Array
linkArray[1]="• <a href='http://www.builder.com'>Builder</a><br>"
linkArray[1]+="• <a href='http://www.wdvl.com'>WDVL</a><br>"
linkArray[1]+="• <a href='http://www.webdeveloper.com'>WebDeveloper</a><br>"
linkArray[1]+="• <a href='http://www.webreference.com'>WebReference</a><br>"
linkArray[1]+="• <a href='http://www.pageresource.com/'>Pageresource</a><br>"
linkArray[1]+="• <a href='http://www.w3c.org'>W3C</a><br><br>"
linkArray[1]+="Even add text, graphics, and links!<br>"

linkArray[2]="• <a href='http://www.wsabstract.com/'>Website Abstraction</a><br>"
linkArray[2]+="• <a href='http://www.javascript.com'>JavaScript.com</a><br>"
linkArray[2]+="• <a href='http://javascript.internet.com/'>JavaScript Source</a><br>"

linkArray[3]="You can provide text along with the links to either describe a link or say something"
linkArray[3]+=" interesting about a site. You can change the color of the text that you add.<br>"
linkArray[3]+="• <a href='http://www.sun.com/download/'>Sun Download Center</a><br>"

linkArray[4]="• <a href='http://www.wsabstract.com/'>Website Abstraction</a><br>"
linkArray[4]+="• <a href='http://www.dynamicdrive.com/'>Dynamic Drive</a><br>"
linkArray[4]+="• <a href='http://www.ruleweb.com/dhtml/'>Jeff Rule's DHTML</a><br>"

var thename
var theobj
var thetext
var winHeight
var winWidth
var boxPosition
var headerColor
var tableColor
var timerID
var seconds=0
var x=0
var y=0
var offsetx = 2
var offsety = 2

if(ns4) {
	document.captureEvents(Event.MOUSEMOVE)
}
document.onmousemove=getXY

function buildText(value,tcolor,bcolor) {
// CHANGE EACH ARRAY ELEMENT BELOW TO YOUR OWN CONTENT. MAKE SURE TO USE SINGLE QUOTES INSIDE DOUBLE QUOTES.
text="<table width='"+(winWidth-4)+"' height='"+(winHeight-4)+"' border='1' bgcolor='"+tableColor+"' cellspacing='1' cellpadding=1>"
text+="<tr><td width='"+(winWidth-4)+"' height='20' align='center' valign='top' bgcolor='"+headerColor+"'>"
text+="<font face='Arial,Helvetica' color='"+tcolor+"' SIZE='-1'>"+titleArray[value]+"</font>"
text+="</td></tr>"
text+="<tr><td width='"+winWidth+"' align='left' valign='top'>"
text+="<font face='Arial,Helvetica' color='"+bcolor+"' SIZE='-2'>"+linkArray[value]+"</font>"
text+="</td></tr></table>"
return text
}

function viewIt() {
		if(iens6) {
			theobj.style.visibility="visible"
		}
		if(ns4) {
			theobj.visibility = "visible"
		}
}

function stopIt() {
	if(theobj) {
		if(iens6) {
		theobj.innerHTML = ""
		theobj.style.visibility="hidden"
		}
		if(ns4) {
		theobj.document.write("")
		theobj.document.close()
		theobj.visibility="hidden"
		}
	}
}

function timer(sec) {
	seconds=parseInt(sec)
	if(seconds>0) {
		seconds--
		timerID=setTimeout("timer(seconds)",1000)
	}else{
		stopIt()
	}
}

Step 2: Select, Copy and paste the following code into the BODY section of your HTML page. Then use the appropriate code snippet in whatever tag you choose.

SELECT ALL

<layer name="nsviewer" bgcolor="#cccccc" width=0 height=0 style="border-width:thin;z-index:1"></layer>
<script language="JavaScript1.2">
if (iens6){
document.write("<div id='viewer' style='background-color:#cccccc;marginleft:0;visibility:hidden;position:absolute;width:0;height:0;z-index:1;overflow:hidden'></div>")
}
if (ns4){
	hideobj = eval("document.nsviewer")
	hideobj.visibility="hidden"
}
</script>

onmouseover="setObj(element,bWidth,bHeight,'bPosition','tBackColor','bBackColor','tFontColor','bFontColor')" onmouseout="timer(numSec)"

onClick="stopIt()"

Site Generated and Maintained using Macromedia Homesite

• HtmlCodeTutorial.com
• DevGuru.com
• Builder.com
• WDVL.com
• WebDeveloper.com
• WebReference.com
• Pageresource.com
• W3C

Javascript Resources

• Website Abstraction
• JavaScript.com
• JavaScript Source

DHTML Resources

• Website Abstraction
• Dynamic Drive
• Jeff Rule's DHTML

Java Resources

• JavaBoutique.com
• Sun Download Center

ASP Resources

• ASP101
• LearnASP
• PowerASP
• ASPZone

ScriptKingdom.com
Script repository
and resource site

www.hotscripts.com