html rollover

**misshellfire** · 15-08-2011, 16:15

buongiorno!
ho un menu e ogni pulsante è impostato in questo modo:

codice:

[img]menu/grafica.png[/img]

...ora... come faccio a far diventare rollover l'immagine grafica.png?

**carlomarangoni** · 15-08-2011, 19:25

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>

<style type="text/css">

div:hover {
	background-image: url(grafica2.png);
}
div {
	background-image: url(grafica.png);
	width: 109px;
	height: 38px;
}
</style>
</head>

<body>
<div>&amp;nbsp;</div>
</body>
</html

**misshellfire** · 16-08-2011, 09:23

ciao!
grazie della risposta... piccolo problema... io ho questi pulsanti

codice:

 <div id="home">
		[img]menu/home.png[/img]
	  </div>
      <div id="grafica">
		[img]menu/grafica.png[/img]
	  </div>
        <div id="web">
		[img]menu/web.png[/img]
	  </div>
        <div id="fotografia">
		[img]menu/fotografia.png[/img]
	  </div>

ma non riesco a fare il rollover..........

**Myaku** · 16-08-2011, 10:00

mettere un <div> dentro un <a> non è corretto.
puoi provare rendendo l'<a> in display:block, assegnandogli le dimensioni dell'immagine e quindi impostando gli sfondi (uno su :link e :visited, l'altro su :hover e :active).
quindi, all'interno dell'<a> metti la voce di menu testuale affinchè il link non risulti vuoto a chi ha gli stili disabilitati ed ai MdR, e gli assegni un text-indent a -9999 di modo che in condizioni "normali" resti visibile solo lo sfondo (se necessario, usando uno <span>).

**misshellfire** · 16-08-2011, 10:23

Originariamente inviato da Myaku
mettere un <div> dentro un <a> non è corretto.
puoi provare rendendo l'<a> in display:block, assegnandogli le dimensioni dell'immagine e quindi impostando gli sfondi (uno su :link e :visited, l'altro su :hover e :active).
quindi, all'interno dell'<a> metti la voce di menu testuale affinchè il link non risulti vuoto a chi ha gli stili disabilitati ed ai MdR, e gli assegni un text-indent a -9999 di modo che in condizioni "normali" resti visibile solo lo sfondo (se necessario, usando uno <span>).

ciao Myaku,
riesci a tradurmi in codice quello che hai detto?

**Myaku** · 16-08-2011, 11:37

codice:

<!DOCTYPE html>
<head>
<title></title>
<style type="text/css">
	ul, li {list-style: none}
	a:link, a:visited, a:hover, a:active {display: block; width: 100px; height: 50px; text-indent: -9999px}
	a#voce:link, a#voce:visited {background: url(tuaimmagine.jpg) left top no-repeat;}
	a#voce:hover, a#voce:active {background: url(tuaimmagine-hover.jpg) left top no-repeat;}
</style>
</head>
<body>
	<ul>
		[*]voce di menu
	[/list]
</body>
</html>

Discussione: html rollover

Strumenti discussione

Ricerca discussione

Visualizza

html rollover

Permessi di invio