DHTML filters toggle on/off
hi, i am trying to make a web pagee that will allow the user to toggle between the various types of image filters. i can get this to work for one filter but not multiple ones. the code i have is
<html>
<head>
<title>Image Filters</title>
<style type="text/css">
<!--
@import "style.css";
img.alpha {filter:alpha(opacity=100, finishopacity=0, style=2)}
img.blur {filter:blur(add=0, direction=225, strength=10)}
img.flipH {filter:flipH}
img.flipV {filter:flipV}
img.chroma {filter:chroma(color=red)}
img.grey {filter:grey}
img.invert {filter:invert}
img.xRay {filter:xRay}
img.wave {filter:wave(add=0, freq=5, lightstrength=20, phase=220, strength=10)}
img.glow {filter:glow(color=blue, strength=5)}
img.shadow {filter:chroma(color=black) shadow(color=red, direction=225)}
img.dropShadow {filter:dropShadow(color=blue, offx=4, offy=4, positive=1)}
img.mask {filter:chroma(color=blue) mask(color=blue)}
div.header {background-color:red; position:absolute; top:0; left:0; height:10%; width:100%}
div.menu {background-color:black; position:absolute; top:10%; left:0; height:10%; width:100%}
div.main {background-color:red; position:absolute; top:20%; left:0; height:80%; width:100%}
h1 {text-align:center}
body {margin:0}
a:hover {color:#000000;}
a {text-decoration:none; font-size:15pt}
a:link {color:FFFFFF;}
a:active {color:FFFFFF}
a:visited {color:FFFFFF}
-->
</style>
<script src="code.js"></script>
<script type="text/JavaScript">
<!--
function invert(obj)
{
obj.filters.invert.enabled = !obj.filters.invert.enabled
}
-->
</script>
</head>
<body onLoad="loadHeader(); loadMenu()">
<div class="header"><h1 id="header"></h1></div>
<div class="menu"><h1 id="menu"></h1></div>
<div class="main">
<input type="file" onchange="myImage.src=this.value"></input>
</br></br>
<img src="" class="invert" id="myImage">
</br></br>
<button onclick="invert(myImage)">toggle</button></br>
</div>
</body>
</html>
the red bit is where im having the problem. this code allows the user to upload an image and i intend to have individual buttons for each filter. does anyone have more of a clue than me?
CSS Codes
Reply With Quote
Bookmarks