Rollover immagini con i css

[akane_p]

Ciao a tutti,

in una pagina di un mio sito ho una serie di immagini di rollover (una decina).. queste da bianco e nero, al passaggio del mouse si colorano e sono linkate ad altre pagine.
Ho fatto il tutto con il componente di dreamweaver.. il codice js che genera però non mi passa la validazione w3c...

Mi chiedevo quindi se c'è un modo per riprodurre il rollover con i css (possibilmente senza usare codice js).

Grazie 1000

[marcocarrieri]

Una cosa cosi?
Mettiamo di avere un immagine 120x20.
Crei un div 120x20.

Codice PHP:

<div id="immagine1"></div> 


e nel CSS

Codice PHP:

#immagine1
{
   width:120px;
   height:20px;
   margin:0px;
   padding:0px;
   background:url(img1.jpg);
}

#immagine1 :hover
{
   background:url(img2.jpg);
} 


Ma sono un pò confuso e stanco oggi, mi sembra non sia la migliore soluziome, in questo caso pardon... Attendiamo altri utenti...

[akane_p]

Quella che mi hai illustrato è una soluzione a cui avevo pensato il problema è che non so come inserire il link se inserisco l'immagine come background di un div (volevo evitare l'utilizzo della gif trasparente)... e non volevo creare troppi div in una pagina...

Vediamo se mi suggeriscono qualcos'altro...

Per adesso grazie 1000!!! Se sai dirmi come fare con il link te ne sarei grata

[marcocarrieri]

E possibile vedere la pagina che hai fatto o il codice comprensivo di Javascript per capire il perchè non ti viene validato?

[akane_p]

Il codice che da problemi è questo js incluso nella pagina .asp

   <script type="text/javascript">

$(document).ready( function() {

		

		// ----- Fading Carousel

			$('#billy_fader').billy({

				transition: 'fade',

				slidePause: 3000,

				nextLink: $('#fader_billy_next'),

				prevLink: $('#fader_billy_prev'),

				indicators: $('#fade_indicators')

			});

			

			});

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new  Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}



function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

   </script>

[marcocarrieri]

E provare ad inglobare questo codice Javascript in un file esterno?

[Prill]

Ciao, per validare il tuo codice:

<script type="text/javascript">
<!--
$(document).ready( function() {
        // Fading Carousel

            $('#billy_fader').billy({
                transition: 'fade',
                slidePause: 3000,
                nextLink: $('#fader_billy_next'),
                prevLink: $('#fader_billy_prev'),
                indicators: $('#fade_indicators')
            });
            });

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new   Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

resta che tramite js il rollover può esser fatto in maniera più semplice rispetto a quanto fa Dreamweaver, ad esempio una cosa del tipo

<img src="immagine1.jpg" onmouseover="this.src='rollover_immagine1.jpg'"  onmouseout="this.src='immagine1.jpg'">

ma sarebbe poi da aggiungere in head uno script per il preload delle immagini di rollover in maniera che non ci siano ritardi e attese nel caricamento quando vi si passa sopra.

[Prill]

Invece, volendo usare i css, esistono tecniche diverse, generalmente si gioca con gli sfondi. Potremmo avere ad esempio:

a {
    display:block;
    width:xxxpx;
    height:xxxpx;
    background-image:url(immagine1.jpg);
}

a:hover {
    background-image:url(immagine2.jpg);
}

Entrambe le immagini sono visualizzate in questo caso come sfondi che si alternano.

Pensando invece a una soluzione nella quale una immagine è inserita direttamente nel link, avendo la nostra barra di navigazione in un elenco, e sfruttando l'opacity, ho fatto una prova, funzionante coi diversi browser, così:

* {
    margin:0;
    padding:0;
    border:0;
}
ul {
     list-style-type:none;
}
li {
    display:block; float:left; background-repeat:no-repeat; width:200px; height:83px; 
}
li#uno {
    background-image:url(rollover1.jpg);
}
li#due {
    background-image:url(rollover2.jpg);
}
a:hover img {
    opacity:0;
}
-->
</style>
<!--[if IE]><style type="text/css">
a:hover {
    color:#fff; /* definire a:hover con una qualsiasi dichiarazione, che non inciderà su nulla, serve ad evitare un bug di explorer, dalla versione 6 indietro, che ha bisogno di istruzioni diverse sullo stato hover del link per rendere correttamente l'  a:hover img   */
}
a:hover img {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
}
</style><![endif]-->

e in body

<ul>
  <li id="uno"><a href="#"><img src="immagine1.jpg" width="200" height="83"  alt="" /></a></li>
  <li id="due"><a href="#"><img src="immagine2.jpg" width="200" height="83" alt="" /></a></li>
</ul>

Chiaramente possiamo poi personalizzare il tutto. Il css per Explorer inserito a parte ai fini della validazione.

[akane_p]

Grazie 1000 ad entrambi
Prill, credo che proverò ad utilizzare la tua seconda soluzione, quella gestita interamente con i CSS.
Vi farò sapere comunque come è andata e magari vedere il risultato
Grazie ancora

[akane_p]

Se avete altri suggerimenti comunque sono ben accetti, grazie 1000

[errecreations]

Salve, scusate se posto qui, ma non volevo aprire un altro argomento visto che più o meno ho lo stesso problema, in pratica sto facendo pratica con html + css e vorrei ricreare alcuni effetti che prima realizzavo usando Flash.
Il passo che non riesco a completare è il seguente:
in pratica in un portale che sto realizzando, ho inserito diversi div, ad ogni div ho dato come sfondo un immagine, ora volevo realizzare un effetto di rollover, in pratica al passaggio del mouse vorrei che l'immagine che presenta un opacità del 50% ritornasse ad opacità 0% ovvero il suo colore normale, tramite css sono riuscito ad imposta l'opacità tramite il comando "opacity" però non sò come impostare lo stato al passaggio del mouse, ho provato ad immettere la lettere "a" davanti al nome del div nel css ma questo mi fa sballare la posizione del div stesso e di conseguenza non posso poi scrivere sotto "a: hover" dico questo perchè credo sia questa la soluzione solo che non la riesco ad applicare...avrò sicuramente sbagliato qualcosa.
Vi chiedo un aiuto se vi è possibile, grazie mille...inoltre c'è un altro passaggio successivo che vorrei mi spiegasse, però iniziamo a risolvere prima questo grazie ancora