Immagini :link, :visited e :hover

[sirmsym80]

Ciao a tutti, vorrei creare un semplice menù composto da immagini.
Quidni vorrei che ogni elemento della lista del menù si visualizzi in un certo modo "normalmente", che cambi quando venga visitata la pagina corrispondente e che cambi quando il mouse ci passa sopra. Per questo ho creato 3 immagini per ogni voce del menù:

1. una per l'item (li) normale
2. una per l'item (li) hover
3. una per l'item (li) visitato

Quindi nell'html ho:

<ul id="menu">		
	<li><a href="a.html">
		<img id="a" src="img/a.png"></div>
	</a></li>
	<li><a href="b.html">
		<img id="b" src="img/b.png"></div>
	</a></li>
	<li><a href="c.html">
		<img id="c" src="img/c.png"></div>
	</a></li>	
</ul>

e nel CSS:

#menu {
	list-style-type: none;
}


/* A */
#a {
	background: url(img/a.png) no-repeat;
}


#a:visited {
	background: url(img/a_visited.png) no-repeat;	
}


#a:hover {
	background: url(img/a_hover.png) no-repeat;
}


/* B */
#b {
	background: url(img/b.png) no-repeat;
}


#b:visited {
	background: url(img/b_visited.png) no-repeat;	
}


#b:hover {
	background: url(img/b_hover.png) no-repeat;
}


/* C */
#c {
	background: url(img/c.png) no-repeat;
}


#c:visited {
	background: url(img/c_visited.png) no-repeat;	
}


#c:hover {
	background: url(img/c_hover.png) no-repeat;
}

Non capisco perchè non funziona. Ciò che vedo sono le immagini "normali" dei link, l'hover e il visited non fanno nulla..


Grazie

[carlomarangoni]

Nel css togli il cancelletto "#" davanti a "#a".
Esempio:
a:visited

[sirmsym80]

Nel css togli il cancelletto "#" davanti a "#a".
Esempio:
a:visited

grazie per la risposta, ora non sono al PC quindi non posso provare, appena ci riesco vi faccio sapere

[sirmsym80]

grazie per la risposta, ora non sono al PC quindi non posso provare, appena ci riesco vi faccio sapere

non va nemmeno cosi'...

[sirmsym80]

altre idee?

[Nobody33]

#menu li a{codice}

#menu li a:visited{codice}

#menu li a:hover{codice}

Verifica anche se il percorso delle immagini è quello giusto.

Inoltre, forse converrebbe di usare la tecnica del css sprite.

LINK per vedere il codice in azione: http://jsfiddle.net/9rHz3/7/

[sirmsym80]

Spiego meglio: io avevo fatto in questo modo:

<div id="content">
    <ul id="menu">
        <li>
            <img src="img/a.png">
        </li>                
        <li>
            <a href="b.html"><img id="b_img"></a>
        </li>
        <li>
            <a href="c.html"><img id="c_img"></a>
        </li>
    </ul>
</div>

dove il primo li contiene un'immagine "fissa" che mi indica la pagina corrente.
Gli altri due sono invece link ad altre pagine.

Nel CSS avevo:

/* A */
#a_img {
    background: url(img/a.png) no-repeat;
    display: block;    
}

#a_img:visited {
    background: url(img/a_visited.png) no-repeat;
    display: block;    
}

#a_img:hover {
    background: url(img/a_hover.png) no-repeat;    
    display: block;    
}

/* B */
#b_img {
    background: url(img/b.png) no-repeat;
    display: block;    
}

#b_img:visited {
    background: url(img/b_visited.png) no-repeat;
    display: block;    
}

#b_img:hover {
    background: url(img/b_hover.png) no-repeat;    
    display: block;    
}

/* C */
#c_img {
    background: url(img/c.png) no-repeat;
    display: block;    
}

#c_img:visited {
    background: url(img/c_visited.png) no-repeat;
    display: block;    
}

#c_img:hover {
    background: url(img/c_hover.png) no-repeat;    
    display: block;    
}

Fatto in questo modo il tutto mi andava ma non mi validava l'html con HTML validator di w3c perchè nel tag "img" mancava src.
Quindi cerco un altro modo per farlo..

[Nobody33]

Le immagini o li fai come sfondo nel css oppure .

//css

#menu{stile menu}
#img1{
width: 50px;
height:50px;
background:url(immagini/cartella/immagine.png) no-repeat;
}/*da impostare per ogni immagine...giocaci anche con padding, margin, ecc..*/
#img1:hover{regole}
#img1:visited{regole}
#img2{regole}
#img2:hover{regole}
#img2:visited{regole}

#img3{regole}
#img3:hover{regole}
#img3:visited{regole}

//html



<div id="menu">
<a id="img1" href="home.html"></a>
<a id="img2" href="welcome.html"></a>
<a id="img3" href="benvenuti.html"></a>
</div>

Non credo che si possa mettere le immagini direttamente nel html per renderli "hovabili".
Poi, a che ti servono le immagini nell'html? basta farli come background nel css. non capisco...

[sirmsym80]

Le immagini o li fai come sfondo nel css oppure .

//css

#menu{stile menu}
#img1{
width: 50px;
height:50px;
background:url(immagini/cartella/immagine.png) no-repeat;
}/*da impostare per ogni immagine...giocaci anche con padding, margin, ecc..*/
#img1:hover{regole}
#img1:visited{regole}
#img2{regole}
#img2:hover{regole}
#img2:visited{regole}

#img3{regole}
#img3:hover{regole}
#img3:visited{regole}

//html



<div id="menu">
<a id="img1" href="home.html"></a>
<a id="img2" href="welcome.html"></a>
<a id="img3" href="benvenuti.html"></a>
</div>

Non credo che si possa mettere le immagini direttamente nel html per renderli "hovabili".
Poi, a che ti servono le immagini nell'html? basta farli come background nel css. non capisco...

Grazie! Provo subito..
E' la prima volta che mi capita di usare il CSS quindi, a quanto pare, mi sono sbagliato a mettere l'immagine nell'html

[sirmsym80]

HTML

<div id="navigation">
    <ul>
        <li><a id="home" href="index.html"></a></li>                
        <li><a id="a" href="a.html"></a></li>
        <li><a id="b" href="b.html"></a></li>
        <li><a id="c" href="c.html"></a></li>
    </ul>
</div>

CSS

#navigation {
    float: left;
    width: 250px;
}

#navigation ul {
    list-style-type: none;
}


#home {
    width: 200px; 
    height: 50px; 
    background: url(img/home.png) no-repeat;    
}


#home:hover {
    width: 200px; 
    height: 50px; 
    background: url(img/home_hover.png) no-repeat;
}
#home:visited {
    width: 200px; 
    height: 50px; 
    background: url(img/home_visited.png) no-repeat;
}

Non va. Non mi visualizza assolutamente nulla..

(200 e 50 sono le dimensioni delle immagini, mentre 250 è la grandezza del contenitore della lista)