17/05/2003, 10:41
|
 | Moderador extraterrestre | | Fecha de Ingreso: diciembre-2001 Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 23 años, 2 meses Puntos: 61 | |
Muy buenas tardes para todos (los uqe estén por la tarde).
Vamos a ver, he hecho un pequeño código que creo que resuelve tu pequeño problema. La base de todo está en un gif con fondo blanco y un circulo transparente dentro de una capa. PAra lograr el efecto de cambio de color lo uqe hacemos es cambiar el color de fondo de la capa con lo que conseguimos el efecto deseado. En el ejemplo uqe te he puesto tienes un ejemplo de ese circulo, pero el script contempla la posibilidad de que lo cambies.
Luego tienes que elegir los colores que quieras para cada uno de los 4 estadios por los que puede pasar el circulo. La elección es muy sencilla.
El código que contiene los circulos es el mismo siempre, sólo cambia el destino del enlace, por lo que si quieres poner más enlaces de los que hay aquí sólo tienes que copiar una de las capas y pegarla debajo cambiando el destino después.
En cualquier caso si tienes cualquier duda no tienes más que preguntar.
El código:
Código PHP: <html>
<head>
<script>
var ultimo;
circulo=new Image;
circulo.src=circulo.gif;//Pon la ruta hasta la imagen del circulo.
altoCirculo=23;
anchoCirculo=23;
primerColor="navy"; //Pon aquí el color en que aparecen normal
segundoColor="Red";//Pon aquí el color del RollOver
tercerColor="#C0c0c0";//Aquí el color de Enlace activo
cuartoColor="#00ddee";//Aquí el color de enlace visitado
document.write("<style>.fondo{background:"+primerColor+";width:"+anchoCirculo+";height:"+altoCirculo+";}</style>");
function encima(esto){
if(esto.pincho){esto.style.background=tercerColor};
else{esto.style.background=(!esto.visitado)?primerColor:cuartoColor}
}
function pinchar(esto){
esto.pincho=true;
if(!ultimo){ultimo=esto;}
else { ultimo.visitado=true;
ultimo.pincho=false;
ultimo.style.background=cuartoColor;
ultimo=esto;
}
esto.style.background=tercerColor;
}
</script>
</head>
<body>
<div onmouseover="this.style.background=segundoColor"
onmouseout="encima(this)"
onclick="pinchar(this)"
class="fondo"><A HREF="http://www.forosdelweb.com" onfocus="this.blur()" target="pepe"><img border="0" src="circulo.gif" ></A></div>
<div onmouseover="this.style.background=segundoColor"
onmouseout="encima(this)"
onclick="pinchar(this)"
class="fondo"><A HREF="http://www.google.com" onfocus="this.blur()" target="pepe"><img border="0" src="circulo.gif" ></A></div>
<div onmouseover="this.style.background=segundoColor"
onmouseout="encima(this)"
onclick="pinchar(this)"
class="fondo"><A HREF="http://www.tunait.com" onfocus="this.blur()" target="pepe"><img border="0" src="circulo.gif" ></A></div>
<div onmouseover="this.style.background=segundoColor"
onmouseout="encima(this)"
onclick="pinchar(this)"
class="fondo"><A HREF="http://www.pepemolina.com" onfocus="this.blur()" target="pepe"><img border="0" src="circulo.gif" ></A></div>
<iframe id="pepe" name="pepe" width="100%" border="0" height="50%"></iframe>
</body>
</html>
Pincha aquí para ver un ejemplo
Un saludo!!
__________________ Cómo escribir
No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.
Última edición por KarlanKas; 17/05/2003 a las 10:51 |