- Home
- Categorie
- Coding e Sistemistica
- Javascript & Framework
- document.onmouseout (lo script + ovvio?)
-
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
-
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.
-
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.
-
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.
-
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
-
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.
-
//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?