Tema: perdonad...
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 17/05/2003, 10:41
Avatar de KarlanKas
KarlanKas
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