Graying out buttons in HTML using Javascript

ganeshmb · Jan 13, 2003

I need to gray a button in HTML using Javascript. I know how to enable/disable a button using Javascript. But, the requirement is to gray out the button as well in order to give a visual feedback to the user that the button is disabled. I am essentially looking at these options:

1) Changing background, foreground or any other attributes of the image tag - Simplest and most preferable
2) Changing the shades(R G B proportions) programmatically to give a feeling of graying out - this is fine if the first option is not possible.
3) Replacing the button with a different gif, which is a grayed out version of the former - Wouldn't prefer it, don't mind though if this is the only viable option.

I need some expert advice on how to about this. Any pointers are welcome.
Thanks in advance,
Ganesh

HellTel · Jan 13, 2003

Is it an actual button or an image? It isn't clear from your post. Hope I helped / Thanks for helping
if ((Math.abs(x)<10&&Math.abs<10) &&(((parseIntx.toString()+y.toString())-x-y)%9)!=0)){alert("I'm a monkey's uncle"}

EdwardMartinIII · Jan 13, 2003

If your button is in fact an image, then it seems to me the only way to "gray it out" is to build a different image of a grayed-out button and just keep track of the differences. Name 'em something handy such as "Submit_Active.gif" and "Submit_Disabled.gif" so you never lose track of the file's name.

If it is an actual button component, then you'll probably be limited to what you can do the the appearance of the button, basically a combination of attribute and style calls.

Good luck!

Edward
"Do not read this sentence."

HellTel · Jan 13, 2003

If it is a button then disabling it does "gray out" the text but you can change the style like this:

Code:

<html>
<head>
<script>
function changeBtn(){
	var thebtn = document.getElementById(&quot;btn&quot;).style;
	thebtn.color=&quot;#ff0000&quot;;
	thebtn.backgroundColor=&quot;#0000ff&quot;;
}
</script>
</head>
<body>
<input type=&quot;button&quot; id=&quot;btn&quot; value=&quot;This is a button&quot;>
<a href=&quot;javascript:changeBtn()&quot;>Change button style</a>
</body>
</html>

Hope I helped / Thanks for helping
if ((Math.abs(x)<10&&Math.abs<10) &&(((parseIntx.toString()+y.toString())-x-y)%9)!=0)){alert("I'm a monkey's uncle"}

ganeshmb · Jan 13, 2003

Thank you very much Edward and Helltel!
It is actually an image, sorry about not mentioning it clearly in my earlier mail. This is how my image is built.

<img alt="Save" src="/images/save.gif" border="0" height="24" width="125">

Edward, if having two images is the only option, I have another question. How can I toggle between the images dynamically using Javascript?

BB101 · Jan 14, 2003

HellTel · Jan 14, 2003

There is another way, but it only works in IE. Use a filter to make it gray, then colour again.
Apply this style class to your image
<style>
.buttons {filter

rogid

XImageTransform.Microsoft.BasicImage(GrayScale=0);}
</style>

Then call functions to switch it on and off like this
function GrayIt()
{
document.getElementById("yourpicID&quot

.filters.item("DXImageTransform.Microsoft.BasicImage&quot

.GrayScale = 1;
}

function ColourIt()
{
document.getElementById("yourpicID&quot

.filters.item("DXImageTransform.Microsoft.BasicImage&quot

.GrayScale = 0;
}

This works with any colour image. Hope I helped / Thanks for helping
if ((Math.abs(x)<10&&Math.abs<10) &&(((parseIntx.toString()+y.toString())-x-y)%9)!=0)){alert("I'm a monkey's uncle"}

EdwardMartinIII · Jan 14, 2003

Here:

Code:

<img name=&quot;myImage&quot; id=&quot;myImage&quot; src=&quot;imageA.gif&quot;
onMouseOver=&quot;document.myImage.src='imageB.gif';&quot;
onMouseOut=&quot;document.myImage.src='imageA.gif';&quot;></img>

This ought to allow you to toggle back and forth between two images.

I'd recommend checking it with a couple of different browsers, though.

You might notice that it looks fine running locally, but on a server, there's a tiny gap of time on the first mouseover -- that's the browser requesting the new image file "imageB.gif". There are methods of preloading images so this delay is pretty much nonexistent.

It bears repeating that imageA and imageB really ought to have the same dimensions or you're going to send you viewers into seizures of fury.

I tried checking to see if image rollover was supported in CSS (which means you can do it without JavaScript), but currently, most browsers support only such things as attributes of images. So, for example, you could change the thickness of your image border, etc. but not actually change the image file. It might be possible, but I wasn't able to quickly find a method.

Cheers,

Edward
"Do not read this sentence."

ganeshmb · Feb 3, 2003

Sorry guys! I was very busy for last 3 weeks. It's nice to see all your solutions. Edward, I think I will finally settle for your last solution.

BB101, HellTel and Edward, Thank you very much! Appreciate your help.

etu1972 · Jul 15, 2003

I want set the button text and background colors to other than black and grey as part of the button attributes with the page loading. HellTel's script above enable a change by clicking a hyperlink after the page is loaded. Can the colors be set as button attributes/styles to begin with? Thanks, AMc

Should I stay or should I go? Thanks & Goodbye, Joe.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Graying out buttons in HTML using Javascript

ganeshmb

Programmer

HellTel

Programmer

EdwardMartinIII

Technical User

HellTel

Programmer

ganeshmb

Programmer

BB101

Programmer

HellTel

Programmer

EdwardMartinIII

Technical User

ganeshmb

Programmer

etu1972

Programmer

Similar threads

Part and Inventory Search

Sponsor