[CSS] immagini hover e visited

[vfldj]

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

[Tuvok-LuR-]

le img non hanno lo pseudo :visited, devi usarlo sugli anchor (sposta l'id dall'img all'<a>)
inoltre le <img> ed il background-image css sono due cose diverse, se continui su questa strada ti ritroverai con due immagini sovrapposte

[vfldj]

Originariamente inviato da Tuvok-LuR-

le img non hanno lo pseudo :visited, devi usarlo sugli anchor (sposta l'id dall'img all'<a>)
inoltre le <img> ed il background-image css sono due cose diverse, se continui su questa strada ti ritroverai con due immagini sovrapposte

Grazie per la risposta..Dici di modificare in questo modo l'html?

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

E il CSS?

[vfldj]

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.

[Tuvok-LuR-]

hai 2 modi per fare vedere un'immagine
1) con il tag img, specificando il percorso in src, in questo modo l'immagine sarà a tutti gli effetti parte del contenuto della pagina, ci puoi cliccare e fare salva etc.
2) come sfondo di un altro elemento (non di un <img>)della pagina tramite il background: CSS. in questo modo hai una semplice immagine di sfondo che è soltanto una decorazione di un altro elemento e non è selezionabile dall'utente, le sue dimensioni etc. dipendendono dall'elemento a cui è applicata.

quindi le due tecniche si escludono e non ha senso utilizzarle assieme. se vuoi utilizzare gli pseudo stati css devi togliere i tag img ed applicare i background ai link b e c (se lo applichi all'<a> devi anche dichiararlo come display: block in modo da poterne controllare le dimensioni)

[vfldj]

Originariamente inviato da Tuvok-LuR-

hai 2 modi per fare vedere un'immagine
1) con il tag img, specificando il percorso in src, in questo modo l'immagine sarà a tutti gli effetti parte del contenuto della pagina, ci puoi cliccare e fare salva etc.
2) come sfondo di un altro elemento (non di un <img>)della pagina tramite il background: CSS. in questo modo hai una semplice immagine di sfondo che è soltanto una decorazione di un altro elemento e non è selezionabile dall'utente, le sue dimensioni etc. dipendendono dall'elemento a cui è applicata.

quindi le due tecniche si escludono e non ha senso utilizzarle assieme. se vuoi utilizzare gli pseudo stati css devi togliere i tag img ed applicare i background ai link b e c (se lo applichi all'<a> devi anche dichiararlo come display: block in modo da poterne controllare le dimensioni)

Grazie, ho risolto con il metodo 2