Cambiare sfondo di un Div tramite hover di vari links: help!

**magnotta** · 10-03-2010, 15:36

Salve
Vorrei sapere se questa mia esigenza è realizzabile tramite css
Mi spiego

Ho un menu laterale con una serie di links (link1, link2, link3 etc)
Un div contenitore con un'immagine di sfondo
Vorrei che quando passo con il mouse sopra i diversi links mi cambi l'immagine di sfondo del div contenitore, a seconda del link dove passo sopra con il mouse
Ad esempio passo sopra il link1 e lo sfondo del div diventa image1.jpg, passo sopra il link2 e diventa image2.jpg....e così via

E' possibile?! Avete degli esempi in rete?
Grazie mille!

**ilsangue** · 10-03-2010, 18:40

Il div contiene il tag a?

NO : allora ti devi avvalere di javascript così da associare ad una precisa azione l'immagine 1 alll' id 1, l'immagine 2 all'id 2 e così via...

SI' : potresti magheggiare con i css tramite il valore position ma, dipende molto dal livello di complessità della tua pagina e dalle tue conoscenze in merito ai css... altrimenti esce solo un gran pasticcio...

**miki003** · 10-03-2010, 18:59

codice:

<div id="cambia">
Link1
</div>

**magnotta** · 10-03-2010, 19:40

grazie miki003, mi hai anticipato sul tempo

nel frattempo infatti avevo trovato anche io sta funzioncina simile...

<html>
<head>

<script type="text/javascript">
function swapImage(id, src) {
document.getElementById(id).style.backgroundImage = "url('" + src + "')";
}
</script>

</head>

<body>

Hover Element
<div id="swapDiv">Swapped BG</div>

</body>
</html>

Funziona corretamente....
L'unica cosa che vorrei provare è questa, e cioè far si che al passaggio sopra il mouse sul link si carichi un background nel div "swapDiv" e anche un background in un altro div, che chiamerò ad esempio "swapDiv2".
Ho provato a duplicare nell'head la funzione del javascript chiamando la seconda swapImage2, in questo modo:

<script type="text/javascript">
function swapImage(id, src) {
document.getElementById(id).style.backgroundImage = "url('" + src + "')";
}
</script>

<script type="text/javascript">
function swapImage2(id, src) {
document.getElementById(id).style.backgroundImage = "url('" + src + "')";
}
</script>

ora l'unico problema è "richiamare" nel medesimo link con l'evento onmouseover le due funzioni contemporaneamente! Ho provato così ma non va (sono un emerito niubbo sul js, lo so

)

Hover Element

<div id="swapDiv">Swapped BG</div>
<div id="swapDiv2">Swapped BG 2</div>

Mi potete suggerire (se c'è!) la sintassi giusta per richiamare questi due background nei due diversi div con lo stesso onmouseover? O se c'è un escamotage diverso?

Grazie

**evan75** · 10-03-2010, 20:47

ti basta solo una funzione. non hai bisogno di duplicarla.

Codice PHP:


[url="#"]Hover Element[/url]

saluti

**ilsangue** · 10-03-2010, 20:51

non so se ho capito bene: comunque una soluzione simile la trovi su www . studio32 . it
sulla pagina "staff" o "contatti", l'effetto è chiaro.

ciao!

Discussione: Cambiare sfondo di un Div tramite hover di vari links: help!

Strumenti discussione

Ricerca discussione

Visualizza

Cambiare sfondo di un Div tramite hover di vari links: help!

Permessi di invio