Topic awaiting preservation: Menu script !(for all browsers) (Page 1 of 1)

Oh well, after seeing Ini's last post, I got excited about letting you see/help me improve my image menu script that i'm already using, it is simple and yet effective...but it doesn't work on Opera (and perhaps NS6 never tried it on it).

my script is already easy to be implemented:

first, see a live demo here

1. you start by defining global menu objects

var menu1 = {mouseoverimage:new Function(''), mouseexitimage: new Function('')}, 

      menu2 = {mouseoverimage:new Function(''), mouseexitimage: new Function('')}, 

      menu3 = {mouseoverimage:new Function(''), mouseexitimage: new Function('')};

you can simply defines them also as: var menu1, menu2, menu3 . But to prevent errors/misshowing of menu before whole images are loaded, we define empty objects with empty functions.

2. we put in the onload() the menu init function as:

function init_menus()

  {

    menu1 = new imageLayerMenu('menu1', 'img1', 'layer1', '/img/top_button1_roll.gif', false);

    menu1.adjustlayerposition();



    menu2 = new imageLayerMenu('menu2', 'img2', 'layer2', '/img/top_button2_roll.gif', true);

    menu2.adjustlayerposition();



    menu3 = new imageLayerMenu('menu3', 'img5', 'layer3', '/img/top_button5_roll.gif', true);

    menu3.alignleft = false;

    menu3.adjustlayerposition();

  }

quote:

---

function imageLayerMenu(varName, attachImage, attachLayer, overImage, useImageEvents)

varName: the global variable name used (same as the variable name that holds this menu object)
attachImage: an image object from which the menu will appear (as a reference point)
attachLayer: the layer (<div> ) id that will hold the menu's content
overImage: the image source that will be used when we are over the menu
useImageEvents: IE can make use of events attached to images, otherwise you have to put your own events in <a> tags

---

3. we define the layers, which can simple contain tables..
4. we put <a> tags before our attachImage and add events to NS can understand the events:
example on making menu2 functional:

<a onmouseover="menu2.mouseoverimage()" onmouseout="menu2.mouseexitimage()" href="http://www.google.com"><img name="img2" border="0" src="button2.gif" width="116" height="29"></a>

see? simply we call two methods: menuObj.(mouseexit()

The poster has demanded we remove all his contributions, less he takes legal action.
We have done so.
Now Tyberius Prime expects him to start complaining that we removed his 'free speech' since this message will replace all of his posts, past and future.
Don't follow his example - seek real life help first.

well thanks Ini, fixed it:

function init_menus()

  {

    menu1 = new imageLayerMenu('menu1', 'img1', 'layer1', '/img/top_button1_roll.gif', false);

    menu2 = new imageLayerMenu('menu2', 'img2', 'layer2', '/img/top_button2_roll.gif', true);

    menu3 = new imageLayerMenu('menu3', 'img5', 'layer3', '/img/top_button5_roll.gif', true);

    menu3.alignleft = false;

    adjustpositions();

  }



  function adjustpositions()

  {

    menu1.adjustlayerposition();

    menu2.adjustlayerposition();

    menu3.adjustlayerposition();

  }



  window.onload = init_menus;

  window.onresize = adjustpositions;

but if you can take a look inside my script and see the functions i use from dcond.js and give me like them but more cross-browser i'ld appreciate it!

i've done many other good scripts, but all use dcond.js which is now a bit outdated!

Ooopsie! "line 14, object expected"

page didn't finish loading...

Allewyn, your feedback would help....You're using IE, and this is tested on IE5 -> IE6.

Can you try again, and tell me what happens then?