PDA

View Full Version : rollover buttons



HIPPY
02-18-2007, 01:14 PM
<input type="button" value="Clear" onClick="if(confirm('Are you sure that you want to clear the messages off the screen?'))parent.messages.clear();" class="plain">

There is an example of a button I have on my page.. it is given a specific background image on the button using css (class=plain)

Is it possible using javascript to make the background image change when your mouse goes over the button and when you click on the button



input.plain
{
background-image: url(bg2.gif)
}


Is the css I'm using . when the mouse goes over the button can you make it use maybe bg3.gif instead..

thanks in advance

ess
02-18-2007, 04:20 PM
You can use the following command to change the background image of an element.


window.document.getElementById( "some_id").style.backgroundImage = "img_here.gif";

If you wish to use both CSS and JavaScript...then you can use the following command


window.document.getElementById( "some_id").className = "classname" ;

Say you have a link, and you wish to change the background image of that link once the mouse hovers on top of it, you can use the following


<a href="#" onmouseover="this.className='css_class_name';" onmouseout="this.className='css_class_name';">somelink</a>

Good luck.
Ess

HIPPY
02-18-2007, 05:49 PM
s to clarify if i use the css and java method, i write this code in the head of the document:


window.document.getElementById( "some_id").className = "classname" ;

but then how do I make it so that the image changes when you put the mouse over the button, thecode i used to make the button is this:


<input type="button" value="Clear" onClick="if(confirm('Are you sure that you want to clear the messages off the screen?'))parent.messages.clear();" class="plain">

ess
02-18-2007, 06:12 PM
If you want to change the CSS class, then do the following


<input type="button" value="Clear" onClick="if(confirm('Are you sure that you want to clear the messages off the screen?'))parent.messages.clear();" class="plain" onmouseover="this.className='class_name';" onmouseout="this.className='plain'";>

If you want to use an image, than you to do the following

<input type="image" name="Clear" alt="Clear" src="clear.gif" onClick="if(confirm('Are you sure that you want to clear the messages off the screen?'))parent.messages.clear();" onmouseover="this.src='clearOver.gif';" onmouseout="this.src='clear.gif';"/>

Good luck
Ess

HIPPY
02-18-2007, 06:58 PM
loads of thanks, worked a charm ;)

HIPPY
02-18-2007, 09:07 PM
I was wondering if it were possible to somehow outsource this bit of code to a .js file, because i have loads of buttons on different pages that i want to use this effect and dont want to use the same code over and over... how would i go about that

ess
02-19-2007, 05:01 PM
there loads of techniques you can use here.

one of them is to create a function in a file and you pass a reference of the button that currently has the focus...and you can then replace the class name or change the src etc.

here is an example..first the javascript function


<script type="text/javascript">
function changeStyle( ref ) {
// assuming you only have two css class, please assign as you see fit
var class1 = "plain";
var class2 = "hoverEffect";
if( ref.className == class1 ) {
ref.className = class2;
} else {
ref.className = class1;
} //-- ends else
} //-- ends changeStyle
</script>

second the button


<input type="button" value="Clear" class="plain" onmouseover="javascript: changeStyle( this );" onmouseout="javascript: changeStyle(this);"/>

There are many ways to do this, and this is the first that came to mind....but should solve this problem for you any how.

Cheers,
Ess