[Risolto] rollover con css

myl

[Risolto] rollover con css

Ho cercato in tutti o post ma non ho trovato la soluzione al mio problema.

A me serve creare effetto rollover di immagini utilizzando i css.

Con Internet Explorer funziona tutto correttamente (le immagini fanno l'effetto corretto e il link è funzionante), con firefox invece non appaiono le immagini e nemmeno il link.

Questa è la sintassi che ho utilizzato. Vi è qualche errore?

CSS:

div.realizzazioni {background-image: url(../images/img1.jpg)}
div.realizzazioni a{display: block;
margin:0;
padding:0;
width:100%;
height:100%;
overflow:hoden;
text-decoration:none;
background-image: url(../images/img1.jpg);}
div.realizzazioni a:hover{background-image: url(../images/img2.jpg) ;}

HTML:

Tra il resto nemmeno in IE mi appare l'alt quando passo sul link.

Qualcuno sa darmi una mano?

misterwo

io di solito uso:

ul li#nomeID a {display:block; background:url(../img/img.gif) 0 0 no-repeat; width:larghezzapx; height:15px; margin:0; padding:0; }

ul li#nomeID a:hover {display:block; background:url(../img/img.gif) 0 -15px no-repeat; width:larghezzapx; height:15px; margin:0; padding:0; }

il mio bg sarà alto 30px - con i valori a e a:hover insieme...

poi uso li#nomeID span {display:none}...

il codice xhtml sarà:

<li id="nomeID"><a href="#" title="mio titolo"><span title="mio titolo">mia voce di menu da nscondere e sostituire con il bg image</span></a></li>

fammi sapere com'è...ok? di solito funzia....sciaooooooooooo

laburno

Non funziona, penso, perché hai il tag ancora vuoto. Dovresti fare come dice misterwo e fare un image replacement.

myl

Ho risolto con un altro sistema..
In pratica mi è bastato inserire le dimensioni anche in a:hover perchè funzionasse sia in Modzilla che in IE.
Funziona anche con il tag vuoto.
Questo è il css:

div.realizzazioni {background-image: url(../images/img1.jpg);
width:100px;
height:45px;}

div.realizzazioni a{display: block;
margin:0;
padding:0;
background-image: url(../images/img1.jpg);
width:100px;
height:45px;}

div.realizzazioni a:hover{background-image: url(../images/img2.jpg) ;
width:100px;
height:45px;}

Siccome i motori di ricerca leggono anche i link e le immagini non riescono a "vederle" la mia intenzione era di scriverci dentro qualche cosa ugualmente ma in modo invisibile. Ho provato a fare il font di 0px ma si vede ugualmente una strisciolina minuscola.
Qualcuno conosce un altro metodo? Non so.. tipo scrittura con colore trasparente o qualche cosa del genere... (comunque inserisco un altro post con questa domanda visto che è un altro argomento.)

misterwo

te l'ho scritto sopra...
tu metti il tuo testo in uno span...e poi nascondi lo span...se rivedi il mio esempio lo puoi benissimo applicare al tuo style...

<div class="realizzazioni"><a href="#" alt="Realizzazioni"><span title="Realizzazioni">mia voce di menu da nscondere e sostituire con il bg image</span></a></div>

sciaoooooooooooo

myl

Appena provato e funziona.. :imb:

sorry e grazie..