Member Avatar for connor4312

HI! im having trouble with a rainbow mouseover, it only works on the first like it goes over. The code is here:

<script src=""></script>

with the js being;

////////////////////////////////////////////////////////////////////
// Setting
var rate = 20;  
////////////////////////////////////////////////////////////////////
// Main routine
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

if (document.all) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    document.onmouseover = Mozilla_doRainbowAnchor;
    document.onmouseout = Mozilla_stopRainbowAnchor;
}

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

function stopRainbow()
{
    if (act) {
        objActive.style.color = clrOrg;
        clearInterval(TimerID);
        act = 0;
    }
}

{
    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);
        }
    }
}

{
    if (act) {
        if (objActive.tagName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}

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);
        }
    }
}

function Mozilla_stopRainbowAnchor(e)
{
    if (act) {
        if (objActive.nodeName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}


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;
}
  • 1 Contributor
  • 3 Replies
  • 135 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by connor4312

Dani AI

Generated

The symptom you described — the rainbow effect only working once and never properly switching to subsequent links — is a classic sign of shared, page-level state and interval timers being reused or not cleared when the pointer moves between anchors. already guessed there might be an interaction with other page-level handlers; that can make the problem worse because assigning handlers directly to onmouseover/onmouseout or onload can get overwritten by other scripts.

Practical fixes to try (no copy/paste of your existing code required):

  • Avoid a single global "active" flag and single interval. Give each anchor its own state: store the original color and the animation timer on the element (for example via dataset or a namespaced property) so multiple links can be tracked independently.
  • Use mouseenter / mouseleave (or pointerenter / pointerleave) instead of mouseover / mouseout to avoid bubbling issues that generate spurious enter/leave events when moving over child nodes. Prefer addEventListener to assigning handlers to global properties so you won’t clobber other scripts.
  • Always clear the element’s timer when leaving and restore the saved original color. Add a small guard so you never start a new timer if one already exists for that element.
  • For smoother and less error-prone animation, consider requestAnimationFrame or CSS transitions/animations instead of repeated setInterval.

Debugging tips: add console logs to show when an animation starts/stops and whether timers are cleared. Test with developer tools to confirm the leave event fires when you move between links. If the page has other scripts that rely on global onload or global mouse handlers, convert those to addEventListener too.

See the MDN notes on addEventListener and the mouseenter event for reliable cross-browser behavior: EventTarget.addEventListener and mouseenter event.

Member Avatar for connor4312

Any plpz???

commented: Speak English, please. Use code tags. -1
Member Avatar for connor4312

I think it may have a problem with a onmouseover sidemeanu

Member Avatar for connor4312

Wait, I think it may be hat it has a body onload thing, and would it stp if there was 2 of them? My sorse is pretty unorginized, so i dont know.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.