Cita:
Iniciado por Mikmoro 
Mira, yo en tu lugar lo haría así:
En primer lugar haces una imagen con los tres estados del botón:
Luego pones una clase a cada enlace:
<a href="#" class="historia"></a>
Y ahora muestras cada estado del botón poniendo la imagen como fondo y mostrando sólo la parte que te interesa usando las posiciones de fondo:
.historia {background: url(img/historia.jpg) no-repeat; center top}
.historia:visited { background-position: center bottom;}
.historia:hover { background-position: center;}
Es mucho más sencillo y económico porque puedes agrupar en un selector de posición todos los botones en la css de esta manera:
.historia:hover, home:hover, links:hover {...etcétera
Mira este
ejemplo.
La imagen es cutre porque la he hecho sin cuidado, pero bien hecho es una buena solución, para todos los navegadres y sin retardo de carga de imágenes. Mírate el código fuente y supongo que lo verás enseguida.
Mikel.
Hola!!! La verdad
Mikel te pasaste! espectacular tu explicación y tu ejemplo, creo que lo he comprendido y hice las imágenes y me parece que salieron. Tengo 1 problemita: quiero que los botones queden un poco separados entre si xq ahora estan casi pegados. Mira para comprender mejor:
www.cincomasdos.com.ar/DEMO2/index.html
y también estaría bueno y aprovechar el
ancho del header y hacer 2 filas de botones, 1 con 3 y la otra con 3 tmb. Como podría hacer esto?
(La única página que está acomodada con los botones nuevos es index.html)
La única modificación que hice fue crear una clase para visited (yo a eso lo llamo cuando estamos situados en esa página, me entendes?)
Es decir las clases: homev, galeriav, contactov, recursosv, linksv, historiav son cuando las páginas estan cargadas en "ACTIVE".
Acá te dejo el html final y el css:
html:
Código:
<li><a href="historia.html" class="historia"></a></li>
<li><a href="contacto.html" class="contacto"></a></li>
<li><a href="recursos.html" class="recursos"></a></li>
<li><a href="links.html" class="links"></a></li>
<li><a href="galeria.html" class="galeria"></a></li>
<li><a href="index.html" class="homev"></a></li>
css:
Código:
/*-------------------------------------- Buttons -------------------------------------------------------------------*/
#buttons {
padding:1em;
height:1.5em;
color:#2955C7;
font-family:sans-serif;
}
#buttons li {
float:right;
list-style-type:none;
white-space:nowrap;
}
/* ----- HOME ----- */
#buttons li a.home {
color:#87C1F1;
display:block;
height:28px;
width:62px;
}
#buttons li a.homev {
color:#87C1F1;
display:block;
height:28px;
width:62px;
}
.home {
background: url('home.jpg') no-repeat;
background-position:center top;
}
.homev {
background: url('home.jpg') no-repeat;
background-position: center bottom;
}
/* ----- GALERIA ----- */
#buttons li a.galeria {
color:#87C1F1;
display:block;
height:48px;
width:87px;
}
#buttons li a.galeriav {
color:#87C1F1;
display:block;
height:48px;
width:87px;
}
.galeria {
background: url('galeria.jpg') no-repeat;
background-position:center top;
}
.galeriav {
background: url('galeria.jpg') no-repeat;
background-position:center bottom;
}
/* ----- CONTACTO ----- */
#buttons li a.contacto {
color:#87C1F1;
display:block;
height:28px;
width:105px;
}
#buttons li a.contactov {
color:#87C1F1;
display:block;
height:28px;
width:105px;
}
.contacto {
background: url('contacto.jpg') no-repeat;
background-position:center top;
}
.contactov {
background: url('contacto.jpg') no-repeat;
background-position:center bottom;
}
/* ----- RECURSOS ----- */
#buttons li a.recursos {
color:#87C1F1;
display:block;
height:28px;
width:108px;
}
#buttons li a.recursosv {
color:#87C1F1;
display:block;
height:28px;
width:108px;
}
.recursos {
background: url('recursos.jpg') no-repeat;
background-position:center top;
}
.recursosv {
background: url('recursos.jpg') no-repeat;
background-position:center bottom;
}
/* ----- LINKS ----- */
#buttons li a.links {
color:#87C1F1;
display:block;
height:28px;
width:55px;
}
#buttons li a.linksv {
color:#87C1F1;
display:block;
height:28px;
width:55px;
}
.links {
background: url('links.jpg') no-repeat;
background-position:center top;
}
.linksv {
background: url('links.jpg') no-repeat;
background-position:center bottom;
}
/* ----- HISTORIA ----- */
#buttons li a.historia {
color:#87C1F1;
display:block;
height:28px;
width:98px;
}
#buttons li a.historiav {
color:#87C1F1;
display:block;
height:28px;
width:98px;
}
.historia {
background: url('historia.jpg') no-repeat;
background-position:center top;
}
.historiav {
background: url('historia.jpg') no-repeat;
background-position:center bottom;
}
/* ----- GENERALES .HOVER ---- */
.home:hover, .galeria:hover, .contacto:hover, .recursos:hover, .links:hover, .historia:hover { background-position: center;}
Muchas gracias nuevamente y espero tu respuesta!!