|
#1
|
|||
|
|||
|
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? |
|
#2
|
|||
|
|||
|
Quote:
this value should link to java script in the document ie a href=javascript or you can source it outside the document that is whar src is for |
![]() |
| Bookmarks |
| Thread Tools | Search this Thread |
|
|