Just nu i M3-nätverket
Jump to content

Javascrip meny.


Sharingan

Recommended Posts

Sharingan

Tjenare!

 

Jag håller på med att lära mig/modifera www.x-x-x-x-x.de menyn. Deras meny är horizontell och jag vill ha den vertikal. Jag har kommit en bit, som ni kan se på hemsidan består menyn av 3 bilder och en bild "slider", jag har lyckats gör menyn vertikal och slidern går vertikalt. Men som ni kan se på hemsidan så i slider rutan skall de tredje "aktiverade bild lagret" synas, då kan man även trycka på "länkbilden" som kommer fram, detta lyckas jag inte göra vertikalt. Så om någon hjällpa med detta vore det väldigt snällt.

 

Javascript koden:

 

[log]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 - trackActLimit) && checkTrackPos <= (menuItemsPos + 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;

}[/log]

 

HTML koden för menyn:

 

[log]<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>[/log]

MVH//Sharingan

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...