Cambiare immagine al passaggio del mouse

[Lukiep]

Ciao a tutti, è possibile fare cambiare immagine al passaggio del mouse sopra un'altra immagine.

Per esempio se ho 2 immagini che rappresentano un pulsante spento e lo stesso pulsante accesso, è possibile sostituire l'immagine spento con accesso quando passa sopra il mouse con i css? o devo usare javascript?

Grazie ciao
Luca

[TheBestNeo]

Ho trovato una cosa che può venirti utile qui:

Link

[Lukiep]

LOOOL
Grazie mille, ma verterò verso javascript ^^ per questioni di comodità
Grazie lo stesso
Luca

[TheBestNeo]

In merito al link che ho fornito... Vorrei ricevere un aiutino...

La stessa immagine viene messa come background delle miniature che poi come quello del contenitore al passaggio del mouse.
Le miniature però vengono create nel CSS, quindi se io ipotizziamo ho diverse pagine di foto viene un css con 300 righe(una per foto).
Volevo fare in modo invece di passargli le foto tramite l'html, poi il css dovrebbe provvedere al resize per le miniature. Ma non lo fa.
Dovrei dirgli:
HTML

<span>[img]IMAG0951.JPG[/img]</span>

Dove xx è l'altezza in px della miniatura. Ma poi anche l'immagine che dovrebbe essere ingrandita appare così.

Suggerimenti?

[TheBestNeo]

Possibile che di 3 aiuti che ho richiesto nessuno sappia come fare? Sono ben accetti anche solo consigli e suggerimenti.

[Lukiep]

Scusa ma non sono così esperto da aiutarti, mi dispiace.

[TheBestNeo]

Grazie cmq... Almeno qualcuno ha risposto!

[pierofix]

Vi sono due tipi di immagini: le immagini grafiche e le immagini di contenuto. Del primo gruppo fanno parte gli sfondi colorati, i pulsantini e tutto ciò che contribuisce a formare la grafica del documento; del secondo invece fanno parte quelle immagini che non sono grafiche ma parte integrante delle informazioni della pagina (ad esempio la foto di una persona all'interno della sua biografia).

A quanto si evince dalla tua spiegazione, le immagini in gioco sono 'di contenuto', quindi non si possono gestire come sfondi tramite CSS ma devono essere parte integrante del documento (e quindi passate via XHTML).

Se ci fai un esempio concreto di cosa vuoi fare (spiegandoci bene anche il contesto della pagina) magari potremmo trovare una soluzione più indicata.

[TheBestNeo]

Grazie della risposta.
Provo a spiegare ciò che voglio fare...
Il link da me inserito qualche risposta fa, fa vedere un tipo di galleria di immagini. Esse sono attribuite come sfondo alle relative miniature (e quindi grafiche) mentre le rispettive immagini ingrandite sono di contenuto. Ora passiamo ai codici:

CSS

a.mini1{background:url(Images/album/xx2006/xx.JPG);}

Questa va messa nel CSS e in pratica è la miniatura sulla quale poi al passaggio del mouse viene mostrata questa:

HTML

<span>[img]xx.JPG[/img]</span>

Quello che voglio riuscire a fare io, è evitare di impostare le miniature nel css. Questo perchè fino a che ho 30 foto vabbè non importa. Se poi un giorno ho 300 foto mi sembra inutile richiamare un css con 300 dichiarazioni di miniature per poi usarne cmq 6 per pagina.

Vorrei quindi riuscire a dichiarare le miniature nell'html.



Posto tutto il codice css relativo:

div#slide{
position: relative;
width: 500px;
height: 400px;
border: 5px groove silver;
margin: auto;
background-color: silver;
}

a.mini1{background:url(Images/album/xx2006/xx.JPG);}
a.mini2{background: url(Images/album/xx2006/xx.JPG);}
a.mini3{background:url(Images/album/xx2006/xx.JPG);}
a.mini4{background:url(Images/album/xx2006/xx.JPG);}
a.mini5{background:url(Images/album/xx2006/xx.JPG);}
a.mini6{background:url(Images/album/xx2006/xx.JPG);}

a.galleria span {
display:block;
position:absolute;
width:1px;
height:1px;
top: 5px;
left: 5px;
overflow:hidden;
background:#000;
}

a.galleria, a.galleria:visited {
display:block;
color:#4a679f;
font-weight:bold;
text-decoration:none;
border:1px solid #fff;
width:75px;
height:47px;
float:left;
margin:3px;
z-index:100;
}

a.galleria:hover {
border:1px solid #ddd;
}
a.galleria:hover img {
border:1px solid #ddd;
position:relative;
z-index:100;
}
/*Sposta l'immagine selezionata all'interno del contenitore*/
a.galleria:hover span{
display:block;
position:absolute;
width:400px;
height:300px;
top: 80px;
left: 40px;
padding:5px;
background:transparent;
z-index:100;
}

[TheBestNeo]

Nessuno ha una messa idea di come fare?