Cambio a varios colores en enlaces

hechicero · #1 (**permalink**) 02/11/2003, 04:53

Hola a todos/as. Quería saber si en CSS hay algún código que permita que al pasar con el ratón, cambie de color pero que después cambie a otro y así. Es que lo he visto en algunas páginas y quería saber como se hace. Gracias a todos/as. Saludos.

||Dj|| · #2 (**permalink**) 02/11/2003, 05:21

Eso se debe hacer con javascript seguramente, preguntaste ahi?

tunait · #3 (**permalink**) 02/11/2003, 07:08

Hum... sip, con html dinámico puede hacerse....

A ver si es por algo así que preguntas

Código:

<script language="javascript">
//script por tunait
//http://javascript.tunait.com/

var colorDefecto = '#CC00FF' //color para los enlaces en estado normal

var colores = new Array(
'#FFCC66',
'#3399CC',
'#669966',
'#993333',
'#996600',
'#9966CC'
)
//cambia y/o añade los colores que quieras


var cont = 0
function enlaces(){
for (m=0; m < document.getElementsByTagName('a').length; m++)
	{
	document.getElementsByTagName('a')[m].onmouseover = function(){
		this.style.color = colores[cont]
		if(cont < (colores.length-1)){cont++}
		else{cont = 0}
		}
	document.getElementsByTagName('a')[m].onmouseout = function(){
		this.style.color = colorDefecto
		}
	}
}
</script>

Y en body....

<body onload="enlaces()">

Dime si te sirvió.

traslado el tema al foro de javascript

movido desde CSS

saludos

hechicero · #4 (**permalink**) 02/11/2003, 11:02

Gracias Tunait. Es parecido pero no cada vez que se pase por el enlace sino que cuando dejes el ratón sobre el enlace y sin moverlo, vaya cambiandose automáticamente. Saludos.

tunait · #5 (**permalink**) 02/11/2003, 11:42

Ah, vale, pues entonces así

Código:

<script language="javascript">
var colorDefecto = '#CC00FF',cont = 0
var colores = new Array(
'#FFCC66',
'#3399CC',
'#669966',
'#993333',
'#996600',
'#9966CC'
)
function colorines(cual){
cual.style.color = colores[cont]
		if(cont < (colores.length-1)){cont++}
		else{cont = 0}
	cual2 = cual
tiempo = setTimeout('colorines(cual2)',50)
}
function enlaces(){
for (m=0; m < document.getElementsByTagName('a').length; m++)
	{
	document.getElementsByTagName('a')[m].onmouseover = function(){
		colorines(this)
		}
	document.getElementsByTagName('a')[m].onmouseout = function(){
	clearTimeout(tiempo);
		this.style.color = colorDefecto
		}
	}
}
</script>

Y en body lo mismo que antes

hechicero · #6 (**permalink**) 02/11/2003, 12:37

¡Esto es!

¡Muchas gracias Tunait!. Saludos.

seoista · #7 (**permalink**) 03/11/2003, 01:31

Hola hechicero

(Hola tunait ...

)

Yo tengo este, que se llama Rainbow y hace el efecto que quieres.

Código:

<script language="javascript">
var rate = 20;  // Increase amount(The degree of the transmutation)

if (document.getElementById)
window.onerror=new Function("return true")

var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID

var IE = 0;
var Mozilla = 0;

// Browser check
var szUA = navigator.userAgent;
if (szUA.indexOf("MSIE 6.") >= 0) {
    IE = 6;
}
else if (szUA.indexOf("Mozilla/5.") >= 0) {
    Mozilla = 6;
}
else if(szUA.indexOf("MSIE 5.") >= 0) {
    IE = 5;
}
else if(szUA.indexOf("MSIE 4.") >= 0) {
    IE = 4;
}
else if(szUA.indexOf("Mozilla/4.") >= 0) {
    Mozilla = 4;
}

if (IE >= 4) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}
else if (Mozilla >= 6) {
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    document.onmouseover = Mozilla_doRainbowAnchor;
    document.onmouseout = Mozilla_stopRainbowAnchor;
}


//=============================================================================
// doRainbow
//  This function begins to change a color.
//=============================================================================
function doRainbow(obj)
{
    if (act == 0) {
        act = 1;
        if (obj)
            objActive = obj;
        else
            objActive = event.srcElement;
        clrOrg = objActive.style.color;
        TimerID = setInterval("ChangeColor()",100);
    }
}


//=============================================================================
// stopRainbow
//  This function stops to change a color.
//=============================================================================
function stopRainbow()
{
    if (act) {
        objActive.style.color = clrOrg;
        clearInterval(TimerID);
        act = 0;
    }
}


//=============================================================================
// doRainbowAnchor
//  This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function doRainbowAnchor()
{
    if (act == 0) {
        var obj = event.srcElement;
        while (obj.tagName != 'A' && obj.tagName != 'BODY') {
            obj = obj.parentElement;
            if (obj.tagName == 'A' || obj.tagName == 'BODY')
                break;
        }

        if (obj.tagName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}


//=============================================================================
// stopRainbowAnchor
//  This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function stopRainbowAnchor()
{
    if (act) {
        if (objActive.tagName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}


//=============================================================================
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
//  This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_doRainbowAnchor(e)
{
    if (act == 0) {
        obj = e.target;
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
            obj = obj.parentNode;
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                break;
        }

        if (obj.nodeName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = obj.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}


//=============================================================================
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
//  This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_stopRainbowAnchor(e)
{
    if (act) {
        if (objActive.nodeName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}


//=============================================================================
// Change Color
//  This function changes a color actually.
//=============================================================================
function ChangeColor()
{
    objActive.style.color = makeColor();
}


//=============================================================================
// makeColor
//  This function makes rainbow colors.
//=============================================================================
function makeColor()
{
    // Don't you think Color Gamut to look like Rainbow?

    // HSVtoRGB
    if (elmS == 0) {
        elmR = elmV;    elmG = elmV;    elmB = elmV;
    }
    else {
        t1 = elmV;
        t2 = (255 - elmS) * elmV / 255;
        t3 = elmH % 60;
        t3 = (t1 - t2) * t3 / 60;

        if (elmH < 60) {
            elmR = t1;  elmB = t2;  elmG = t2 + t3;
        }
        else if (elmH < 120) {
            elmG = t1;  elmB = t2;  elmR = t1 - t3;
        }
        else if (elmH < 180) {
            elmG = t1;  elmR = t2;  elmB = t2 + t3;
        }
        else if (elmH < 240) {
            elmB = t1;  elmR = t2;  elmG = t1 - t3;
        }
        else if (elmH < 300) {
            elmB = t1;  elmG = t2;  elmR = t2 + t3;
        }
        else if (elmH < 360) {
            elmR = t1;  elmG = t2;  elmB = t1 - t3;
        }
        else {
            elmR = 0;   elmG = 0;   elmB = 0;
        }
    }

    elmR = Math.floor(elmR).toString(16);
    elmG = Math.floor(elmG).toString(16);
    elmB = Math.floor(elmB).toString(16);
    if (elmR.length == 1)    elmR = "0" + elmR;
    if (elmG.length == 1)    elmG = "0" + elmG;
    if (elmB.length == 1)    elmB = "0" + elmB;

    elmH = elmH + rate;
    if (elmH >= 360)
        elmH = 0;

    return '#' + elmR + elmG + elmB;
}
</script>

Es más largo que el de tunait, pero hace un efecto muy bonito.

Saludos a amb@s

hechicero · #8 (**permalink**) 03/11/2003, 09:48

Gracias seoista por darme otra opción. Saludos.