Clarification In DHTML

[gopalsriram]

Hi,

I am developing a website in which i have used a javascript file to build a menu dynamically.

I have downloaded the javascript file and used in the webpage.

I need to make some modifications in the menu, like when i move the mouse over the menu, i need to change the image.

The example might clarify you,

new PopUpMenuItem("Client Login", "layout.html");

In this above syntax, the URL can be changed or the javascript code can be used using javascript:

but the problem i am facing is that i have write a function in which when the mouse moves over or when i click on the item i have to make a image at a particular location.

Please clarify me,
Sriram

[khalidali63]

do you have a link where it can be viewed and your proposed change?

Khalid

[gopalsriram]

I dont have the link, but i have the javascript file in which the code has to be implemented,

Here is the code,

var menu = new PopUpMenu(80);
menu.setSizes(2, 3, 2, 0);
menu.setColors("white", "purple", "yellow", "black", "darkblue", "silver", "lightblue", "#000040");
menu.setFont("Verdana,MS Sans Serif,Arial,Helvetica", "plain", "bold", "7pt");
var myI1 = new Image(); myI1.src="transparent.gif";
var myI2 = new Image(); myI2.src="menu_norm.gif";
var myI3 = new Image(); myI3.src="menu_high.gif";
menu.setImages(myI1.src,myI2.src,myI3.src, 10, 12);

var intro = new PopUpMenu(40);
intro.copyAttributes(menu);
intro.addItem(new PopUpMenuItem("FAQ List",
"javascript:alert('success') "));
intro.addSeparator();
intro.addItem(new PopUpMenuItem("Client Login", "layout.html"));
intro.addSeparator();
intro.addItem(new PopUpMenuItem("Employee Login", "links.html"));
intro.addSeparator();
intro.addItem(new PopUpMenuItem("Demo Login", "links.html"));

var sub1 = new PopUpMenu(40);
sub1.copyAttributes(menu);
sub1.addItem(new PopUpMenuItem("Request Form", "menubar.html"));
sub1.addSeparator();
sub1.addItem(new PopUpMenuItem("Training", "#"));
sub1.addSeparator();
sub1.addItem(new PopUpMenuItem("Misc Forms", "guestbook_howto.html"));
sub1.addSeparator();
sub1.addItem(new PopUpMenuItem("Forms", "results.html"));

var part1 = new PopUpMenu(40);
part1.copyAttributes(menu);
part1.addItem(new PopUpMenuItem("Prod. Updates", "downloads.html"));
part1.addSeparator();
part1.addItem(new PopUpMenuItem("White Papers", "components.html"));
part1.addSeparator();
part1.addSubmenu(new PopUpMenuItem("Templates", "links.html#templates"),sub1);
part1.addSeparator();
part1.addItem(new PopUpMenuItem("Manuals", "downloads.html#manuals"));

var part2 = new PopUpMenu(40);
part2.copyAttributes(menu);
part2.addItem(new PopUpMenuItem("Navigation", "javascript_home.html#navigation"));

var part3 = new PopUpMenu(40);
part3.copyAttributes(menu);
part3.addItem(new PopUpMenuItem("Hardware", "actions_home.html#navigation"));
part3.addSeparator();
part3.addItem(new PopUpMenuItem("Software", "actions_home.html#windows"));
part3.addSeparator();
part3.addItem(new PopUpMenuItem("IT", "actions_home.html#coolstuff"));

var part4 = new PopUpMenu(40);
part4.copyAttributes(menu);
part4.addItem(new PopUpMenuItem("Industry Outlook", "imagedir.html"));
part4.addSeparator();
part4.addItem(new PopUpMenuItem("SIA Outlook", "asp.html"));

var part5 = new PopUpMenu(40);
part5.copyAttributes(menu);
part5.addItem(new PopUpMenuItem("Contact Support", "http://www.amost.com/support/index.html"));
part5.addSeparator();
part5.addItem(new PopUpMenuItem("Team AMOST", "http://web-db.amost.com/tno/index.cfm"));

var part6 = new PopUpMenu(40);
part6.copyAttributes(menu);
part6.addItem(new PopUpMenuItem("Navigation", "javascript_home.html#navigation"));

var part7 = new PopUpMenu(40);
part7.copyAttributes(menu);
part7.addItem(new PopUpMenuItem("AMOST Site", "javascript_home.html#navigation"));

var part8 = new PopUpMenu(40);
part8.copyAttributes(menu);
part8.addItem(new PopUpMenuItem("Information", "javascript_home.html#navigation"));

var part9 = new PopUpMenu(40);
part9.copyAttributes(menu);
part9.addItem(new PopUpMenuItem("Navig", "javascript_home.html#navigation"));

menu.addSubmenu(new PopUpMenuItem("Logins", "documentation.html"), intro);
menu.addSeparator();
menu.addSubmenu(new PopUpMenuItem("Downloads", "downloads.html"), part1);
menu.addSeparator();
menu.addSubmenu(new PopUpMenuItem("Milestone", "milestones.html"), part2);
menu.addSeparator();
menu.addSubmenu(new PopUpMenuItem("Technology", "Tech.html"), part3);
menu.addSeparator();
menu.addSubmenu(new PopUpMenuItem("Market", "Market.html"), part4);
menu.addSeparator();
menu.addSubmenu(new PopUpMenuItem("Tech. Support", "contact_support.html"), part5);
menu.addSeparator();
menu.addSubmenu(new PopUpMenuItem("Site Map", "sitemap.html"), part6);
menu.addSeparator();
menu.addSubmenu(new PopUpMenuItem("Search", "Search.html"), part7);
menu.addSeparator();
menu.addSubmenu(new PopUpMenuItem("Requests", "Requests.html"), part8);
menu.addSeparator();
menu.addItem(new PopUpMenuItem("AMOST Home", "amost_home.html"));

<!-- window.onload = initMenu; -->

var minX = 2;
var minY = 145;

function initMenu() {

menu.create();
menu.setStatic(true);
menu.open(minX, minY);
repositionMenu();
}

function repositionMenu() {

var viewTop, viewBottom;
var dy;

viewTop = getPageScrollY();
viewBottom = viewTop + getWindowHeight();

if (menu.bottom < viewTop)
menu.moveTo(minX, viewTop - menu.height);
if (menu.top > viewBottom)
menu.moveTo(minX, viewBottom);

dy = Math.round(Math.abs(viewTop + minY - menu.top) / 2);
if (viewTop + minY < menu.top)
dy = -dy;

menu.moveBy(0, dy);
setTimeout("repositionMenu()", 20);
}

The dark blue color code is where i have to change to javascript code.

I dont know how to capture the mouseover and onclick events in internet explorer and netscape navigator browser and do changes according to it.

Thanks,
Sriram