PDA

View Full Version : DHTML filters toggle on/off



bplemon
11-22-2004, 07:19 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?

Mehok
10-02-2006, 12:43 PM
<input type="file" onchange="myImage.src=this.value"></input>

onchange="myimage.jpg" src="this.value""</input>

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