Question

A quickie, is it possible to have an image darkened using javascript or something?

I don’t need it on mouseovers or anything, just for the image to appear disabled (could I change the opacity of it using a style tag even?).

How would I do?

Answer 1

The simplest method is to use opacity on the img and, if necessary, a background element with the color you want to add (note that opacity is somewhat browser and version dependent, this example works in Firefox, Chrome and I assume other Webkit browsers):

img {
    float: left;
}
#light {
    opacity: .4;
    float: left;
}
#dark {
    background: black;
    float: left;
}
#dark img {
    opacity: .6;
    display: inline;
}

<img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
<img id="light" src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
<div id="dark">
 <img src="http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG"/>
</div>

http://jsfiddle.net/Sctkz/1/

And as David Thomas points out, if you are working with an with an alpha-transparency, you can add the background-color to the img itself:

http://jsfiddle.net/GfkeF/

According to Quirksmode, full IE support using compatibility views can be gained adding:

opacity: .5; /* Firefox, Chrome[, Webkit?] */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);

Otherwise, as Ktash and MDN note, you can use simply:

opacity: .5; /* Firefox, Chrome[, Webkit?] */
filter: alpha(opacity=50); /* In general, probably ok for IE */