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!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Graying out buttons in HTML using Javascript

Status
Not open for further replies.
ganeshmb

ganeshmb

Programmer
Dec 5, 2001
32
US
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

 
Sort by date Sort by votes
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(y)<10) &&(((parseIntx.toString()+y.toString())-x-y)%9)!=0)){alert(&quot;I'm a monkey's uncle&quot;);}
 
Upvote 0 Downvote
If your button is in fact an image, then it seems to me the only way to &quot;gray it out&quot; is to build a different image of a grayed-out button and just keep track of the differences. Name 'em something handy such as &quot;Submit_Active.gif&quot; and &quot;Submit_Disabled.gif&quot; 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
&quot;Do not read this sentence.&quot;
 
Upvote 0 Downvote
If it is a button then disabling it does &quot;gray out&quot; 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(y)<10) &&(((parseIntx.toString()+y.toString())-x-y)%9)!=0)){alert(&quot;I'm a monkey's uncle&quot;);}
 
Upvote 0 Downvote
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=&quot;Save&quot; src=&quot;/images/save.gif&quot; border=&quot;0&quot; height=&quot;24&quot; width=&quot;125&quot;>

Edward, if having two images is the only option, I have another question. How can I toggle between the images dynamically using Javascript?
 
Upvote 0 Downvote
<script>
buttonObject.disabled = true;
</script>

Doesn't work in NSN --BB
 
Upvote 0 Downvote
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:progid:DXImageTransform.Microsoft.BasicImage(GrayScale=0);}
</style>

Then call functions to switch it on and off like this
function GrayIt()
{
document.getElementById(&quot;yourpicID&quot;).filters.item(&quot;DXImageTransform.Microsoft.BasicImage&quot;).GrayScale = 1;
}

function ColourIt()
{
document.getElementById(&quot;yourpicID&quot;).filters.item(&quot;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(y)<10) &&(((parseIntx.toString()+y.toString())-x-y)%9)!=0)){alert(&quot;I'm a monkey's uncle&quot;);}
 
Upvote 0 Downvote
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 &quot;imageB.gif&quot;. 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
&quot;Do not read this sentence.&quot;
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
293
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
682
Mike Lewis
Mike Lewis
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
330
xwb
xwb
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
158
Daniel K
Daniel K
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
299
malpa
malpa

Part and Inventory Search

Sponsor

Back
Top