attivazione immagini con rollover

[botvlaplayer]

Buongiorno!!

è la prima volta che scrivo, non ho trovato su questo forum l'argomento che mi interesserebbe:

allora: sto facendo un sito con php e css.

la homepage dovrebbe essere così strutturata: nella metà sinistra ci dovrebbe essere un menu verticale, che ho già creato; nella metà destra un'immagine.

il fatto è che l'immagine dovrebbe cambiare quando si passa col puntatore sopra le diverse voci di menu (6 voci: sei immagini diverse)

ora questa pagina è strutturata con due div affiancati in orizzontale, destro e sinistro, in uno ci sta il menu, nell'altro le immagini, quindi non si può risolvere in CSS con :hover, poichè non esiste penso un descrittore che metta in relazione oggetti non direttamente annidati o affiancati nel codice.... (tipo .vocedimenu:hover img {})

come potrei risolvere la cosa?

[poyel]

Ciao botvlaplayer,
un'idea che mi è venuta in mente è quella di impostare le varie immagini come background del secondo div, e utilizzando javascript (evento onmousehover degli elementi del menu) cambiare il valore dell'attributo background del div.

Ciao Ciao

[botvlaplayer]

grazie del consiglio.... devo premettere che non me ne intendo molto di javascript, e quindi mi sono letto la guida....

ma non funziona ancora...

ho realizzato questo, che sta nell'header

<script type="text/javascript">
function cambiacolore(colore){
	$("#ret").css("background-color", +colore);
	}
</script>

oltre ad aver richiamato la libreria jquery ovviamente

la funzione invece è richiamata qui:

<a id='uno' onmouseover="javascript:cambiacolore('#F00')">1</a>

passando sopra un div con id ret, inizialmente grigio, dovrebbe diventare rosso...

dove sbaglio?

[poyel]

Se non ti interessa per altro non c'è bisogno di usare jquery basta utilizzare javascript per interagire in maniera semplice con gli elementi della pagina.

<script type="text/javascript"> 
function cambiacolore(colore){ 
document.getElementById("rect").style.background = colore;
} 
</script>

1

Ho modificato un po quello che hai scritto tu perchè c'erano un po di errori.

$("#ret").css("background-color", + colore);
il più non ci va visto che è già presente la virgola per separare l'attributo dal valore

<a id='uno' onmouseover="java-script:cambiacolore('#F00')">1</a>
javascript va scritto senza il trattino e inserisci sempre l'href nel tag.

Ciao Ciao

[botvlaplayer]

ti ringrazio tanto!!

funziona!!!

un'ultima cosa... c'è una qualche istruzione che resetti i valori a quelli contenuti di default nel file .css separato?

[poyel]

che io sappia non c'è ma può darsi che mi sbagli. Per ovviare potresti semplicemente reimpostare il colore del div a quello messo nel css. Sempre utilizzando la unzione cambiacolore però associandolo ad esempio all'evento onmouseout:

...
1

Fammi sapere.

[botvlaplayer]

perfetto!! grazie!!!
sto cominciando ad orientarmi...

@poyel:
sai se c'è qualche risorsa online che habbia un prospetto completto di tutti i vari comandi (js, dom, jquery, php css etc) con relative compatibilità?

[poyel]

w3schools è il sito di riferimento per imparare. E' il sito della w3c l'organizzazione che si occupa degli standard sul web. Sono presenti moltissimi tutorial ed esempi.

Per il php nello specifico ti consiglio il sito internet php.

Invece per JQuery niente di meglio che il sito di JQuery :P

Per tutto il resto c'è masterdard

[mucu]

w3schools non è il sito di riferimento, ma soltanto un compendio
w3schools è un sito commerciale ben indicizzato, ma che non ha alcun rapporto con w3c

[poyel]

ops pardon

c'hai ragione