Rollovers

onMouseOut messing up my onMouseDown.

[fashezee]

Here's the situation:

I have a button (A), onMouseOver it becomes button (B) and onMouseOut is returns to button (A). But I would like that the button becomes and remains button (B) onMouseDown and not change to button (A) onMouseOut. Is this possbile ???

[midi25]

what html editor you using?

[DrDoc]

Yes, it is very possible ..

So, on MouseOver you want it to change, or only on MouseDown? When do you want it to go back to 'normal'?

If you give me that information, I'll be able to help you. :)

[fashezee]

I'm using Ultradev as an editor. If the user rollsover the button and rollsout without clicking down, the button should turn back to the original state. But if the button is clicked on, the
button should remain as the rollover state even when the user rollsout.

[midi25]

i,m using ultra dev myself but havnt made a rollover yet in it. i tend to use go live for most of my workas the rollovers ate easy in there. ultra dev is only worth working in if you are trying to make database sites. although i will look into the rollover side and get back to you.

[tedster]

You could create a duplicate of button B and call this image button C (even though it looks identical). Then make your mouseDown function switch to the C image.

To follow through, in your mouseOver and mouseOut events, don't just do simple rollovers, but first test to see if C is displayed - and in that case just escape and do nothing.

[DrDoc]

Example:

<script language="javascript" type="text/javascript">

var images = new Array(2);
image[0] = new Image;
image[1] = new Image;
image[0].src = "a.gif";
image[1].src = "b.gif";

// How many buttons do you have?
var buttons = new Array(2);

function overfunc(which) {
document.images[which].src = image[1].src;
}
function outfunc(which) {
if(buttons[which] != 1) {
document.images[which].src = image[1].src;
}
}
function downfunc(which) {
if(buttons[which] == 1) {
buttons[which] = 0;
}
else {
buttons[which] = 1;
}
}

</script>

<a href="javascript:void(0)" onmouseover="overfunc('button1')" onmouseout="outfunc('button1')" onmousedown="downfunc('button1')"><img src="a.gif" name="button1" id="button1" /></a>

<a href="javascript:void(0)" onmouseover="overfunc('button2')" onmouseout="outfunc('button2')" onmousedown="downfunc('button2')"><img src="a.gif" name="button2" id="button2" /></a>