02/11/2003, 04:53
| ||||
| ||||
| Cambio a varios colores en enlaces 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. |
|
02/11/2003, 07:08
| ||||
| ||||
| Hum... sip, con html dinámico puede hacerse.... A ver si es por algo así que preguntas
Código:
Y en body....<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>
<body onload="enlaces()"> Dime si te sirvió. traslado el tema al foro de javascript  movido desde CSS saludos |
|
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. |
|
02/11/2003, 11:42
| ||||
| ||||
| Ah, vale, pues entonces así
Código:
Y en body lo mismo que antes <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>
|
|
03/11/2003, 01:31
| ||||
| ||||
| Hola hechicero (Hola tunait ... )Yo tengo este, que se llama Rainbow y hace el efecto que quieres.
Código:
Es más largo que el de tunait, pero hace un efecto muy bonito.<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>
Saludos a amb@s |
¡Muchas gracias Tunait!. Saludos. 
