¿CSS o JavaScript?

AWCH · #1 (**permalink**) 31/05/2003, 10:12

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?

tunait · #2 (**permalink**) 31/05/2003, 10:49

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">

</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

AWCH · #3 (**permalink**) 31/05/2003, 10:53

¡¡¡Muchísimas gracias tunait!!! Estudiaré tu script, y ya te cuento :D. ¡Un saludo y gracias, muchas gracias!

tunait · #4 (**permalink**) 31/05/2003, 11:03

muchas de nadas, cualquier cosa, pregunta