Java & JavaScript


Home
Applets
Scripts
   Navigation:
 · Kontextmenü
 · Linkwechsler
   Dialogboxen:
 · Alert
 · Alert 2
 · Confirm
 · Prompt
   Animation:
 · Kreis
 · Kreis 2
 · Kreis 3
 · Drei Kreise
 · Spirale
 · Planetarium
 · Globus
   Grafik-Effekte:
 · Clipping
 · Clipping 2
 · Clipping 3
 · Alpha-Clipping
 · Fading
 · Wellenmuster
 · Wellenmuster 2
   Bildschirmschoner:
 · Proto
 · Marquee
 · Donut
 · Worm
 · Mondrian
 · Pacman
   Datum & Uhrzeit:
 · Countdown
 · Countup
 · Wochentag
 · Last Modified
   Fraktale:
 · Apfelmännchen
 · Apfelmännchen 2
 · Juliamenge
 · Juliamenge 2
 · C-Wert-Generator
   Mathematik:
 · Primzahlen
 · Primzahlen 2
   Verschiedenes:
 · Dynamic Popup
 · TextArea Counter
 · Warteschleife
 · Mausschreiber
Gäste
Kontakt

- JavaScript : Navigation : Kontextmenü -


Ein individuelles Kontextmenü mit JavaScript für die eigene Homepage.

Erfolgreich getestet mit Internet Explorer 5.5 und 6.0, Netscape Navigator 6.1 - 6.22, 7.0 und 7.1, sowie Mozilla 1.0, 1.21 und 1.4.

Im IE 4 und früher, NN 6.01 und früher oder Opera wird weiterhin das normale Kontextmenü angezeigt.
Für alle Browser gilt die Einschränkung, dass das Kontextmenü z.B. von einem Java-Applet überlagert wird.


Demo: rechter Mausklick ... !


JavaScript-Quellcode von KontextMenue.js:
(vollstandige Layoutangaben im Download)

// Nur für IE 5+ und NN 6+
ie5=(document.getElementById && document.all && document.styleSheets)?1:0;
nn6=(document.getElementById && !document.all)?1:0;

// Kontextmenü initialisieren
if (ie5 || nn6) {
  menuWidth=122, menuHeight=183;
  menuStatus=0;

  document.write(
     "<div id='menu' style='position:absolute;top:-250;left:0;z-index:100'>"
    +"<table width='"+menuWidth+"' height='"+menuHeight+"'>"
    +"<tr><td><a href='javascript:history.back()'>Zurück</a></td></tr>"
    +"<tr><td><a href='javascript:history.forward()'>Vorwärts</a></td></tr>"
    +"<tr><td><a href='javascript:location.reload()'>Aktualisieren</a></td></tr>"
    +"<tr><td><a href='javascript:viewSource()'>Quelltext</a></td></tr>"
    +"<tr><td><a href='javascript:print()'>Drucken</a></td></tr>"
    +"<tr><td><a href='javascript:openFrameInNewWindow()'>Neues Fenster</a></td></tr>"
    +"</table></div>");

  // Rechter Mausklick: Menü anzeigen, linker Mausklick: Menü verstecken
  document.oncontextmenu=showMenu; //oncontextmenu geht nicht bei NN 6.01
  document.onmouseup=hideMenu;
}

// Kontextmenü anzeigen
function showMenu(e) {
  if(ie5) {
    if(event.clientX>menuWidth) xPos=event.clientX-menuWidth+document.body.scrollLeft;
    else xPos=event.clientX+document.body.scrollLeft;
    if (event.clientY>menuHeight) yPos=event.clientY-menuHeight+document.body.scrollTop;
    else yPos=event.clientY+document.body.scrollTop;
  }
  else {
    if(e.pageX>menuWidth+window.pageXOffset) xPos=e.pageX-menuWidth;
    else xPos=e.pageX;
    if(e.pageY>menuHeight+window.pageYOffset) yPos=e.pageY-menuHeight;
    else yPos=e.pageY;
  }
  document.getElementById("menu").style.left=xPos;
  document.getElementById("menu").style.top=yPos;
  menuStatus=1;
  return false;
}

// Kontextmenü verstecken
function hideMenu(e) {
  if (menuStatus==1 && ((ie5 && event.button==1) || (nn6 && e.which==1))) {
    setTimeout("document.getElementById('menu').style.top=-250",250);
    menuStatus=0;
  }
}

// Quelltext anzeigen
function viewSource() {
  var w=window.open("view-source:"+window.location,'','resizable=1,scrollbars=1');
}

// Seite in neuem Fenster öffnen
function openFrameInNewWindow() {
  var w=window.open(window.location,'','resizable=1,scrollbars=1,status=1');
}


Download  KontextMenue.zip (Demo mit vollständigem Layout ca. 2 kb)




© 2001-2004 Albert Kluge - Alle Rechte vorbehalten
Impressum | Datenschutz | eMail