el codigo seria algo asi (es orientativo ya que no entendi muy bien lo que hacia el codigo ASP, asi que le puse que se remarque la opcion a la que era igual la variable paso).
Código:
<!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>
<style type="text/css">
<!--
#pasos {
list-style:none;
margin:0;
padding:0;
}
#pasos li {
float:left;
width:25px;
height:25px;
margin: 3px;
}
#p1 {background: #FFF url(images/paso1.png) no-repeat top center;}
#p2 {background: #FFF url(images/paso2.png) no-repeat top center;}
#p3 {background: #FFF url(images/paso3.png) no-repeat top center;}
#pasos li.viendo { background-position: -25px;}
-->
</style>
</head>
<body>
<ul id="pasos">
<li id="p1" <%if paso=1 then response.write "class='viendo'"%> >Paso 1</li>
<li id="p2" <%if paso=2 then response.write "class='viendo'"%> >Paso 2</li>
<li id="p3" <%if paso=3 then response.write "class='viendo'"%> >Paso 3</li>
</ul>
</body>
</html>
Para este caso lo que deberias hacer es una imagen para cada paso que contenga los dos estados (el naranja y el blanco) uno arriba de otro (osea.. tendria 25px de ancho y 50 de alto).
Lo que tiene a favor esta forma es que si quieres cambiarle algo de la apariencia solo tocas el codigo CSS y no el codigo del contenido de la pagina. Y por otro lado si alguien tiene desactivado para ver imagenes en su explorador (o bien es un no vidente y usa lector de pantalla) va a poder leer el contenido