layer menu using IMAGES-- anyone know??

noelle · 10-05-2001 02:41 PM

Hi - I'm trying to create a drop-down menu system using layers with images
(rollovers) as the menu options -- does anyone know where this has been done
- a fully cross-browser compatible script? I've used Hier menus for another
site, but they don't seem to have anything that utilizes images.... anyone
know??

Bryce · 10-10-2001 01:34 AM

Noelle,

HeirMenus can be used with images....here are some snippets using HeirMenus
4.1

<html>
<head>
<title>Test Page</title>
<script language="JavaScript1.2" SRC="HM_Loader.js" TYPE="text/javascript"></script>
</head>
<body>

<a href="page1.asp" onMouseOver="popUp('HM_Menu1',event);" onMouseOut="popDown('HM_Menu1');"><img
src="images/mnu_about.gif" width="72" height="22" alt="About Us" border="0"
/></a>

</body>
</html>

Using your existing HeirMenus script set your HM_Array.js file to have an
Array for each popup menu you want for example:

HM_Array1 = [
[, // menu width
194, // left_position
96, // top_position
, // font_color
, // mouseover_font_color
, // background_color
, // mouseover_background_color
, // border_color
, // separator_color
, // top_is_permanent
, // top_is_horizontal
, // tree_is_horizontal
, // position_under
, // top_more_images_visible
, // tree_more_images_visible
, // evaluate_upon_tree_show
, // evaluate_upon_tree_hide
, // right_to_left
, // display_on_click
, // top_is_variable_width
, // tree_is_variable_width
],

["Menu 1","page2.asp",1,0,0],
["Menu 2","page3.asp",1,0,0],
["Menu 3","page4.asp",1,0,0]
]

Here is the HM_Loader file for clarity:

/*HM_Loader.js
* by Peter Belesis. v4.1.1 011002
* Copyright (c) 2001 Peter Belesis. All Rights Reserved.
*/

HM_DOM = (document.getElementById) ? true : false;
HM_NS4 = (document.layers) ? true : false;
HM_IE = (document.all) ? true : false;
HM_IE4 = HM_IE && !HM_DOM;
HM_Mac = (navigator.appVersion.indexOf("Mac") != -1);
HM_IE4M = HM_IE4 && HM_Mac;
HM_Opera = (navigator.userAgent.indexOf("Opera")!=-1);
HM_Konqueror = (navigator.userAgent.indexOf("Konqueror")!=-1);

HM_IsMenu = !HM_Opera && !HM_Konqueror && !HM_IE4M && (HM_DOM || HM_NS4 ||
HM_IE4);

HM_BrowserString = HM_NS4 ? "NS4" : HM_DOM ? "DOM" : "IE4";

if(window.event + "" == "undefined") event = null;
function HM_f_PopUp(){return false};
function HM_f_PopDown(){return false};
popUp = HM_f_PopUp;
popDown = HM_f_PopDown;

HM_GL_MenuWidth = 150;
HM_GL_FontFamily = "Verdana,Arial,Sans-Serif";
HM_GL_FontSize = 8;
HM_GL_FontBold = 1;
HM_GL_FontItalic = false;
HM_GL_FontColor = "#FFFFFF";
HM_GL_FontColorOver = "#FFFFFF";
HM_GL_BGColor = "#B58484";
HM_GL_BGColorOver = "#999999";
HM_GL_ItemPadding = 3;

HM_GL_BorderWidth = 1;
HM_GL_BorderColor = "#808080";
HM_GL_BorderStyle = "solid";
HM_GL_SeparatorSize = 1;
HM_GL_SeparatorColor = "#808080";

HM_GL_ImageSrc = "";
HM_GL_ImageSrcLeft = "";

HM_GL_ImageSrcOver = "";
HM_GL_ImageSrcLeftOver = "";

HM_GL_ImageSize = null;
HM_GL_ImageHorizSpace = null;
HM_GL_ImageVertSpace = null;

HM_GL_KeepHilite = true;
HM_GL_ClickStart = false;
HM_GL_ClickKill = 0;
HM_GL_ChildOverlap = 20;
HM_GL_ChildOffset = 10;
HM_GL_ChildPerCentOver = null;
HM_GL_TopSecondsVisible = .5;
HM_GL_ChildSecondsVisible = .3;
HM_GL_StatusDisplayBuild = 0;
HM_GL_StatusDisplayLink = 0;
HM_GL_UponDisplay = null;
HM_GL_UponHide = null;

HM_GL_RightToLeft = false;
HM_GL_CreateTopOnly = HM_NS4 ? true : false;
HM_GL_ShowLinkCursor = true;

// the following function is included to illustrate the improved JS expression
handling of
// the left_position and top_position parameters
// you may delete if you have no use for it

function HM_f_CenterMenu(topmenuid) {
var MinimumPixelLeft = 0;
var TheMenu = HM_DOM ? document.getElementById(topmenuid) : HM_IE4 ? document.all(topmenuid)
: eval("window." + topmenuid);
var TheMenuWidth = HM_DOM ? parseInt(TheMenu.style.width) : HM_IE4 ? TheMenu.style.pixelWidth
: TheMenu.clip.width;
var TheWindowWidth = HM_IE ? document.body.clientWidth : window.innerWidth;
return Math.max(parseInt((TheWindowWidth-TheMenuWidth) / 2),MinimumPixelLeft);
}

if(HM_IsMenu) {
document.write("<SCR" + "IPT LANGUAGE='JavaScript1.2' SRC='js/HM_Arrays.js'
TYPE='text/javascript'><\/SCR" + "IPT>");
document.write("<SCR" + "IPT LANGUAGE='JavaScript1.2' SRC='js/HM_Script"+
HM_BrowserString +".js' TYPE='text/javascript'><\/SCR" + "IPT>");
}

//end

Have at it!!


"noelle" <noelle88@excite.com> wrote:
>
>Hi - I'm trying to create a drop-down menu system using layers with images
>(rollovers) as the menu options -- does anyone know where this has been
done
>- a fully cross-browser compatible script? I've used Hier menus for another
>site, but they don't seem to have anything that utilizes images.... anyone
>know??

Scott · 10-17-2001 11:13 AM

I've built layer menus with Likno's AllWebMenus (www.allwebmenus.com) that
use images (see www.sarariviera.com) to maintain the look & feel of the site.
It's a Windows based app with nominal learning curve on its UI. You can download
a trial version that let's you build menus, but not implement them-- registration
is $49 or so-- worth it to get a job done on schedule. The app is also sensitive
to cross-browser issues as well, just remember how your margins behave in
your overall design.

=) Scott

"noelle" <noelle88@excite.com> wrote:
>
>Hi - I'm trying to create a drop-down menu system using layers with images
>(rollovers) as the menu options -- does anyone know where this has been
done
>- a fully cross-browser compatible script? I've used Hier menus for another
>site, but they don't seem to have anything that utilizes images.... anyone
>know??

Thread: layer menu using IMAGES-- anyone know??

Thread Tools

Display

layer menu using IMAGES-- anyone know??

Re: layer menu using IMAGES-- anyone know??

Re: layer menu using IMAGES-- anyone know??

Bookmarks

Bookmarks

Posting Permissions