...

View Full Version : rollover buttons



HIPPY
02-18-2007, 02: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, 05: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, 06: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, 07: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, 07:58 PM
loads of thanks, worked a charm ;)

HIPPY
02-18-2007, 10: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, 06: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum