[CSS + HTML] Porzione immagine e anteprima

[Karkatys]

Ciao ragazzi, dovrei fare una cosa abbastanza semplice in teoria ma che mi sta creando un po' di problemi nella pratica. :D Vorrei mettere nel mio sito delle piccole anteprime di immagini e far sì che, al passaggio del mouse, queste si allarghino fino a visualizzare l'immagine a dimensione naturale. Ora ho questo codice CSS che mi permette di visualizzare l'anteprima:

.thumbnail {position: relative;
z-index: 0}

.thumbnail:hover {background-color: transparent;
z-index: 9}

.thumbnail span {/*CSS for enlarged image*/
position: absolute;
background-color: none;
padding: 5px;
left: -1000px;
border: none;
visibility: hidden;
color: black;
text-decoration: none}

.thumbnail span img {/*CSS for enlarged image*/
border-width: 0;
padding: 2px}

.thumbnail:hover span {/*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px}

Quindi a questo punto vado ad integrare nel mio codice HTML un semplice codice per visualizzare le due immagini (Una più piccola per la preview e una più grande, quella a dimensioni originali):

<a class="thumbnail"><img src="LINK MINIATURA"><span><img src="LINK DIMENSIONI ORIGINALI"></span></a>

Ecco il problema, io non vorrei usare due immagini differenti, ma vorrei usare la stessa immagine (Quella a dimensione originale) e ritagliarla per visualizzare l'anteprima! Quindi avrei un'immagine sola, tramite il codice ne visualizzo solo una piccola parte e quando passo sopra il mouse la vedo a dimensioni originali. Per fare ciò ho trovato la proprietà clip:

img
{
position:absolute;
clip:rect(0px,60px,200px,0px);
}

Il problema è che sì, l'immagine in miniatura viene visualizzata correttamente, ma quando passo sopra il mouse anche l'immagine che viene fuori (Quella che deve essere a dimensioni originali) si ritaglia! :muro: Sapete aiutarmi? :D Grazie!

[Rikiji]

perchè

img { ... }


ha effetto su tutte le immagini, anche se hover. Sulle immagini in hover devi togliere la proprietà clip

[MaxArt]

Il problema è molto semplice, devi saper usare correttamente i selettori del CSS. In questo caso, il tuo errore è che hai indicato a TUTTI gli elementi img di essere ritagliati, non solo quelli che ti interessato.
Fai così:
.thumbnail>img {clip:rect(0px,60px,200px,0px);}
Questo vuol dire: applica a tutti gli elementi img che sono figli diretti degli elementi con classe "thumbnail".
Altre note:

.thumbnail span {/*CSS for enlarged image*/
position: absolute;
background-color: none;
padding: 5px;
left: -1000px;
border: none;
visibility: hidden;
color: black;
text-decoration: none}

.thumbnail span img {/*CSS for enlarged image*/
border-width: 0;
padding: 2px}

.thumbnail:hover span {/*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px}1. "none" non è un colore: usa "transparent", come hai fatto prima;
2. il vecchio trucco di spostare gli oggetti sulla sinistra non è molto bello, soprattutto se non ne hai bisogno (anzi, complica le cose). Usa display: none, lascia left: 60px e vivi tranquillo;
3. visibility: hidden diventa del tutto inutile. In alternativa, usalo al posto di display: none.
La classe .thumbnail:hover span diventa semplicemente {display: inline;}. Ricorda che il browser deve applicare ripetutamente i due stili ogni volta che passi sopra col mouse. Meno ne applica e meglio vive.

Inoltre: vuoi davvero usare un tag "a" per inglobare anteprima e immagine? Tanto la proprietà href manco la usi, tanto vale usare uno span, un div, un label e mettergli cursor: pointer come stile (immagino volessi emulare la presenza della mano puntata).

[Karkatys]

Grazie MaxArt, gentilissimo e disponibile. :) Ho risolto tutto, grazie anche a Rikiji! Preferisco mantenere il tag a in quanto sono nuovo nel campo del CSS/HTML e non voglio complicarmi la vita. :p Vi chiedo soltanto un'ultima cosa. L'immagine ritagliata è possibile spostarla per visualizzare solamente l'anteprima che voglio io? Cerco di mettercela tutta e provare a ragionare senza avere tutto sul piatto d'argento. :D Allora, ho il codice:

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}

Vado a sostituire img con .thumbnail>img in quanto lo spostamento deve essere applicato solo alle immagini a cui è stata applicata la classe thumbnail. Quindi ho provato con:

.thumbnail>img
{
position:absolute;
left:10px;
}

Ma non succede nulla. Devo forse cambiare il valore di position? Oppure devo cambiare il valore di position nella porzione di codice:

.thumbnail span {/*CSS for enlarged image*/
position: absolute;
background-color: none;
padding: 5px;
left: -1000px;
border: none;
visibility: hidden;
color: black;
text-decoration: none}



:confused: Grazie ancora!

[MaxArt]

Preferisco mantenere il tag a in quanto sono nuovo nel campo del CSS/HTML e non voglio complicarmi la vita. :p:confused: E che differenza ti fa usare uno span?
Consiglio: usa gli elementi HTML per il significato che essi hanno. Un <a> serve per i collegamenti. Un <div> per riquadri generici. Uno <span> per un contenitore generico "inline". E così via.

L'immagine ritagliata è possibile spostarla per visualizzare solamente l'anteprima che voglio io?Eh? :fagiano:
"Spostare" in che senso? Spiegati o non ti posso aiutare.

Ma non succede nulla.Altro consiglio: non usare MAI e poi MAI una locuzione del genere quando si tratta di risolvere problemi di programmazione. Devi invece spiegare:
1. che azione hai fatto;
2. cosa ti aspettavi che accadesse;
3. cosa invece è accaduto.
Tutti ti sapranno aiutare meglio. :read: