css disabled attribute

i have an img on my web page with an id of temp that i have written an onclick event for
using javascript. My question is using css is it possible to have two different background images
depending on if the attribute disabled is true or not?

#temp[disabled=true] {
      background-image:url("grayed-out.jpg");
}

#temp {
    background-image:url("normal.jpg");
}

this doesn't seem to be working. I am changing the value of the disabled attribute between true
and false in the javascript.


smiffeAsked:
Who is Participating?
 
TNameCommented:
Sorry the style declaration shouldn't contain attribute selectors. Corrected:

<style>
#temp  { border:1px solid #f00;  }
#temp2  { border:1px solid #0f0;  }
#temp3  { border:1px solid #00f;  }
.class1 {
      background-image:url("grayed-out.jpg");
}

.class2{
    background-image:url("normal.jpg");
}
</style>
0
 
TNameCommented:
>I am changing the value of the disabled attribute between true

Then simply change the class too:

document.getElementById('temp').className='class1';   // or 'class2'

.calss1 {
      background-image:url("grayed-out.jpg");
}

.class2 {
    background-image:url("normal.jpg");
}
0
 
TNameCommented:
I mean in the onClick event you can do both, enable/disable and toggle the class name.

<div id="temp" class="class1" onClick="toggleState(this)"></div>

If you need help with the js, just tell us.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
TNameCommented:
The problem with attribute selectors like [disabled="true"] is that  IE6 doesn't support them.

BTW e.g. in Firefox, if you specify
  img#temp[disabled="true"] {border:1px solid #f00;}

then you have to set the element disabled with
  disabled="true"
and not for example
  disabled="disabled"

0
 
smiffeAuthor Commented:
that might work but i have multiple images i am doing this for so i dont really want to make
a whole bunch of meaningless class names. Can i just make two classes call
them normal and disabled and then use the id

#temp.normal {  .....
                        }

#temp.disabled { .....
                          }

or would it be

.disabled#temp

im not sure how to do this
0
 
TNameCommented:
No, you cannot concatenate a class and ian d like this.

Have a look at this example, as I'm not sure what tag your elements really are, I took divs, even if it doesn't make much sense to enable/disable a div:

<html>
<head>
<style>
#temp  { border:1px solid #f00;  }
#temp2  { border:1px solid #0f0;  }
#temp3  { border:1px solid #00f;  }
.class1[disabled=true] {
      background-image:url("grayed-out.jpg");
}

.class2{
    background-image:url("normal.jpg");
}
</style>

<script>
function toggleClass(obj) {
   obj.enabled=(obj.enabled=='true') ? 'false' : 'true';
   obj.className=(obj.className=='class1') ? 'class2' : 'class1';
}
</script>

</head>
<body>
<div id="temp" class="class1" disabled="true" onClick="toggleClass(this);">&nbsp;</div>  
<div id="temp2" class="class1" disabled="true" onClick="toggleClass(this);">&nbsp;</div>  
<div id="temp3" class="class1" disabled="true" onClick="toggleClass(this);">&nbsp;</div>  
</body>

</html>
0
 
TNameCommented:
 >you cannot concatenate a class and ian d like this.
should be
  you cannot concatenate a class and an id like this.
0
 
smiffeAuthor Commented:
thanks a lot i didn't realize that it would be difficult to do. I ended up just
setting the opacity of the image to 50% when its disabled so it has
the same effect with less hassle.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.