Rollover + lightbox

[wilderness]

Ciao a tutti.
E'possibile creare un effetto rollover su un'immagine con l'aggiunta dell'effetto lightbox?
Ho provato a cercare sugli esempi scaricabili da questo sito ma non ho trovato niente che faccia al caso mio
Grazie in anticipo.

[artorius]

Dunque, Lightbox inserisce l'immagine in un tag <img> con id = "lightboxImage" contenuta in un tag <a> contenuto a sua volta in una div con id="lightbox"

Puoi usare le proprietà dei CSS per definire una regola sull'hover dell'a:

#lightbox a:hover #lightboxImage{
opacity : 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
}


ed inserire com Bg dell'<a> contenuto in #lightbox l'immagine che vuoi settare come visibile al rollover (ed ovviamente indicare che è display: block:

#lightbox a{
display: block;
background: transparent url(imgs/mia_imag.jpg) no-repeat;
}

[wilderness]

per la tua risposta.
Io di codice JavaScript non me ne intendo, ho prelevato lo script dagli esempi di questo portale, non saprei dove aggiungere quello che mi consigli...
lo script che mi dici tu è scaricabile da questo sito?
Grazie.

[artorius]

... non devi far nulla di Javascript... è solo CSS

[wilderness]

adesso provo!

[wilderness]

pare non funzionare...
ti posto il codice originale, inserendo quello che mi hai consigliato non funge... dove sbaglio?




CODICE ORIGINALE=

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progidXImageTransform.Microsoft.AlphaImageLoader(src="ov erlay.png", sizingMethod="scale");
}




CODICE MODIFICATO=

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

#lightbox a:hover #lightboxImage{
opacity : 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
}


#lightbox a{
display: block;
background: transparent url(imgs/mia_imag.jpg) no-repeat;
}


* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progidXImageTransform.Microsoft.AlphaImageLoader(src="ov erlay.png", sizingMethod="scale");
}

[artorius]

ma l'hai creata col nome che ti ho messo io l'immagine???

[wilderness]

su una pagina.
inserendo il codice indicato ( devo metterlo tra delle righe specifiche di codice? o copiarlo ed incollarlo in una posizione "X"?)
le foto si aprono sempre al click e il rollover succede quando viene visualizzata l'immagine ingrandita con l'effetto lightbox...
aiuto, non ci capisco niente!

[artorius]

allora, mi sa che non ci siamo capiti... Dove lo vuoi il Rollover? sull'immagine in piccolo PRIMA di cliccarci o sull'immagine aperta con il lightbox?

[wilderness]

devo essermi spiegata male.
Ho in media 4 foto per pagina, delle miniature che al click si ingrandiscono creando l'effetto lightbox (codice postato sopra).
Il cliente adesso non vuole più cliccarci sopra , ma vuole che con il solo rollover sull'immagine piccola appaia la grande, sempre con l'effetto lightbox che oscura lo schermo.