Bueno, no me aguanté, y no fue tan difícil.
Lo dejo y después lo explico (si hace falta). A la noche lo veo de nuevo, porque ahora mi abogada ya me llamó tres veces que no me va a seguir esperando.
¡Nadie me copie el diseño de los íconos, eh!
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>COSO.</title>
<style type="text/css">
body {
background-color: black;
color: white;
width: 700px;
}
.cajas_icons{
background-color: black;
font-size: 20px;
display: inline-block;
width: 220px;
height: 36px;
margin-left: 4px;
}
.cajas_icons a span{
font-weight: bold;
font-size: 30px;
line-height: 36px;
padding-left: 40px;
}
.cajas_icons a{
color: lime;
background-image: url(http://img684.imageshack.us/img684/1632/logos0t.jpg);
background-repeat: no-repeat;
text-decoration: none;
display: inline-block;
width: 32px;
height: 36px;
padding-left: 10px;
}
.cajas_icons a[title="ALFA"]{
background-position: 0 0;
}
.cajas_icons a[title="ALFA"]:hover{
color:red;
background-position: -40px 0;
}
.cajas_icons a[title="FOXTROT"]{
background-position: 0 -40px;
}
.cajas_icons a[title="FOXTROT"]:hover{
color:red;
background-position: -40px -40px;
}
.cajas_icons a[title="KILO"]{
background-position: 0 -80px;
}
.cajas_icons a[title="KILO"]:hover{
color:red;
background-position: -40px -80px;
}
.cajas_icons a[title="PAPA"]{
background-position: 0 -120px;
}
.cajas_icons a[title="PAPA"]:hover{
color:red;
background-position: -40px -120px;
}
.cajas_icons a[title="UNIFORME"]{
background-position: 0 -160px;
}
.cajas_icons a[title="UNIFORME"]:hover{
color:red;
background-position: -40px -160px;
}
.cajas_icons a[title="ZULU"]{
background-position: 0 -200px;
}
.cajas_icons a[title="ZULU"]:hover{
color:red;
background-position: -40px -200px;
}
</style>
</head>
<body>
<h2>... ¿Y qué nombre le pongo a esto? <h2>
<div class="cajas_icons">
<a href="#" title="ALFA"><span>ALFA</span></a>
</div>
<div class="cajas_icons">
<a href="#" title="FOXTROT"><span>FOXTROT</span></a>
</div>
<div class="cajas_icons">
<a href="#" title="KILO"><span>KILO</span></a>
</div>
<div class="cajas_icons">
<a href="#" title="PAPA"><span>PAPA</span></a>
</div>
<div class="cajas_icons">
<a href="#" title="UNIFORME"><span>UNIFORME</span></a>
</div>
<div class="cajas_icons">
<a href="#" title="ZULU"><span>ZULU</span></a>
</div>
</body>
</html>