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.

3 comments:

html5 media player said...

I have no words for this great post such a awe-some information i got gathered. Thanks to Author.
html5 music player

jorg gray said...

This listing of smoke meter manufacturers is provided as a courtesy by the ARB to the regulated industry novo gloss.

Judy said...

Thank you for this great piece of lean code. I can't believe others use huge jquery libraries to do what you have accomplish with a couple of short lines.