Newsgroup: it.comp.www.html
Titolo: Immagine in primo piano....

Ciao,
come detto in un Thread precedente ho installato un css che permette 
l'apertura di una immagine ingrandita quando si passa con il mouse sopra le 
miniature ( immagini ridotte ).
Funziona con Firefox ma con IE l'immegine Ingrandita va a finre *sotto* le 
immagini adiacienti.
Esiste un comando che fa aprire l'immagine in primo piano?
grazie 
--
Newsgroup robomoderato - gli articoli vengono approvati automaticamente

 Esiste un comando che fa aprire l'immagine in primo piano?
Modifica, nel css, lo z-index delle immagini ingrandite, in modo che sia 
maggiore di quello delle immagini ridotte.
Sperando che IE onori lo z-index in modo corretto.
Bye.



Ho provato ma non funziona, ti posto il codice del CSS:
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 60;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
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; /*position where enlarged image should offset horizontally */
}
---
e questo e' come lo uso nel codice HTML ( le immagini sono disposte nelle 
celle di una tabella )
<td <a class="thumbnail" href="#" style="text-align: center;"><img 
height="200" width="300" border="0" align="absMiddle" alt="" 
src="immagine_300x200.jpg" /><span> <img alt="" src="immagine_500x333.jpg" 
/> </span> </a></td
Dove dovrei modificare il valore z-index?
Mi spieghi come funziona la cosa? ( cosi' capisco l'interazione tra il 
codice HTML ed il codice del dile .css )
ciao e grazie
p.s.  in queste condizioni funziona con Firefox ma no con IE8 ITA 


 codice HTML ed il codice del dile .css )
Semplicemente nasconde fuori dallo schermo l'immagine ingrandita 
(visibility:hidden e left: -1000px; io avrei usato -9999px :) ) e quando 
passi sopra al thumbnail (:hover) rende visibile lo span contenuto 
(.thumbnail:hover span) spostandolo di 60 pixel rispetto alla sua 
posizione originaria (left:60px), e quindi dentro lo schermo.
E' la stessa cosa di colorare i link in modo diverso, ma un po' piu` 
sofisticata.
Bye.



ok, grazie me lo studio un po' e cerco di capire, purtroppo sono niubbo 
:-(  cmq, secondo te, questo e' un buon metodo o ne esistono di migliori? 
( che ne so, piu' rapidi nel visulizzare l'immagine ingrandita, sicuramente 
compatibili con tutti i browser, piu' personalizzabili) Ad esempio un 
*difetto* di questo CSS e' che fa apparire l'immagine ingrandita anche se la 
stessa va sotto il bordo basso del monitor costringendoti a scrollare con il 
mouse mentre sarebbe *bello* che visualizzasse limmagine nelle posizione 
piu' consona ( ad esempio in alto in questo caso ).
precedentemente avevo usato uno javascript, ed ho cambiato perche' mi faceva 
lo stesso effetto di posizionare le immagini ingrandite *sotto* le altre 
pero' mi visualizzava l'immagine tenendo conto della posizione in cui si 
trovava il mouse., quindi sopra se ero con il mouse nella parte inferiore 
dello schermo e *sotto* se mi trovavo nella parte superiore.
Poi: la *tecnica* CSS e' *preferibile* a quella javascript?
ciao e grazie


 CSS e' *preferibile* a quella javascript?
Perche` il javascript sa cosa e' un browser (ci gira dentro), e quindi 
puoi (scrivendoti uno script) accorgerti che sei vicino al bordo dello 
schermo, e posizionare l'immagine in modo diverso.
Ma il javascript, per posizionarla, usera` comunque i css, quindi, essendo 
un po' smanettoni di javascript e css, avresti potuto modificare il 
javascript allo stesso modo (z-index) di come hai modificato il css, e 
ottenere l'effetto che vuoi correggendo il bug.
Bye.
