Punto informatico Network
Login Esegui login | Non sei registrato? Iscriviti ora (è gratuito!)
Username: Password:
  • Annuncio Pubblicitario

A:hover ma con immagini!

Cerchi consigli per migliorare il tuo sito? Vuoi aprire un sito in poco tempo?
Discuti con altri webmaster, chiedi chiarimenti ed opinioni in tutta libertà.
Lo spam verrà cancellato.

A:hover ma con immagini!

Messaggioda domenico127 » lun mag 22, 2006 4:08 pm

Salve. Vorrei creare una sorta di effetto a:hover su delle immagini anziché su del testo: praticamente vorrei che delle immagini si vedessero in bianco e nero e al passaggio del mouse a colori. Come posso fare?

Grazie
Avatar utente
domenico127
Bronze Member
Bronze Member
 
Messaggi: 611
Iscritto il: sab lug 23, 2005 3:10 pm

Messaggioda Rumez » lun mag 22, 2006 4:20 pm

beh puoi usare i css creando una classe tipo questa
Codice: Seleziona tutto
a.opacity:hover img
{
   filter:alpha(opacity=100);
   -moz-opacity: 1.0;
   opacity: 1.0;
}


dove i vari 100, 1.0, 1.0 sono i fattori di opacità
[nota] attento opera non supporta queste proprietà

...altrimento ti conviene usare un effetto rollover ovvero uno scambio di immagine al passaggio del mouse...questa è un opzione che funziona con tutti i browser..esclusi quelli testuali ovviamente..
Avatar utente
Rumez
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 1783
Iscritto il: mar mag 13, 2003 2:08 pm

Messaggioda domenico127 » lun mag 22, 2006 5:08 pm

Adesso smanetto un po'!
Avatar utente
domenico127
Bronze Member
Bronze Member
 
Messaggi: 611
Iscritto il: sab lug 23, 2005 3:10 pm


Messaggioda domenico127 » lun mag 22, 2006 5:40 pm

Perfetto! Solo che non sono riuscito ad ottenere l'effetto bianco e nero ma solo un scoloritura, che comunque non dispiace. Ora sorge un problema... cliccando su queste miniature dovrebbero aprirsi dei pop-up con i rispettivi ingrandimenti. Come faccio?

Grazie
Avatar utente
domenico127
Bronze Member
Bronze Member
 
Messaggi: 611
Iscritto il: sab lug 23, 2005 3:10 pm

Messaggioda M@ttia » lun mag 22, 2006 7:23 pm

domenico127 ha scritto:Perfetto! Solo che non sono riuscito ad ottenere l'effetto bianco e nero ma solo un scoloritura, che comunque non dispiace. Ora sorge un problema... cliccando su queste miniature dovrebbero aprirsi dei pop-up con i rispettivi ingrandimenti. Come faccio?

Grazie


Codice: Seleziona tutto
<a href="#" onclick="window.open('Immagine.jpg ',' Ingrandimento','scrollbars, resizable, width=800, height=600, left=100, top=100');"><img src="Miniatura.jpg" alt="Clicca per Ingrandire (800 x 600)"></a>
Poi mettitela a posto come ti serve [^]
</IE><FIREFOX>
Avatar utente
M@ttia
Moderatore
Moderatore
 
Messaggi: 8363
Iscritto il: lun giu 09, 2003 2:18 pm
Località: Ticino - Estero

Messaggioda Rumez » mar mag 23, 2006 8:09 am

altrimenti se vuoi fare una cosa veramente fica usa questo metodo:
[nota] crei un pagina html con dentro questo codice:
Codice: Seleziona tutto
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
 <TITLE>Dettaglio Immagine</TITLE>
 <script type="text/javascript">
   var arrTemp=self.location.href.split("?");
   var picUrl = (arrTemp.length>0)?arrTemp[1]:"";
   var nostro = (navigator.appName=="Netscape")?true:false;

     function FitPic()
    {
       iWidth = (nostro)?window.innerWidth:document.body.clientWidth;
       iHeight = (nostro)?window.innerHeight:document.body.clientHeight;
       iWidth = document.images[0].width - iWidth;
       iHeight = document.images[0].height - iHeight;
       window.resizeBy(iWidth + 20, iHeight + 20);
       self.focus();
     };
 </script>
</HEAD>
<BODY onload='FitPic();'>
 <script type="text/javascript">
    document.write( "<img src='" + picUrl + "' border=0>" );
 </script>
</BODY>
</HTML>



[nota] nella pagina delle miniature inserisci questa funzione javascript:
Codice: Seleziona tutto
function PopupPic(sPicURL)
{
   window.open( "popup.htm?"+sPicURL, "", "resizable=1,HEIGHT=200,WIDTH=200");
}


[nota] gestisci l'ingrandimento con un href di questo tipo:
Codice: Seleziona tutto
<a href="#" onClick="javascript:PopupPic('images/immagine_big.gif')" title="Ingrandisci Immagine" ><img src="images/immagine_mini.gif" alt="Miniatura" /></a>


le finestre popup con l'ingrandimento si autodimensioneranno alla dimensione dell'immagine! [8D]
E' un trucco che ho trovato in giro e funziona veramente bene
ciao
Avatar utente
Rumez
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 1783
Iscritto il: mar mag 13, 2003 2:08 pm

Messaggioda domenico127 » mar mag 23, 2006 1:21 pm

Rumez ha scritto:altrimenti se vuoi fare una cosa veramente fica usa questo metodo:
...


Una cosa veramente fica??? Ma è stra-fichissima!!! Funziona! Grazie mille Rumez!

Grazie lo stesso, anche a te, M@ttia [std]
Avatar utente
domenico127
Bronze Member
Bronze Member
 
Messaggi: 611
Iscritto il: sab lug 23, 2005 3:10 pm

Messaggioda Rumez » mar mag 23, 2006 1:49 pm

Prego... [:-D]
Avatar utente
Rumez
Membro Ufficiale (Gold)
Membro Ufficiale (Gold)
 
Messaggi: 1783
Iscritto il: mar mag 13, 2003 2:08 pm


Torna a Sviluppo Web

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite

cron
Powered by phpBB © 2002, 2005, 2007, 2008 phpBB Group
Traduzione Italiana phpBB.it

megalab.it: testata telematica quotidiana registrata al Tribunale di Cosenza n. 22/09 del 13.08.2009, editore Master New Media S.r.l.; © Copyright 2008 Master New Media S.r.l. a socio unico - P.I. 02947530784. GRUPPO EDIZIONI MASTER Spa Tutti i diritti sono riservati. Per la pubblicità: Master Advertising