eKiwi

Füge das folgende Script in den body-Bereich deiner HTML-Seite ein:

(Die Stelle an der du die Links konfigurieren kannst, ist rot markiert)

<SCRIPT>
var ItemEntry = new Array()
// Varibles can be changed freely
MenuWidth = 137 // Width of the pop-up menu
MenuHeight = 250 // Height of the pop-up menu
ItemInMenu = 3 // How many items are in the menu
 

// Setup your menu words
ItemEntry[0] = new MenuEntry("Button1","http://")
ItemEntry[1] = new MenuEntry("Button2","http://")
ItemEntry[2] = new MenuEntry("Button3","http://")

 

var menuEle = new Array(ItemInMenu)
// DO NOT MODIFY THE CODE BELOW
function MenuEntry(cap,adrs) {
this.cap = cap
this.adrs = adrs
}
n = (document.layers) ? 1:0
ie = (document.all) ? 1:0
function init() {
// initialize objects
menu = new dynLayer("menuDiv",null)
for (var k = 0; k < menuEle.length; k++) {
menuEle[k] = new dynLayer("input" + k + "Div","menuDiv")
}
menu.hide()
// initialize events
document.onmousedown = mouseDown
document.onmousemove = mouseMove
document.onmouseup = mouseUp
if (n) document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP)
}
// Temperary Varibles
showing = false
// drag variables
dragActive = 0
dragObject = null
dragArray = new Array()
dragLayerX = 0
dragLayerY = 0
dragLayerZ = 0
function mouseDown(e) {
if (n) {
if (showing == true) {showing = false; setTimeout('menu.hide()',50)}
else if (((n && e.which == 1) || ie) && showing == false) {
if (n) {var xNow=e.pageX; var yNow=e.pageY}
if (ie) {var xNow=event.x; var yNow=event.y}
menu.moveTo(xNow, yNow)
menu.show()
showing = true
}
}
else if (ie) {
if (showing == true) {showing = false; menu.hide()}
else if (((n && e.which == 1) || ie) && showing == false) {
if (n) {var xNow=e.pageX; var yNow=e.pageY}
if (ie) {var xNow=event.x; var yNow=event.y}
menu.moveTo(xNow, yNow)
menu.show()
showing = true
}
}
}
function mouseMove(e) {
if (n) {var x=e.pageX; var y=e.pageY}
if (ie) {var x=event.x; var y=event.y}
}
function mouseUp(e) {
if (n) {var x=e.pageX; var y=e.pageY}
if (ie) {var x=event.x; var y=event.y}
dragActive = 0
// put more code here to do something else when finished a drag
}
function dynLayer(id,nestref,des) {
if (n) {
if (nestref) {
this.css = eval("document." + nestref + ".document." + id)
this.ref = eval("document." + nestref + ".document." + id + ".document")
}
else {
this.css = document.layers[id]
this.ref = document.layers[id].document
}
this.x = this.css.left
this.y = this.css.top
this.w = this.css.clip.width
this.h = this.css.clip.height
}
else if (ie) {
this.css = document.all[id].style
this.ref = document
this.x = this.css.pixelLeft
this.y = this.css.pixelTop
this.w = this.css.pixelWidth
this.h = this.css.pixelHeight
}
this.obj = id + "Object"
eval(this.obj + "=this")
this.moveBy = dynLayerMoveBy
this.moveTo = dynLayerMoveTo
this.show = dynLayerShow
this.hide = dynLayerHide
}
function dynLayerMoveBy(x,y) {
this.x += x
this.css.left = this.x
this.y += y
this.css.top = this.y
}
function dynLayerMoveTo(x,y) {
this.x = x
this.css.left = this.x
this.y = y
this.css.top = this.y
}
function dynLayerShow() {
if (n) this.css.visibility = "show"
else if (ie) this.css.visibility = "visible"
}
function dynLayerHide() {
if (n) this.css.visibility = "hide"
else if (ie) this.css.visibility = "hidden"
}
document.writeln('<STYLE TYPE=\"text\/css\">')
document.writeln('#menuDiv {position:absolute; left:0; top:0; width:' + MenuWidth + '; height:' + MenuHeight + '; clip:rect(0,' + MenuWidth + ',' + MenuHeight + ',0); background-color:000000; layer-background-color:000000; visibility:hidden;}')
document.writeln('#menuLayer1Div {position:absolute; left:0; top:0; width:' + (MenuWidth -1) + '; height:' + (MenuHeight -1) + '; clip:rect(0,' + (MenuWidth -1) + ',' + (MenuHeight -1) + ',0); background-color:888888; layer-background-color:888888;}')
document.writeln('#menuLayer2Div {position:absolute; left:1; top:1; width:' + (MenuWidth -3) + '; height:' + (MenuHeight-3) + '; clip:rect(0,' + (MenuWidth-3) + ',' + (MenuHeight -3) + ',0); background-color:D0D0D0; layer-background-color:D0D0D0;}')
document.writeln('#menuLayer3Div {position:absolute; left:0; top:0; width:' + (MenuWidth -2) + '; height:' + (MenuHeight-2) + '; clip:rect(0,' + (MenuWidth-2) + ',' + (MenuHeight -2) + ',0); background-color:C0C0C0; layer-background-color:C0C0C0;}')
document.writeln('#menuLayer4Div {position:absolute; left:1; top:1; width:1; height:' + (MenuHeight -3) + '; clip:rect(0,1,' + (MenuHeight -3) + ',0); background-color:E0E0E0; layer-background-color:E0E0E0;}')
document.writeln('#menuLayer5Div {position:absolute; left:1; top:1; width:' + (MenuWidth -3) + '; height:1; clip:rect(0,' + (MenuWidth -3) + ',1,0); background-color:E0E0E0; layer-background-color:E0E0E0;}')
document.writeln('#menuLayer6Div {position:absolute; left:3; top:3; width:' + (MenuWidth -6) + '; height:20; clip:rect(0,' + (MenuWidth -6) + ',20,0); background-color:8888FF; layer-background-color:8888FF;}')
document.writeln('A.JSmenu {color:black;}')
for (var k = 0; k < menuEle.length; k++) {
document.writeln('#input' + k + 'Div {position:absolute; left:3; top:' + (20 * (k+1) + 3) + '; width:' + (MenuWidth-6) + '; height:20; clip:rect(0,' + (MenuWidth -6) + ',20,0); background-color:C0C0C0; layer-background-color:C0C0C0;}')
}
document.writeln('<\/STYLE>')
document.writeln('<DIV ID="menuDiv">')
document.writeln('<DIV ID="menuLayer1Div"></DIV>')
document.writeln('<DIV ID="menuLayer2Div"></DIV>')
document.writeln('<DIV ID="menuLayer3Div"></DIV>')
document.writeln('<DIV ID="menuLayer4Div"></DIV>')
document.writeln('<DIV ID="menuLayer5Div"></DIV>')
document.writeln('<DIV ID="menuLayer6Div"><FONT Size=2><A CLASS="JSmenu" HREF="http://"><CENTER>Pop up Menü</CENTER></A></FONT></DIV>')
for (var k = 0; k < menuEle.length; k++) {
document.writeln('<DIV ID="input' + k + 'Div">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<FONT FACE="Helvetica" SIZE="1"><A CLASS="JSmenu" HREF="' + ItemEntry[k].adrs + '">' + ItemEntry[k].cap + '</FONT></A></DIV>')
}
document.writeln('</DIV>')
init()
</SCRIPT>

Der body-Tag muss so aussehen:

<body onload="init()">

 

Hinweis: Wenn du dir hier die Quelltexte kopierst, dann füge sie am besten mit einen Texteditor in dein HTML-Dokument ein, da die meisten Webeditoren es als normalen Text interpretieren.
 



Copyright Dunkel & Iwer GbR - Alle Rechte vorbehalten