Immagini hover

[Craig Willmore]

Ciao, sapete dirmi le modifiche che devo apportare al css affinchè i link di immagini cambino aspetto al passaggio del mouse, analogamente allo stato hover dei link testuali?
(Allo stato attuale le immagini sono in una classe specifica e vengono normalmente richiamate dalla pagina html)
ciao

[Zweer]

prima di chiedere controlla se magari qualcuno ha già fatto la stessa domanda...e l'ultima volta che questa domanda è stata fatta era ieri...

link

ciauz ^^

[Craig Willmore]

Ho già provato in quel modo ma non mi visualizza l'immagine in hover, nell'html come devo dichiararla? Dato che le mie immagini sono tutte in un'unica classe, in questo modo dovrei crearne una per ciascuna immagine?

[Zweer]

non ho capito che intendi dire...sarebbe meglio che postassi il tuo codice che almeno cerco di capire che vuoi ottenere...^^

[Craig Willmore]

In origine nel css mettevo

#sidebar .disposizione {
float: right;
margin: 0;
padding: 0;
border: none;
}

Tutte le immagini vengono allineate a destra, e quando aggiungevo un'altra immagine nella stessa classe, essa affiancava la precedente senza sovraimporla

Nell'html mettevo

[img]immagine.jpg[/img]
etc..

OK

Ora se volessi mettere immagini che cambiano al passaggio del mouse dovrei specificare tutte le immagini nel css, come nell'esempio che hai linkato, ma a quel punto come faccio affinchè siano disposte automaticamente secondo le specifiche di "disposizione", per richiamarle cosa metto nella pagina html?
ciao

[Zweer]

alura...puoi ricorrere a due stratagemmi:

- crei una classe uguale per tutte le immagini (quella di posizione che hai fatto tu) e poi ad ognuna applichi la classe specifica (o l'identificativo, meglio) che la fa cambiare (potresti anche metterlo come sfondo di elementi inline...)

- crei l'effetto rollover direttamente sull'immagine (ma per avere compatibilità con tutti i browser se non mi sbaglio devi anche mettere un link) con funzioni javascript che trovi ovunque (se vuoi te le posto...)

questi sono i modi, è ovvio che una cosa "generale" non la puoi fare, ma devi creare varie classi o vari link ^^

[Mega69]

Il rollover può essere fatto facilmente anche senza usare javascript.
Quì ho preparato un piccolo tutorial:
http://www.sitomega.net/phpbb2/viewtopic.php?t=15
L'unica modifica che devi fare è ( oltre a quella di cambiare i path e le dimensioni del tag a ovviamente ), di usare una classe al posto di un id.

[Craig Willmore]

Grazie mille a entrambi.
Può andare una soluzione del genere?

#sidebar .disposizione {
float: right;
margin: 0;
padding: 0;
border: none;
}

#elemento1 a{
display:block;
background:transparent url(imgPrima.gif);
width:200px;
height:200px;
}

#elemento1 a:hover {
background:transparent url(imgSeconda.gif);
}


nell'html metto
<div id="elemento1">

</div>

[Zweer]

a prima vista direi proprio di sì, era proprio quello che intendevo parlando di css ^^

[Craig Willmore]

Ho provato ma niente, non compare nulla.