Problem with Javascript Meny, really need some help here!

Hi!

I’m trying to learn/modify a Javascript meny, that I found on [url]www.x-x-x-x-x.de[/url]. As you can se on thier homepage thiers meny is horizontal, but I want to do it Vertical. I have made some progress, but now I’m stuck. As you can se on the site the meny is build up with 3 pictures and a picture “slider”. So what have I done? I have made the meny vertical and the “slider” slides up and down on it. But now to my problem, as you also can se on the homepage in the slider window there is an activated picture that shows the link, this activation I can’t make it work on the vertical it still moves horizontal and not only in the slider window but on the whole meny. I really really hope you understand my problem and someone here can help me. Because I have tried to fix this in like a month now and asked on like 10 forums and none knows.

Here is the Javascript code that goes for the vertical meny:

[CODE]var track = null;
var menuMain = null;
var menuTop = null;
var menuBottom = null;
var trackHandle = null;

var active = false;
var menuActive = false;
var menuEnabled = false;
var eventEnabled = true;

var trackHeight = 159; // Slidegate valve width
var trackMinPos = 25; // left notice for slidegate valves
var trackMaxPos = 667; // right notice for slidegate valves
var trackActLimit = 80; // this value on the left and on the right of the point of menu

var menuTopEnd = 100; // until here the left menu diagram is indicated
var menuBottomStart = 700; // the right menu diagram is indicated off here

var menuStart = 342; // Beginning of the menu diagrams

var defaultMenu = 3; // with this menu the system starts

var menuItem = -1;
var actTrackPos = trackMaxPos;
var oldTrackPos = trackMinPos;
var actMenuTrackPos = trackMaxPos;

var dir = 0;

var menuItemsPos = new Array(5);
menuItemsPos[0] = 33;
menuItemsPos[1] = 186;
menuItemsPos[2] = 342;
menuItemsPos[3] = 498;
menuItemsPos[4] = 650;

var is = new BrowserCheck();

function BrowserCheck() {
var b = navigator.appName;
if (b == “Netscape”) this.b = “ns”;
else if (b == “Microsoft Internet Explorer”) this.b = “ie”;
else this.b = b;
this.version = navigator.appVersion;
this.v = parseInt(this.version);
this.ns4 = (this.b == “ns” && this.v == 4);
this.ns6 = (this.b == “ns” && (this.v == 5 || this.v == 6));
this.ie = (this.b == “ie” && this.v >= 4);
}

function init() {
track = document.getElementById(“track”);
menuMain = document.getElementById(“menuMain”);
menuTop = document.getElementById(“menuTop”);
menuBottom = document.getElementById(“menuBottom”);

menuMain.style.visibility = “visible”;

if (is.ns6) {
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = changeMenuState;
}

setActMenuItem(defaultMenu-1, false);
content.location.href = “aboutx_content.php”;
}

function changeMenuState(e) {
if (!eventEnabled) return;
if (active) {
if (is.ie)
mousePos = event.y;
if (is.ns6)
mousePos = e.pageY;

trackPos = mousePos – trackHeight/2;
moveTrack(trackPos, false);
}
}

function setMenuState() {
if (menuEnabled) {
menuActive = true;
menuEnabled = false;
actMenuTrackPos = menuItemsPos[menuItem];

switch (menuItem) {
case 0: content.location.href = “tripx_content.html”; break;
case 1: content.location.href = “worx_content.php”; break;
case 2: content.location.href = “aboutx_content.php”; break;
case 3: content.location.href = “linx_content.php”; break;
case 4: content.location.href = “gboox/index.php?book=12690”; break;
default: content.location.href = “aboutx_content.php”; break;
}
setEventEnabled(false);
moveTrack(actMenuTrackPos, false);
setTimeout(“setEventEnabled(true)”, 1000);
}
}

