PDA

View Full Version : image filters



bplemon
12-01-2004, 08:31 PM
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?

nicolag
12-01-2004, 08:44 PM
hey bplemon, i seen your thread but haven't had time to reply until now.

the answer to your puzzle lies in chaining the filters in an external css file as follows:
img.filt {filter: alpha(opacity=100, finishopacity=0, style=2, enabled=false) blur(add=0, direction=225, strength=10, enabled=false) flipV(enabled=false) flipH(enabled=false) chroma(color=black, enabled=false) gray(enabled=false) invert(enabled=false) wave(add=0, freq=5, lightstrength=20, phase=220, strength=10, enabled=false) xRay(enabled=false) glow(color=blue, strength=15, enabled=false) shadow(color=red, direction=225, enabled=false) dropShadow(color=blue, offx=4, offy=4, positive=1, enabled=false) mask(color=blue, enabled=false)}

this basically puts them into an array with your first filter alpha at position [0] and the last one mask at [13]. You then need to create 13 buttons with the following code for the 1st one 'alpha'

<button onclick="myImage.filters[0].enabled = !myImage.filters[0].enabled,
myPar.filters[0].enabled = !myPar.filters[0].enabled">Alpha</button>
(do this for the next 12 changing[0] for the next element i.e. [1], [2] etc.

then at the click of a button you can toggle your filters

any other queries contact me
sexy nic

nicolag
12-01-2004, 08:46 PM
change myPar to myImage