Free-Javascripts.com - OnMouseOver Menu

> Home > Navigation > OnMouseOver Menu

OnMouseOver Menu

In a Nutshell: Adding a dynamic and space-saving navigation system to your site is easy with this OnMouseOver Menu. As a mouse pointer passes over each button, the button changes color, indicating that it is the current selection. This script can be modified to encompass a variety of designs, so that it may blend in to the feel of your site.

Use it Yourself: Utilising new style sheet technology to define the properties of the text that appears within the menu, this code must be placed within the <head> section of your HTML code. Copy and paste the code from below.

Next, the following Javascript component must be placed within the <body> section of your HTML code. Notes scattered throughout the text will assist you in customising the code to your needs.

<SCRIPT LANGUAGE="JavaScript">    // ************************************************************ // First, some variables you can change as you like it // ************************************************************ // Number of menus menuMax=2 menus=new Array(menuMax) // Declare the menus with the number of rows and columns menus[1]=new Menu(3, 2) menus[2]=new Menu(1, 6) // ************************************************************ // Second, specify the menu items // ************************************************************ // Define the menu items as follows: // ("text to display", "url or mailto", "frame name", "backgroundcolor", "text-color") // See the jstextmenu.txt for more info on this variables with (menus[1]) { items[1]=new Item("Freebies", "https://www.all-4-free.com", "top", "lightblue", "navy") items[2]=new Item("Free Fonts", "https://www.all-4-free.com/fonts", "frame_name2", "lightblue", "navy") items[3]=new Item("Games", "https://www.n3xus.com", "frame_name3", "lightblue", "navy") items[4]=new Item("Piaster", "https://www.piaster.nl", "new_window", "lightblue", "navy") items[5]=new Item("Email!", "mailto:Jan_P@dds.nl?subject=JS Text Menu&cc=webmaster@piaster.nl", "", "lightblue", "navy") items[6]=new Item("Net-Ads", "https://www.net-ads.com", "", "lightblue", "navy") } with (menus[2]) { items[1]=new Item("Freebies", "https://www.all-4-free.com", "top", "red", "white") items[2]=new Item("Free Fonts", "https://www.all-4-free.com/fonts", "frame_name2", "red", "white") items[3]=new Item("Games", "https://www.n3xus.com", "frame_name3", "red", "white") items[4]=new Item("Piaster", "https://www.piaster.nl", "new_window", "red", "white") items[5]=new Item("Email!", "mailto:Jan_P@dds.nl?subject=JS Text Menu&cc=webmaster@piaster.nl", "", "red", "white") items[6]=new Item("Net-Ads", "https://www.net-ads.com", "", "red", "white") } // ************************************************************ // The functions to get things going // ************************************************************ // Define a menu object function Menu(rowsMax, columnsMax) { this.rowsMax=rowsMax this.columnsMax=columnsMax this.items=new Array(rowsMax * columnsMax) } // Define a menu item function Item(text, url, frame, backgroundColor, color) { this.text=text this.url=url this.frame=frame this.backgroundColor = backgroundColor this.color = color } // Returns a integer number between 1 and max that differs from the old one function getNewRandomInteger(oldnumber, max) { var n = Math.floor(Math.random() * (max - 1) + 1) if (n >= oldnumber) n++ return n } // Returns a integer number between 1 and max function getRandomInteger(max) { var n = Math.floor(Math.random() * max + 1) return n } // Jump to the specified url in the specified frame function GotoUrl(url, frame) { if (frame != "") { var s = eval("window." + frame) if (s != null) s.document.location.href = url else window.open(url, frame, "") } else window.location.href = url } function ItemClick(thisItem) { var obj = eval(menus[thisItem.menuNo].items[thisItem.cellNo]) GotoUrl(obj.url, obj.frame) } function ItemMouseOver(thisItem) { var cellObj = eval(menus[thisItem.menuNo].items[thisItem.cellNo]) var styleObj = eval('thisItem' + '.style') window.status = cellObj.url styleObj.color = cellObj.backgroundColor styleObj.backgroundColor = cellObj.color } function ItemMouseOut(thisItem) { var cellObj = eval(menus[thisItem.menuNo].items[thisItem.cellNo]) var styleObj = eval('thisItem' + '.style') window.status = "" styleObj.color = cellObj.color styleObj.backgroundColor = cellObj.backgroundColor } // Show the menus for (var menuNo = 1; menuNo <= menuMax; menuNo++) { with (document) { write("<table border='0' cellspacing='0' cellpadding='10'>") menuStyle = 'stMenuCell' + menuNo with (menus[menuNo]) { for (var rows=1; rows <= rowsMax; rows++) { write("<tr align='center'>") for (var cols=1; cols <= columnsMax; cols++) { var cellNo=rows * cols var item=items[cellNo] if (document.all) { write("<td class=", menuStyle, " menuNo=", menuNo, " cellNo=", cellNo, " ") write("onMouseOver='ItemMouseOver(this)' onMouseOut='ItemMouseOut(this)' ") write("onClick='ItemClick(this)'>") write(item.text, "</td>") } else { write("<td class=", menuStyle, ">") write("<a class=", menuStyle, " href='", item.url, "'>", item.text, "</a></td>") } } write("</tr>") } } write("</table>") write("<br><br><br>") } } </script>

This Script Created By: Jan Pijnacker

Copyright © 1999-2024 Curiosity Cave Pty Ltd. All rights by all media reserved. All elements on this site, including page design, contents and graphics (with the obvious exception of the free Javascripts) may not be reproduced, broadcast, rewritten or redistributed in whole or in part without the expressed written permission of Curiosity Cave Pty Ltd.