function moveTrack(endTrackPos, isAnimated) {

if (oldTrackPos > endTrackPos && dir >=0) {
track.src = “images/xlider_left.gif”;
dir = -1;
}
else if (oldTrackPos < endTrackPos && dir <= 0) {
track.src = “images/xlider_right.gif”;
dir = 1;
}

if (!isAnimated) {
if (endTrackPos >= trackMinPos && endTrackPos <= trackMaxPos) {
if (trackHandle) clearTimeout(trackHandle);
track.style.top = endTrackPos;
menuTop.style.clip = “rect(0 ” + (endTrackPos – menuStart) + ” auto auto)”;
menuBottom.style.clip = “rect(0 auto auto ” + (endTrackPos – menuStart + trackHeight) + “)”;
actTrackPos = endTrackPos;

menuEnabled = false;
checkTrackPos = eval( track.style.top.slice(0, track.style.top.length-2));
for (i=0; i<menuItemsPos.length; i++) {
if (checkTrackPos >= (menuItemsPos[i] – trackActLimit) && checkTrackPos <= (menuItemsPos[i] + trackActLimit)) {
track.src = “images/xlider_on.gif”;
dir = 0;
menuEnabled = true;
menuItem = i;
}
}
}
}
else {
actTrackPos = eval(track.style.top.slice(0, track.style.top.length-2));
step = 1;
// if (Math.abs(endTrackPos-actTrackPos) > 50) step = 3;
if (Math.abs(endTrackPos-actTrackPos) > 30) step = 2;

if (actTrackPos < endTrackPos) {
track.style.top = actTrackPos + step;
menuTop.style.clip = “rect(0 ” + (actTrackPos + step – menuStart) + ” auto auto)”;
menuBottom.style.clip = “rect(0 auto auto ” + (actTrackPos + step – menuStart + trackHeight) + “)”;
trackHandle = setTimeout(“moveTrack(” + endTrackPos + “, ” + isAnimated + “)”, 1);
}
else if (actTrackPos-step > endTrackPos) {
track.style.top = actTrackPos – step;
menuTop.style.clip = “rect(0 ” + (actTrackPos – step – menuStart) + ” auto auto)”;
menuBottom.style.clip = “rect(0 auto auto ” + (actTrackPos – step – menuStart + trackHeight) + “)”;
trackHandle = setTimeout(“moveTrack(” + endTrackPos + “, ” + isAnimated + “)”, 1);
}
else {
if (!menuActive)
track.src = “images/xlider_off.gif”;
else
track.src = “images/xlider_on.gif”;
}
}
oldTrackPos = endTrackPos;
}

function setActMenuItem(item,mode) {
if (mode == null) mode = true;
if (item > -1) {
menuActive = true;
menuEnabled = false;
oldTrackPos = trackMaxPos;
actMenuTrackPos = menuItemsPos[item];
moveTrack(actMenuTrackPos, mode);
}
else {
menuActive = false;
menuEnabled = false;
oldTrackPos = trackMinPos;
actMenuTrackPos = trackMaxPos;
moveTrack(actMenuTrackPos, mode);
}
}

function setNavigationMode(state, mode) {
if (!eventEnabled) return;
if (track == null) return;
switch (state) {
case 0: // Slidegate valve out
moveTrack(actMenuTrackPos, true);
active = false;
dir = 0;
break;
case 1: // Slidegate valve on
active = true;
break;
}
}

function setEventEnabled(isEnabled) {
if (isEnabled) eventEnabled = true; else eventEnabled = false;
}[/CODE]

And heres is the HTML code for the meny:

[CODE]<html>

<head>

<title>5X-</title>
<link rel=”Bookmark” href=”images/x-x-x-x-x.ico”>
<link rel=”SHORTCUT ICON” href=”images/x-x-x-x-x.ico”>
<script src=”navigation.js” language=”JavaScript”></script>
<link rel=”stylesheet” type=”text/css” href=”style_content.css”>

</head>

<body onLoad=”init();”>

<img src=”images/xlider_on.gif” width=”179″ height=”138″ border=”0″ alt=”” style=”visibility:hidden;”>
<img src=”images/xlider_left.gif” width=”179″ height=”138″ border=”0″ alt=”” style=”visibility:hidden;”>
<img src=”images/xlider_right.gif” width=”179″ height=”138″ border=”0″ alt=”” style=”visibility:hidden;”>

<img id=”base” border=”0″ src=”images/base.jpg” width=”200″ height=”829″ style=”position:absolute; left:0px; top:0px”>
<img id=”menuMain” src=”images/menu_active.jpg” width=”159″ height=”774″ border=”0″ alt=”” style=”position:absolute; left:0px; top:28px; visibility:hidden;”>

<img id=”menuTop” onMouseMove=”changeMenuState();” onMouseOver=”setNavigationMode(1);” src=”images/menu.jpg” width=”159″ height=”774″ border=”0″ alt=”” style=”position:absolute; left:0px; top:28px; clip:rect(0,800,auto,auto);”>
<img id=”menuBottom” onMouseMove=”changeMenuState();” onMouseOver=”setNavigationMode(1);” src=”images/menu.jpg” width=”159″ height=”774″ border=”0″ alt=”” style=”position:absolute; left:0px; top:28px; clip:rect(0,auto,auto,800);”>
<img id=”track” onclick=”setMenuState();” onMouseMove=”changeMenuState();” onMouseOver=”setNavigationMode(1);” onMouseOut=”setNavigationMode(0);” border=”0″ src=”images/xlider_on.gif” style=”position: absolute; left:0px; top:28px”>

</body>
</html>[/CODE]

MVH//Pundus

Also in #JavaScript _↴