Hola:
Por fin he conseguido un sistema para establecer botones rollover con un enlace de texto subyacente que se mostraría en caso de que el ordenador visitante tuviese desabilitadas las imágenes o, simplemente, funcionase sin estilos.
He realizado un código para un sólo botón y ahora quiero hacer toda la UL con hasta un número de ocho en vertical.
Funciona perfectamente en IE y FF. Los demás navegadores, ya se verán en su momento.
Lo que no sé es si deberé replicar toda la DIV id=alttext para cada botón o cómo hacerlo para optimizar lo mejor posible el CSS.
Os muesto el código para que alguien con más experiencia que yo me pueda aconsejar.
Gracias
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML>
<HEAD>
<TITLE>Rollovers con texto debajo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>
.alt {
DISPLAY: block;
FONT-WEIGHT: bold;
LINE-HEIGHT: 10px;
FONT-SIZE: 10px;
TEXT-ALIGN: center;
MARGIN: 2px;
TEXT-DECORATION: none
}
A:link {
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: Verdana, sans-serif;
TEXT-DECORATION: none
}
A:active {
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: Verdana, sans-serif;
TEXT-DECORATION: none
}
A:visited {
FONT-SIZE: 12px;
COLOR: #000000;
FONT-FAMILY: Verdana, sans-serif;
TEXT-DECORATION: none
}
A:hover {
FONT-SIZE: 12px;
COLOR: #ffffff;
FONT-FAMILY: Verdana, sans-serif;
TEXT-DECORATION: none
}
LI {
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
FLOAT: center;
PADDING-BOTTOM: 0px;
MARGIN: -6px -9px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none
}
#img1 A {
FONT-WEIGHT: bold;
FONT-SIZE: 12px;
FLOAT: left;
POSITION: relative;
HEIGHT: 24px;
TEXT-DECORATION: none
}
#img1 A {
BACKGROUND: url(LAWEB.gif) no-repeat;
WIDTH: 86px
}
#img1 A SPAN.img {
BACKGROUND: url(LAWEB-hover.gif) no-repeat;
MARGIN: 0px;
WIDTH: 86px;
POSITION: absolute;
HEIGHT: 24px
}
#img1 A:hover SPAN.img {
BACKGROUND: none transparent scroll repeat 0% 0%;
HEIGHT: 24px
}
.skolpres {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
BACKGROUND: none transparent scroll repeat 0% 0%;
FLOAT: left;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: -1px -29px;
WIDTH: 86px;
PADDING-TOP: 0px;
POSITION: absolute;
HEIGHT: 24px;
BORDER-RIGHT-WIDTH: 0px;
left: 39px;
}
#alttext {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
FLOAT: left;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: -7px -7px;
WIDTH: 86px;
PADDING-TOP: 0px;
POSITION: absolute;
HEIGHT: 24px;
BACKGROUND-COLOR: #0066ff;
BORDER-RIGHT-WIDTH: 0px
}
</STYLE>
<!--[if IE]>
<STYLE type=text/css>
#img1 A SPAN.img {
MARGIN: 0px 0px;
CURSOR: pointer
}
#img1 A:hover SPAN.img {
BACKGROUND: none transparent scroll repeat 0% 0%;
HEIGHT: 24px
}
.skolpres {
MARGIN: -8px -38px;
}
#alttext {
BORDER-TOP-WIDTH: 0px;
PADDING-RIGHT: 0px;
PADDING-LEFT: 0px;
BORDER-LEFT-WIDTH: 0px;
FLOAT: left;
BORDER-BOTTOM-WIDTH: 0px;
PADDING-BOTTOM: 0px;
MARGIN: -14px -9px;
WIDTH: 86px;
PADDING-TOP: 0px;
POSITION: absolute;
HEIGHT: 24px;
BACKGROUND-COLOR: #0066ff;
BORDER-RIGHT-WIDTH: 0px
}
</STYLE>
<![endif]-->
<META content="MSHTML 6.00.2800.1555" name=GENERATOR>
</HEAD>
<BODY>
<DIV id=alttext><A href="http://www.LAWEB.com"><SPAN
class=alt>El Enlace Debajo</SPAN></A></DIV>
<UL class=skolpres>
<LI id=img1><A href="http://www.LAWEB.com"><SPAN
class=img></SPAN></A></LI>
</UL>
</BODY>
</HTML>
