visualizzare immagini al passaggio del mouse

[Many17]

Salve ragazzi!
Dovrei fare una cosa in xhtml e css (dtd strict), una cosa credo abbastanza banale ma mi sto perdendo in un bicchier d'acqua.
Nel sito devo inserire 4 miniature di immagini (che sono le anteprime di alcune foto) e ad ogni miniatura corrisponde la relativa foto. Vorrei ad es. che al passaggio del mouse (e quindi non devo cliccare) sopra la miniatura n.1 comparisse a fianco la foto n.1 e così per le altre 3.
Sarebbe più semplice farlo in flash (ci si mette un nanosecondo) ma siccome sto realizzando il mio primo sito con i css volevo evitare troppe animazioni.
Come posso fare?
Grazie a tutti

[pacovox]

Magari può esserti utile questo tutorial
http://www.constile.org/tips/banner_...ili_con_i_css/

[Many17]

Grazie Pacovox, l'articolo è interessante.
Ora provo a vedere se fa al caso mio.
Intanto se qualcuno ha altre soluzioni...
Ora comincio a sperimentare!

[Pasco]

Prova questo:

CSS:

#img img { display:none; }

#img:hover img { display:block; }

#piccola { background-image: url(piccola.gif); width:100px; height:100px; display:block; }


XHTML:

<div id="img">
     <div id="piccola"></div>

     [img]grande.gif[/img]
</div>

Non ho avuto il tempo di testarlo :sgrat:

[Many17]

Grazie Pasco ma non funziona benissimo...
Io sto provando in un altro modo però c'è un problema, comunque ci sono quasi riuscita.
Io vorrei che l'immagine che compare al passaggio del mouse sopra la miniatura "1.jpg" stia a fianco della stessa miniatura sulla destra.
Inveca fa un gran casino e si sposta in alto...

Vi posto il link di prova e il codice, così mi date una mano:

www.movingart.it

E' la prima volta che provo a fare un sito in xhtml e css quindi non criticate troppo ;-)

Ecco il codice delle miniature in xhtml:

<div id="foto1">[img]immagini/1.jpg[/img]</div>

Ed ecco il CSS:

#foto1 { height:25px; width:25px; }
#foto1 img {
border:none;
position:absolute;
top:290px;
left:-480px;
}
#foto1 a {
display:block;
position:absolute;
top: 100px;
left:515px;
}
#foto1 a:hover, #foto1 a:active {
height:142px;width:430px;
background:url(immagini/foto1g.jpg);
}

Grazie ragazzi x l'aiuto

[Pasco]

prova questo:

#foto1 { height:25px; width:25px; } 
#foto1 img { 
border:none; 
position:absolute; 
top:290px; 
left:10px; 
}
#foto1 a { 
display:block; 
position:absolute; 
top: 290px; 
right:10px; 
}
#foto1 a:hover, #foto1 a:active { 
height:142px;width:430px; 
background:url(immagini/foto1g.jpg); 
}

[Many17]

Macchè Pasco
grazie, anche se avevo già provato in modo simile e non funziona!
Il fatto è che mi sembra una cosa stupidissima da fare!
Ho provato in mille modi, anche cambiando il css così:

#foto1 { height:25px; width:25px; position: absolute; right: 50px; top: 50px; }
#foto1 img { border:none; }
#foto1 a {
position: absolute; right: 590px; top: 345px;
display:block;
}
#foto1 a:hover img , #foto1 a:active img { display:none; }
#foto1 a:hover , #foto1 a:active {
display: block;
height:142px; width:430px;
background:url(immagini/foto1g.jpg);
position: absolute;
left: -395px;
top: 324px;
}

In questo modo ho allineato la miniatura con il banner a destra solo che al passaggio del mouse sopra "foto1" questa compare e scompare a intermittenza... che casino eppure penso di essere vicina alla soluzione.

per farti capire prova a vedere ora www.movingart.it

Illuminatemi grazie

[Many17]

Rieccomi, posto il css aggiornato e funzionante con Explorer:

#foto1 { height:25px; width:25px; position: absolute; right: 50px; top: 50px; }
#foto1 img { border:none; }
#foto1 a {
position: relative; right: 590px; top: 345px;
display:block;
}
#foto1 a:hover img , #foto1 a:active img { display:none; }
#foto1 a:hover , #foto1 a:active {
display: block;
height:142px; width:430px;
background:url(immagini/foto1g.jpg);
position: absolute;
left: -395px;
top: 324px;
}

In pratica sostituendo absolute con relative
relativa [B][B]relative

[Many17]

Perdonate il casino!

Dicevo sostituendo "position: absolute" con "position: relative" (alla sesta riga) con Explorer funziona, mentre con Netscape no, come mai?

#foto1 { height:25px; width:25px; position: absolute; right: 50px; top: 50px; }
#foto1 img { border:none; }
#foto1 a {
position: relative; right: 590px; top: 345px;
display:block;
}
#foto1 a:hover img , #foto1 a:active img { display:none; }
#foto1 a:hover , #foto1 a:active {
display: block;
height:142px; width:430px;
background:url(immagini/foto1g.jpg);
position: absolute;
left: -395px;
top: 324px;
}
Perdonate il casino di prima ma ho la testa che fuma

Many

[Pasco]

è Netscape a vederci giusto , posta il codice XHTML di tutta la pagina