• Super User

    document.onmouseout (lo script + ovvio?)

    Ho questa risma di codice:

    document.onmouseout= colormenu;
    function colormenu(e){
        submenu=new Array();
        submenu[0]="home";
        submenu[1]="software";
        submenu[2]="hardware";
        //compatibilità per IE
        if (!e) var e = window.event;
        var oElement = (e.target) ? e.target : e.srcElement;
        for(var x=0; x<=2;x++){
            if(oElement.id==submenu[x]){
      document.getElementById(oElement.id).style.backgroundColor="#0066CC";
                document.getElementById(oElement.id).style.color="#FFFFFF";
                if(submenu[x] == "home"){ document.getElementById('homeLink').style.color="#FFFFFF";}
                
            }
        }
        
    }
    

    Questa semplicemente è una funzione che colora un div al passaggio del mouse.
    Però! Se io sposto il mouse il colore non mi torna come prima.
    Quale potrebbe essere la via più semplice (in termini di righe di codice) sull'elemento onmouseout?
    Potrei ripetere la stessa funzione tale e quale ma sul "document.onmouseout" però mi pare uno spreco di byte.

    Idee? =D


  • User Attivo

    Guarda questo esempio seplice:

    
    <div class="CellOff"  onmouseout="this.className='CellOff';" onmouseover="this.className='CellOn';" >
    <h2>About me</h2></div>
    
    

    ed il css:

    
    div.CellOn {
    	background: #AFEEEE;	
    }
    div.CellOff {
    	background: #F0F7FF;		
    }	
    
    

    lo script che hai tu sembra un attimo più complicato, sembra che gestica anche il submenu. Poi io ho messo il codice attaccato ad un <div> ma puoi usarlo anche s altri tag tipo il tag <a href=""> del link, credo.


  • Super User

    Ah grazie però questa soluzione volevo evitarla.
    Semplicemente perchè ho gia un evento "onclick" e vedere sul mio html troppi eventi mi fa un pò denigrare l'integrità del codice =D
    Invece volevo applicarlo unicamente ad un js che in automatico rivela il click sul div senza doverlo richiamare sull'html.


  • User Attivo

    Io sui miei bottono ho tutti e 3 gli eventi, onclick, onmouseover e onmouseout, non mi da problemi, comunque la tua è una buona idea di voler fare tramite js separato, comunque tornando al tuo codice iniziale, credo che per far tornare lo sfondo del colore iniziale tu debba usare l'evento onmouseout.


  • Super User

    Si scusa nel copiare e incollare ho sbagliato e ho messo "onmouseout = colormenu;" invece di "onmouseover".
    In ogni caso è proprio li che ho un problema.
    Siccome se faccio l'evento "onmouseout" dandogli dei parametri scritti rischio di intasare il codice html invece di riutilizzare il css originale.
    C'era un modo ( getComputedStyle ecc ecc? ) per rileggere i valori del css.
    Così semplicemente ritorno ai parametri di base =D
    mh? =D


  • User Attivo

    Come ho fatto io nel mio esempio che assegno la classe del css e ho lo stato attivo e lo stato inattivo, e le riassegno ai vari in e out del mouse.


  • Super User
    //FUNZIONE PER L'APERTURA E CHIUSURA DEI SUB-MENU
    function openSubm(subname,div){
        var Submenu=document.getElementById(subname); //id del submenu da aprire
        var divName=document.getElementById(div); //nome del div su cui ho cliccato
        //IE*
        if(Submenu.currentStyle){
            var displayStatus=Submenu.currentStyle.display;
            if(displayStatus=='none'){
                Submenu.style.display='block';
                Submenu.style.visibility='visible';
                divName.style.background="url(/easysystem/immagini/bulletTD.jpg) no-repeat 5px 6px"            
            }else{
                Submenu.style.display='none';
               divName.className="titleitem";
            }
        }
        
        //MOZILLA FIREFOX
        else if(document.defaultView){
            var displayStatus=document.defaultView.getComputedStyle(Submenu, null).getPropertyValue("display");
            if(displayStatus=='none'){
                Submenu.style.display='block';
                Submenu.style.visibility='visible';
                divName.style.background="url(/easysystem/immagini/bulletTD.jpg) no-repeat 3px 6px";
            }else{
                Submenu.style.display='none';
                divName.className="titleitem";
            }
        }
    }
    ```   Ho provato a metterlo qui ma non funziona. Ma javascript non era impossibilitato alla lettura dei nomi "class" se non con uno script addizionale?