If it won't be simple, it simply won't be. [Hire me, source code] by Miki Tebeka, CEO, 353Solutions

Tuesday, September 23, 2008

"Disabling" an image

Sometimes you want to mark a button image as "disabled". The usual method is to have two images and display the "disabled" state image when disabled.

However you can use the image opacity the mark is as disabled as well:


<html>
<head>
<title>Dimmer</title>
<style>
.disabled {
filter: alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
}
</style>
</head>
<body>
<center>
<p>Show how to "dim" an image, marking it disabled</p>
<img src="image.png" id="image" /> <br />
<button onclick="disable();">Disable</button>
<button onclick="enable();">Enable</button>
</center>
</body>
<script src="jquery.js"></script>
<script>
function disable() {
$('#image').addClass('disabled');
}

function enable() {
$('#image').removeClass('disabled');
}
</script>
</html>

No comments:

Blog Archive