hi all!

i'm adding currency converter to my site. the idea is at the page load it will display some default currency rate (say, 1 € = 1.56 $ ), but when user moves mouse over that block, it will turn into four controls where user can enter numbers and select currencies he/she wants. and when the mouse is out, it will hide controls, and turn back to displaying the rate/conversion results.

i did it and it works (i'll post some code below), but I have a problem where the controls flicker (as if quickly hide then redisplay) when the mouse moves over the borders of controls (input & select). I have a "container" DIV, for which I have mouseover and mouseout, and inside I have spans for display, and input/select controls for calculator. using JS i show/hide whichever is appropriate. this happens only in IE & Opera, but thats 90% of my visitors. ok in FF.

here's small pieces of my code:

<div id="barCurrency" onmouseover="converter('over')" onmouseout="converter('out')">
    <span id="dispAmmountFrom">1</span> <span id="dispCurFrom">USD</span>
    <input id="ammountFrom" onkeyup="UpdateAmmountTo()" style="display:none" />
    <select id="curFrom" onchange="UpdateAmmountTo()" style="display:none">
    <option value="usd">$</option>
    <option value="eur">€</option></select>
    =
    <span id="dispAmmountTo">1</span> <span id="dispCurTo">Sk</span>
    <select id="curTo" onchange="UpdateAmmountTo()" style="display:none">
    <option value="usd">$</option>
    <option value="eur">€</option></select>
</div>

function converterMouse(overout) {
    if (overout == 'over') {
        converterMouseOver = true;
        showConvertForm();
    }
    else {
        converterMouseOver = false;
        hideConvertForm();
    }
}

function showConvertForm() {
    if (converterActive) return;

    ...

    // hideConvertForm() does the opposite
    elDispAmmountFrom.style.display = "none";
    elDispCurFrom.style.display = "none";
    elDispCurTo.style.display = "none";
    elAmmountFrom.style.display = "inline";
    elCurFrom.style.display = "inline";
    elCurTo.style.display = "inline";
    
    converterActive = true;
}

so again, when I move mouse over contols inside the barCurrency DIV it still flickrs, as if it triggers both quickly mouseout then mouseover when I go from the inside that DIV into the INPUT (which is inside the div as well!)...

what can I do to make sure I only get single mouse over for the DIV no matter what's inside of it? I tried adding fieldset inside, tried giving it mouseover/out, tried wrapping it in another DIV moving mouse events to it - always the same story

My guess is that you need to cancel bubbling/propagation on your events. As it stands now, it is likely triggering on every single inner element you move in or out of inside the barCurrency div.