Foros del Web » Creando para Internet » CSS »

¿CSS o JavaScript?

Estas en el tema de ¿CSS o JavaScript? en el foro de CSS en Foros del Web. Saludos. Desde hace tiempo soy admirador de GameSpot, sobre todo de los que maquetan el site (id a www.gamespot.com para saber de qué hablo). Pues ...
  #1 (permalink)  
Antiguo 31/05/2003, 11:12
 
Fecha de Ingreso: mayo-2003
Mensajes: 18
Antigüedad: 14 años, 6 meses
Puntos: 0
Busqueda ¿CSS o JavaScript?

Saludos.

Desde hace tiempo soy admirador de GameSpot, sobre todo de los que maquetan el site (id a www.gamespot.com para saber de qué hablo).

Pues bien, hace tiempo que me pregunto con qué lenguaje se hace el efecto que podéis ver en el menú de la izquierda, en el cual cuando se pasa el puntero sobre un enlace éste se subraya y, lo que me es desconocido, se pinta una flecha naranja a su izquierda.

No sé si es CSS o JavaScript, aunque me decanto más por este último, no se por qué.

¿Tenéis idea de cómo hacer algo parecido?
__________________
A Working Class Hero
  #2 (permalink)  
Antiguo 31/05/2003, 11:49
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Buenas,

es un combinado de css y javascript.

El cambio de aspecto de los enlaces se logra mediante css y el cambio de la imagen de la flecha mediante javascript.

A ver si te vale este ejemplo

<html>
<head>
<title>menú</title>
<style type="text/css">
<!--
a:link {
color: #CC6600;
text-decoration: none;
}
a:visited {
color: #996600;
text-decoration: none;
}
a:hover {
color: #993333;
}
-->
</style>
<script language="JavaScript">
var flechab = new Image()
flechab.src = "flechab.gif"
function CF1(cual)
{document.getElementById(cual).src = 'flechab.gif'}
function CF2(cual)
{document.getElementById(cual).src = 'flechaa.gif'}
</script>
</head>

<body>
<table width="15%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="11%"><img src="flechaa.gif" name="f1" width="7" height="7" id="f1"></td>
<td width="89%"><strong><font size="2"><a href="#" onmouseover="CF1('f1')" onmouseout="CF2('f1')">Enlace 1</a></font></strong></td>
</tr>
<tr>
<td><img src="flechaa.gif" name="f2" width="7" height="7" id="f2"></td>
<td><strong><font size="2"><a href="#" onmouseover="CF1('f2')" onmouseout="CF2('f2')">Enlace 2</a></font></strong></td>
</tr>
</table>
</body>
</html>

Necesitarás, lo primero, las imágenes de las flechas. Las saqué de la página que sugeriste y las llamé flechaa.gif y flechab.gif

Luego se trata de que a cada flecha le des un id o name ) y luego al enlace de al lado le pones la llamada a una u otra función pasándole como argumento el id de la imagen que quieras cambiar.

En el ejemplo, las flechas llevan una el name="f1" y la otra "f2"

Luego a los enlaces les pones un onmouseover="CF1('idDelaflechaquequierascambiar')" y un onmouseout="CF2('elIdDelaFlechaARestaurar')"

saludos
  #3 (permalink)  
Antiguo 31/05/2003, 11:53
 
Fecha de Ingreso: mayo-2003
Mensajes: 18
Antigüedad: 14 años, 6 meses
Puntos: 0
¡¡¡Muchísimas gracias tunait!!! Estudiaré tu script, y ya te cuento :D. ¡Un saludo y gracias, muchas gracias!
__________________
A Working Class Hero
  #4 (permalink)  
Antiguo 31/05/2003, 12:03
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
muchas de nadas, cualquier cosa, pregunta

Última edición por tunait; 29/01/2009 a las 03:02
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:49.