Go Back   Dynamic Drive Forums > General Coding > JavaScript
Search Dynamic Drive Forums:

Reply
 
Thread Tools Search this Thread
  #1  
Old 11-22-2004, 07:19 PM
bplemon bplemon is offline
New Comer (less than 5 posts)
 
Join Date: Nov 2004
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default 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?
Reply With Quote
  #2  
Old 10-02-2006, 12:43 PM
Mehok Mehok is offline
Junior Coders
 
Join Date: Oct 2006
Posts: 91
Thanks: 6
Thanked 0 Times in 0 Posts
Default

Quote:
<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
Reply With Quote
Reply

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:42 AM.

Home - Contact Us - Archives - Link to DD - Top 

Powered by vBulletin® Version 3.8.1
Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.