PDA

Click to See Complete Forum and Search --> : mouseover mouseout event

Damarus
06-07-2006, 01:17 PM
Hi,

I have a kind of problem I used the mouseover and mouseout event to change the button when you move the mouse over the button and it is working but now I want to assign this script to the other buttons on my page and I already tried few ways to solve this problem but noone worked does anyone have an idea how to solve this problem? Thx in advance

Damarus
Natdrip
06-07-2006, 01:43 PM
try using css

http://www.search-this.com/website_design/css_rollover_buttons.aspx
EricW
06-07-2006, 01:45 PM
<html>
<script>
function waxOn(obj){
obj.style.background="red";
}

function waxOff(obj){
obj.style.background="white";
}

</script>

<input type=button onmouseover="waxOn(this);" onmouseout="waxOff(this);" value="button 1">


<input type=button onmouseover="waxOn(this);" onmouseout="waxOff(this);" value="button 2">


<input type=button onmouseover="waxOn(this);" onmouseout="waxOff(this);" value="button 3">


<input type=button onmouseover="waxOn(this);" onmouseout="waxOff(this);" value="button 4">


<input type=button onmouseover="waxOn(this);" onmouseout="waxOff(this);" value="button 5">


</html>
tw56
06-07-2006, 01:55 PM
Look for rollover function. Basically you could have two images with the name imageon and imageoff and the function that takes the name of the image and the on or off attribute. ex function rollover(imagename, onoffstate) and the onmouseover would call the imageon and the onmouseout would call the imageoff. In the function you could use document[imgName].src = eval(imagename + onoffstate + ".src");
Damarus
06-07-2006, 03:40 PM
@Natdrip I dont know how to program with css but thx for that tip.

@EricW So does there come ="waxOn(this);" the name of the buttons?

@tw56 i dont know how to program a rollover function because I'm a beginner so maybe you can show me how to program this.
EricW
06-07-2006, 03:49 PM
If you need to know the id (or name or value) of the buttons, you merely have to assign them one in the button

<input type=button id="button1" name="button1" onmouseover="waxOn(this);" onmouseout="waxOff(this);" value="button 1">

then access the id in waxOn as obj.id

function waxOn(obj){
obj.style.background="red";
alert(obj.id + '-' + obj.name + '-' + obj.value);
}

Hope this helps
tw56
06-07-2006, 04:10 PM
Here is a very simple function that will work. In the head of your html file you will have a javascript function.

<script type="text/javascript">
<!--
function onmouseoverdv(whichel)
{
document.getElementById([whichel]).style.backgroundColor="#F8F8F8"
}
function onmouseoffdv(whichel)
{
document.getElementById([whichel]).style.backgroundColor="#FFFFFF"
}
//-->
</script>

In your body you will pass the variables to the function

<div id="menel10" onmouseover="onmouseoverdv('menel10')" onmouseout="onmouseoffdv('menel10')">
Whatever is in your divisor
</div>

this will change the backround color of the divisor on mouse over.
it could also be used in a button. Just change the id and the passed id.
If you want to do something like change image we will have to look at a more complex sulution.
tw56
06-07-2006, 04:14 PM
EricW has a much nicer looking function but mine is written to be kinda self explanatory.
Damarus
06-07-2006, 06:03 PM
sounds all a bit complicated but i will try this as soon as came to school tomorrow and thanks everyone for your help. :)