Please I need some help.. :(

JavaScript
1

I have a project its a website that can do uploading image then after upload it will preview at the 2nd page, and then when the user click desaturate, the preview image will be in desaturated tone or mode, or when if the user click sepia the preview image will be in sepia toned,

Well I already finished the project but the thing is, and the main problem now is,

How can I change my effect list into button…

I made this website by reviewing taking some ideas and put it all together, but when it comes into transferring or converting the list of effects into a button I always fail… please help me… heres the code…

Page one

<html>

<title>Quick Design Express</title>
<head>


</head>

<body bgcolor=black>


<center>

<br/><br/><br/>


<div style="background-color:gray;width:600px; height: 600px; border:5px solid rgb(255,255,255);">



<h1>Upload Image Here</h1><br/><br/><br/>

Note: Please do not upload higher sized images than 400 pixels.<br/><br/><br/><br/>
<form action="index2.php" method="POST" enctype="multipart/form-data" name=form1>

<input type="file" name="image" >

<input type="submit" value="Upload Image">
</form></font>
</div>
<br/><br/><br/>

</center>
</body>
</html>

Page 2

<center><br/><br/><br/><br/>
<div style="background-color:gray;width:900px; height: auto; border:5px solid rgb(255, 255, 255);"><br/><br/>
<?php
// Turn the image that is being uploaded into a varible.
$imagename = $_FILES['image']['name'];

// Copies the image from your web servers temporary file to your web server

copy($_FILES['image']['tmp_name'], "./$imagename");
// Send out a message afterwards to say it has been uploaded
echo "<h2>Your image has been uploaded and can be viewed here: </h2><br>";
echo "<font size=4>http://localhost/quickdesignexpress/labs/imagefx/$imagename</font> <br><br>";
echo "<b>Preview:</b><br><br><img src='./$imagename' >";
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.google.com/2005/gml/b" xmlns:data="http://www.google.com/2005/gml/data" xmlns:expr="http://www.google.com/2005/gml/expr"> 

<head>  

<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="imagefx.js"></script>
<script type="text/javascript" src="imagefx_desaturate.js"></script>
<script type="text/javascript" src="imagefx_sepia.js"></script>

<script>

function filter(strFilter) 

{

	document.getElementById("filterimagecontainer").innerHTML = "<br/><img src=\\"<?echo "$imagename" ?>\\" id=\\"filterimage\\"/ <br/><br/><br/>"

	jsImageFX.doImage(document.getElementById("filterimage"), strFilter);

}

</script>


</head>

<body bgcolor=black>


<center>


            <div class="blog-posts hfeed"> 
              <div class="post hentry uncustomized-post-template"> 
                <h3 class="post-title entry-title"> 
                  Javascript Image Effects                </h3> 
                <div class="post-body entry-content"> 
 
<!-- google_ad_section_start -->


Click the effect names in the table to apply effects to the sample image.<br/><br/>
</center>

<div class="sampleimage">

<br/><b>Processed image preview:</b><br/>

<div id="filterimagecontainer">

<?php
echo "<br><img src='./$imagename' id='filterimage' ><br><br>";
?>

</div>
</div>


<div class="effecttable" id="effecttable">

<div class="effecttableheader">

	<span class="effectnameheader">Effect</span>

	<span class="effectnamesupport">Compatibility</span>

</div>

</div>





<script>



var aTests = [

	
	["desaturate", 					"Converts the image to grayscale", ["ie","ff","op","sa"]] ,

	
	["sepia",					"Sepia toning", ["ie","ff","op","sa"]],

	];



var oTable = document.getElementById("effecttable");



for (var a=0;a<aTests.length;a++) {

	var oTest = aTests[a];



	var strSupport = "";

	for (var b=0;b<oTest[2].length;b++) {

		switch(oTest[2][b]) {

			case "blank"	: strSupport += "<image src='icon_blank.gif'>"; break;

			case "ie" 	: strSupport += "<image src='icon_ie.gif' title='Internet Explorer 7+'>"; break;

			case "ff" 	: strSupport += "<image src='icon_firefox.gif' title='Firefox 2.0.0.14 or FF3 beta'>"; break;

			case "op" 	: strSupport += "<image src='icon_opera.gif' title='Opera 9.27'>"; break;

			case "opb" 	: strSupport += "<image src='icon_operabeta.gif' title='Opera 9.50 Beta'>"; break;

			case "sa" 	: strSupport += "<image src='icon_safari.gif' title='Safari 3.1+'>"; break;

			case "sawn" 	: strSupport += "<image src='icon_webkitnightly.gif' title='Use the latest WebKit Nightly'>"; break;

			case "button"	: strSupport += "<image src='icon_ie.gif'>"; break;
		}

	}



	var strHTML = "<div class='effecttablerow'>"

		+ "<span class='effectname' "

		+ "onclick=\\"filter('" + oTest[0] + "');\\" "

		+ ">" 

		+ oTest[0] 

		+ "</span>"

		//+ "<span class='effectdesc'>" + oTest[1] + "</span>"

		+ "<span class='effectsupport'>" + strSupport + "</span>"

		+ "</div>";



	oTable.innerHTML += strHTML;

}





</script><br/><br/>

</div><br/><br/>
Copyright &copy;
<?php $the_year = date("Y"); echo $the_year; ?>
&nbspwww.quickdesignexpress.com
<br/>All Rights Reserved.
<br/><br/>

</body></html>

or you can download my project here

project.rar

and for online demo go here

Quick Design Express

@ all thanks in advance, I hope you can help me guys ::sick:

Thanks and God Bless

2

@ all don’t mind it I already fixed it… whew… kinda simple one :smiley: