perdonad...

danes · #1 (**permalink**) 17/05/2003, 04:38

hola...

quisiera hacer un menu con un conjunto de iconos (circulos) en color "X" = estado normal, al passar con el mouse por encima estos pasarian a estar en color "Y" = rollover, y al ser clicado pasarian al color "Z" = activo... y sustituiria una imagen de la pagina, por una nueva... buf!!!... si? :·)...

i me molaria que al clicar otro de los circulos, el anterior pasase a un color "X+clarito" = estado "ya visto"...

todo esto es para un portfolio que estoy haciendo, soy diseñador, y quiero mostrar unos trabajos... y el fucktml no es lo mio... se puede hacer ... es "isi"... :·)

si quieres ver una muestra de lo que digo...
http://www.dandanes.net/portfolio.jpg

gracias de antemano!!!

tunait · #2 (**permalink**) 17/05/2003, 04:41

Hola danes,

eso lo lograrás mediante javascript. Muevo tu pregunta a ese foro.

saludos

danes · #3 (**permalink**) 17/05/2003, 04:53

joder... perdona de nuevo... pos si...

muchas gracias... estoy impresionadíssimo...

disfruta

tunait · #4 (**permalink**) 17/05/2003, 05:01

Nada que perdonar, hombre

En lo que alguien más te responde mira a ver si te sirve algo parecido que hice hace algún tiempo para alguien que pedía algo parecido.

He buscado el mensaje pero no lo he encontrado, así que te dejo el enlace al ejemplo.

salut i bon dia

caricatos · #5 (**permalink**) 17/05/2003, 05:21

Hola danes: (Hola tunait

)

Con respecto a los colores, no encontré una forma de cambiar los elementos, pero te preparé un ejemplo para cambiar los estilos, y que creo que es lo que pides...

Ejemplo:

Código PHP:

  <ul > 
<li style="list-style-type:disc">Linea de prueba</li> 
<li style="list-style-type:circle" onmouseover="this,style.listStyleType = 'disc'" 
onmouseout="this,style.listStyleType = 'circle'" 
onclick="this,style.listStyleType = 'square'; this.onmouseover=''; this.onmouseout=''" 
 >Linea de prueba 2</li> 
</ul>

El primer elemento de la lista no hace nada, pero el segundo tiene el estilo circle, con el ratón pasa al disc y se recupera... y al clickear se estaciona en square...

Creo que la solución para tu caso pasaría por usar list-style-image, y crearte tres circulos con los colores que tu necesites...

Espero que te sirva.

Saludos

KarlanKas · #6 (**permalink**) 17/05/2003, 10:41

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

caricatos · #7 (**permalink**) 17/05/2003, 11:15

Hola otra vez:

Interesante la versión de KarlanKas (Hola

)

Yo estaba preparando la versión con listas, y como no encontré la forma de cambiar colores, hice unas imagenes y quedó así:

Código PHP:

  <ul > 
<li style="list-style-image: url(disco0.gif)">Linea de prueba</li> 
<li style="list-style-Image: url(disco0.gif)" onmouseover="this,style.listStyleImage = 'url(disco1.gif)'" 
onmouseout="this,style.listStyleImage = 'url(disco0.gif)'" 
onclick="this,style.listStyleImage = 'url(disco2.gif)'; this.onmouseover=''; this.onmouseout=''" 
 >Linea de prueba 2</li> 
</ul>

Lo puedes ver aquí .

Saludos

danes · #8 (**permalink**) 17/05/2003, 15:51

gracias a todos... SOYS LO MEJOR!!!, de verdad, GRACIAS

KarlanKas · #9 (**permalink**) 18/05/2003, 09:19

De nada, hombre! A mandar! Te sirvió alguna de las propuestas?

Cita:

danes escribió el 18-05-2003 a las 02:08 PM:
SIII!!!, gracias compaéro...
ahora he añadido una tonteria... nada, que carge por defecto una foto... i... me molaria que el botón correspondiente ( 1 er circulo ) saliera activo... es posible?... EI GRACIAS... Y YA SABES, SINO CONTESTAR NO PASA NOTHING!!!...

disfruta...

Hola danes!!

Me alegro de que te fuera bien. Para conseguir lo que pides pon en el body lo siguiente:

<body onload="pinchar(document.getElementsByTagName('DIV ')[0])">

siendo el número entre corchetes el circulo que quieras que esté activo (recordando que el primero es el 0). Luego en el iframe pones como src el href del circulo que quieres activo y ya está. Es la forma más sencilla, aunque igual no es compatile con navegadores algo antiguos. Dime si te sirve!
Un saludo!!