Visualizzazione dei risultati da 1 a 10 su 10

Discussione: menù tasto destro

  1. #1

    Un altra pillola prima di partire....

    Bene ragazzi, visto che devo partire vi scrivo un altra pillola....L'idea mi è nato "sempre" dopo aver studiato dei tutorial del mitico HTML.it e di JSDIR sui menu a tasto destro
    o un menu sensibile al tasto destro fate come volete...Ultimamente però sfogliando dei tutorial di HTML.it ne ho trovato un altro abbastanza carino (3d). Cmq il menu a tasto destro di JSDIR non funzionava quasi su nessun navigatore di vecchia generazione, quindi ne ho creato uno IO...Funziona su tutti i browser tranne su tutte le versioni di OPERA...ECCOLO:

    <html>
    <head>
    <title></title>

    <style type="text/css">
    <!--
    body {font-family:arial}
    a {font:bold 1pc arial; color:blue}
    a:link, a:active, a:visited {font:normal 1pc arial; color:black; text-decoration:none}
    a:hover {color:black; text-decoration:none}
    table {border:#333333 2px solid; background-color:gray}
    -->
    </style>

    <script language="javascript">
    <!--
    var x=null; var y=null;

    function visual(event) {
    if(document.layers) {
    if(event.which==3) {
    document.layers["menu"].top=y;
    document.layers["menu"].left=x;
    document.layers["menu"].visibility="show";
    return false;
    };
    }
    else if(document.all) {
    document.all["menu"].style.top=y;
    document.all["menu"].style.left=x;
    document.all["menu"].style.visibility="visible";
    return false;
    }
    else if(document.getElementById&&!document.all) {
    document.getElementById("menu").style.top=y;
    document.getElementById("menu").style.left=x;
    document.getElementById("menu").style.visibility=" visible";
    return false;
    }
    };

    function eventXY(event) {
    if(document.layers) {
    x=event.pageX;
    y=event.pageY;
    }
    else if(document.all) {
    event=window.event;
    x=event.clientX;
    y=event.clientY;
    }
    else if(document.getElementById&&!document.all) {
    x=event.clientX;
    y=event.clientY;
    }
    };

    function noVisual() {
    if(document.layers) {
    document.layers["menu"].top=0;
    document.layers["menu"].left=0;
    document.layers["menu"].visibility="hide";
    }
    else if(document.all) {
    document.all["menu"].style.top=0;
    document.all["menu"].style.left=0;
    document.all["menu"].style.visibility="hidden";
    }
    else if(document.getElementById&&!document.all) {
    document.getElementById("menu").style.top=0;
    document.getElementById("menu").style.left=0;
    document.getElementById("menu").style.visibility=" hidden";
    }
    };

    function colora(questo, colore) {
    if((document.all)||(document.getElementById&&!docu ment.all)) questo.style.backgroundColor=colore;
    };

    function funX() {
    window.status=funX.arguments[0];
    return true;
    };

    if(document.layers) {
    document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.CLICK);
    document.onmousedown=visual;
    };

    if((document.all)||(document.getElementById&&!docu ment.all)) {
    document.oncontextmenu=visual;
    };

    document.onmousemove=eventXY;
    document.onclick=noVisual;
    //-->
    </script>

    </head>
    <body bgcolor="black">


    <div id="menu" style="position:absolute; visibility:hide; visibility:hidden; z-index:5">
    <script language="javascript">
    <!--
    function len(obj) {
    var k=0;
    while (obj[k]!=undefined) k++;
    return k;
    }

    var menuAll=null;
    menuAll=new Object();
    menuAll[0]={URL:"articoli.htm",NAME:"Articoli"};
    menuAll[1]={URL:"chat.htm",NAME:"Chat"};
    menuAll[2]={URL:"mailto:brunelleskosi@tiscali.it?subject=x lo Staff BRUNELLESKOSI",NAME:"E-Mail"};
    menuAll[3]={URL:"forum.htm",NAME:"Forum"};
    menuAll[4]={URL:"javascript:location.reload();",NAME:"HomePa ge"};
    menuAll[5]={URL:new String("view-source:"+window.location), NAME:"Vedi HTML"};
    menuAll[6]={URL:"svago.htm",NAME:"Svago"};
    menuAll.length=len(menuAll);
    var tabella="<table width=\"120\">";

    for(var x=0; x<menuAll.length; x++) tabella+="<tr><td align=\"center\" onmouseover=\"colora(this, \'rgb(10,36,106)\');\" onmouseout=\"colora(this, \'gray\');\"><a href=\""+menuAll[x].URL+"\" title=\""+menuAll[x].NAME+" - BRUNELLESKOSI\" onmouseover=\"return funX(\'"+menuAll[x].NAME+" - BRUNELLESKOSI\');\" onmouseout=\"return funX(\'\');\">"+menuAll[x].NAME+"</a></td></tr>";

    document.write(tabella+"</table>");
    //-->
    </script>
    </div>



    <DIV
    style="FONT-WEIGHT: bold; FONT-SIZE: 56px; LEFT: 50px; WIDTH: 600px; COLOR: #444444; FONT-STYLE: normal; FONT-FAMILY: impact; POSITION: absolute; TOP: 120px">Prova
    a cliccare il tasto destro del mouse....</DIV>
    <DIV
    style="FONT-WEIGHT: bold; FONT-SIZE: 56px; LEFT: 46px; WIDTH: 600px; COLOR: orange; FONT-STYLE: normal; FONT-FAMILY: impact; POSITION: absolute; TOP: 116px">Prova
    a cliccare il tasto destro del mouse....</DIV>


    </body>
    </html>

    Giocate voi con i lo stile del menu...Cmq un avviso le line di codice potevano essere diminuite di molto, pero ho preferito cosi....Un ultima cosa se volete rendere il codice valido per HTML salvate l'intero codice JS in un file esterno cosi da nascondere il codice JS che contiene HTML al validatore del w3c.

  2. #2
    Visto che stai partendo lascia perdere la programmazione e goditi le vacanze, no?

  3. #3

    MAI!

    Questa è una cosa che non capiterà mai!

  4. #4
    Utente di HTML.it
    Registrato dal
    May 2001
    Messaggi
    573
    Ciao a tutti scusate se mi intrometto in un forum in cui non vengo quasi mai...

    Di menù con tasto destro se ne trovano come esempi, compreso questo molto carino postato da Ugly: solo, mi chiedevo come si a fare in modo che il menù personalizzato appaia solo su un determinato link? si può fare?

    Grazie a tutti,
    Elisa

  5. #5
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Allora devi applicare l'evento oncontextmenu su quel particoalre oggetto (nel tuo caso il link)

    Nota: non e` un evento standard, per cui non ne e` garantito il funzionamento in tutti i browser.
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  6. #6
    Utente di HTML.it
    Registrato dal
    May 2001
    Messaggi
    573
    si si lo so.

    Dunque da profana ho preso spunto da un esempio trovato su html e ho fatto così:

    <html>
    <head>
    <title>Esempio Personalizzazione del tasto destro del mouse: un menu | PRO.HTML.it</title>
    <basefont size="2" face="Verdana">

    <style type="text/css">
    div.menuLinks {
    background: #EEEEEE;
    font-size: 11px;
    font-family: Verdana;
    width: 130px;
    padding: 3px;
    border-top: Solid 1px #CCCCCC;
    border-left: Solid 1px #CCCCCC;
    border-right: Solid 1px #CCCCCC;
    cursor: Default;
    }
    </style>

    <script language="javascript">
    <!--
    function MenuTxDx() {
    var sx = window.event.x;
    var tp = window.event.y;
    menu.style.display = '';
    pos.style.left = sx;
    pos.style.top = tp;
    return false;
    }
    function link(url) {
    location.href = url;
    }
    //-->
    </script>

    </head>
    <body link="#003366" alink="#FF3333" vlink="#003366">

    <div align="center">Cliccate con il tasto destro del mouse ... </div>








    <div id="menu" style="display: None;">
    <div id ="pos" style="position: Absolute;">
    <div class="menuLinks" onMouseOver="this.style.color='#FFFFFF';this.style .background='#003366'" onMouseOut="this.style.color='#000000';this.style. background='#EEEEEE'" onClick="link('http://pro.html.it')">Filtro in base a selezione</div>
    <div class="menuLinks" onMouseOver="this.style.color='#FFFFFF';this.style .background='#003366'" onMouseOut="this.style.color='#000000';this.style. background='#EEEEEE'" onClick="link('http://www.html.it/javascript')">JavaScript</div>
    <div class="menuLinks" onMouseOver="this.style.color='#FFFFFF';this.style .background='#003366'" onMouseOut="this.style.color='#000000';this.style. background='#EEEEEE'" onClick="link('http://pro.html.it/lista_articoli.asp/idcat_11/')">JavaScript Pro</div>
    <div class="menuLinks" style="border-bottom: Solid 1px #CCCCCC;" onMouseOver="this.style.color='#FFFFFF';this.style .background='#003366'" onMouseOut="this.style.color='#000000';this.style. background='#EEEEEE'" onClick="link('javascript:window.close()')">Chiudi la finestra</div>
    </div>
    </div>


    </p>
    <div align="center">Chiudi questa finestra</div>
    </body>
    </html>
    ma come si fa a far chiudere il menù quando si clicca altrove?

    Grazie Elisa

  7. #7
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    <body onclick="document.getElementById('menu').syle.disp lay='none';">

    Nota: ho usato la sintassi DOM. Nel tuo script hai sempre usato la sintassi abbreviata di IE
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  8. #8
    Utente di HTML.it
    Registrato dal
    May 2001
    Messaggi
    573
    eheheh nn sono così esperta! Cmq grazie mille!

    Elisa

  9. #9
    Utente di HTML.it
    Registrato dal
    May 2001
    Messaggi
    573
    scusa se rompo nuovamente ma non funziona...
    mi dice document.getElementById(...) nn è nullo o nn è un oggetto

  10. #10
    Utente di HTML.it
    Registrato dal
    May 2001
    Messaggi
    573
    ho anche un'altra domanda in proposito:
    è possibile negli eventi onContextMenu="return MenuTxDx()" onClick="menu.style.display='None'"
    passare un parametro in podo tale che possa essere usato quando mi compongo il link del menù onClick="link('http://.....?parametro=valore')">?


Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.