passare un oggetto html ad una funzione

[GabbOne]

Salve

Vi pongo un sempice quesito

Nel seguente esempio riesco a puntare ad uno oggetto html presente nel documento corrente
<img id="pluto">

punt=document.getElementById("pluto");

cosi facendo posso giocare con i metodi

punt.style e via dicendo(il mio vero obiettivo)

Adesso vorrei però cambiare le carte in tavola... mi spiego meglio

Al passaggio del mouse su un elemento html vorrei richiamare una certa funzione e passargli come argomento l'oggetto html stesso per potr giocare sugli attributi dell'oggetto style di quel elemento senza però dovergli passare l'id dell'oggetto html

come posso fare per risolvere questo problema?

[whisher]

Una cosa del genere
obj.onclick=function()
{
test(this.className);
}

[Xinod]

l' elemento stesso e' this

ci sono determinati contesti in cui non e' cosi' elementare usarlo
ma se e' questo il caso devi farcelo capire tu con un esempio
ciao

[GabbOne]

Io ho provato in questa maniera ma non funziona

<li onmouseover="function1()">...

function function1()
{

this.style.color="red";//per cambiare il colore del testo

}

Questo è un esemppio che ho provato dovro giocare in seguito con l'attributo display ma penso che sia la stessa cosa

[Xinod]

ma il riferimento all' elemento lo devi passare come argomento della funzione

<li onmouseover="function1(this)">...


function function1(el)
{

el.style.color="red";//per cambiare il colore del testo

}

[GabbOne]

Ok adesso funziona perfettamente grazie
....sapevo che doveva essere una cosa sempice


Adesso ho un'altra piccola domanda

una volta che passo l'oggetto alla funzione (come fatto sopra) posso puntare ad un figlio di questo elemento per continuare cosi a giocare con l'oggetto style di quest'ultimo

es

function function1(el)
{
obj=figlio di el;//posso assumere nel mio caso che el ha un'unico figlio
obj.style.color="red";//per cambiare il colore del testo

}

[whisher]

el.parentNode

<div>


</p>
</div>
se el è p parentNode sarà div.

dai un occhio qui

Scusa ho letto male
devi utilizzare el.firstChild stai attento perchè non tutti
i browser implementano DOM allo stesso modo
per renderti conto dai un occhio qui

[GabbOne]

ragazzi non mi fuziona perche?????????????????!


html

<li class="voceCorrente" onmouseover="function1(this)" onmouseout="function2()">Seconda Voce
	   <ul>//impostato a display=none nel css
		[*]Prima Sotto voce
		[*]Seconda Sotto voce
		[*]Terza Sotto voce	
	[/list]

Js

function function1(el)
		{
			
			
			el.childNodes[0].style.display="block";
				
		}

Modifica :

Scusate effettivamente non devo puntare a .childNodes[0] perche questo punta al tag a , ma devo puntare a .childNodes[1] che punta al tag ul ma anche cosi non funziona infatti se scrivo <ul name="pluto">
e faccio alert(el.childNodes[1].name);
mi risponde con una stringa vuota

[whisher]

function function1(el){
    el.getElementsByTagName('ul')[0].style.display="none";
} 

Ho messo style.display="none" per prova
questo è un metodo + semplice di accedere al dom
per lo meno è + cross-browser per testare il DOM
è molto utile fare una cosa del genere alert(el.tagName)
per sapere dove ti trovi ma questo cambia da browser
a browser come detto sopra

[GabbOne]

Adesso provo anche il tuo metodo perche mi sembra piu elegante comunque utilizzando il childNodes ho notato che l'elemento [0] punta correttamente al tag a l'elemento [1]sembra che non punti a niente mentre l'elemento [2] punta a ul e il tutto poi funzione . il fatto strano è che come si vede dal codice postato in precedenza il tag[*] puntato nella funzione da "el" ha solo 2 figli un tag <a> e <ul> e no tre elementi (almeno mi pare ) cmq utilizzando la seguente forma il codice funziona si su Mozilla che IE

html

<li  class="voceCorrente" onmouseover="function1(this)" onmouseout="function2(this)">Seconda Voce
		 <ul name="re">
		[*]Prima Sotto voce
		[*]Seconda Sotto voce
		[*]Terza Sotto voce	
	[/list]

Js

<script type="text/javascript">
		function function1(el)
		{
			
			el.childNodes[2].style.display="block";
				
		}
		function function2(el)
		{

			el.childNodes[2].style.display="none";
		}
</script>

Questa discussione è finita con esito moooooooooolto positivo e abbiamo toccato parecchi argomenti , la cosa bella è che alla fine ho risolto i miei problemi con 2 sole righe di codice ...fantastico


Grazie per l'aiuto