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.
Posts
2 comments:
This listing of smoke meter manufacturers is provided as a courtesy by the ARB to the regulated industry novo gloss.
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.
Post a Comment