Cast for two

Wednesday, May 19, 2010

HTML5 example to change the opacity of an image via CSS3

Here's a simple HTML5 example that changes the opacity of an image via CSS3 using an input range element and some Javascript.

<!DOCTYPE html>
<html>
<head>
 <title>HTML5 example to change the opacity of an image via CSS3</title>
</head>
<body>
<img id="img_0576" src="IMG_0576.jpg" alt="My bike"style="opacity: 0.5;" />
<input id="img_op" type='range' min='0' max='100' value='50' onchange="changeOpacity()">
<script>
function changeOpacity() {
 var opacity = document.getElementById('img_op').value/100;
 document.getElementById('img_0576').style.opacity = opacity;
}
</script>
</body>
</html>
This example is mainly to test out the use of code highlighting on Blogger as explained by Luka Marinko. It seems to work well. Huray!
If you're interested in HTML5 you can follow the Friendfeed on HTML5.