Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
SQL Server

How We can Edit an Image using JavaScript .

Author: DevASP
Download Source Code :

This article is about how you can edit an image. In this application you can choose an image and you can modify the width, height, border, and add a tool tip.

Steps you will do.


Start visual studio and create a new web application.


Open the HTML design of you web form and add the following JavaScript functions before closing the head tag.



<script language="javascript">

function edit() {

picture = document.image.picture.value

width = document.image.width.value

height = document.image.height.value

border = document.image.border.value

tooltip = document.image.tooltip.value

document.pic.src = " " + picture + " "

document.pic.width = " " + width + " "

document.pic.height = " " + height + " "

document.pic.border = " " + border + " "

document.pic.alt = " " + tooltip + " "





Now add the following HTML code to design the layout of you web page an call the above JavaScript functions.



<body bgcolor=#009999>

<div style="text-align: center;">

<h2><u>Image Editor</u></h2>

<form name="image">


<font face="Arial" size="3pt">File Name: <input type="file" name="picture" size="25"><br>


Width: <input type="text" name="width" size="10"><br>


Height: <input type="text" name="height" size="10"><br>


Border:</font> <input type="text" name="border" size="3"></font><br>


<font face="Arial" size="3pt">Tooltip: <input type="text" name="tooltip" size="15"></font><br>


<input type="button" value="Edit" onclick="edit();"> <input type="reset" value="Clear"><br>



<img name="pic"><br>

<font size="2pt">(Image will appear here)</font>



<h3>Dont forget to visit<br>

<a href="http:\\"></a></h3>




This is all you will do. Now run your application and browse an image, give its height, width, border, tool tip and then click on edit button, the resultant image will be displays on the web page










Article Comments


Really Good I like this CODE.

Keep it up


Posted on 12/14/2006 12:45:04 AM by Kapil

How We can Edit an Image using JavaScript .

Posted on 4/6/2007 2:20:55 AM by Senthil Kumar

how we can edit the image using

Posted on 11/6/2008 11:40:18 PM by manikya prabhu

how to login using form authentication using 2.0

Posted on 11/19/2008 2:59:33 AM by manik prabhu

Add Article Comment:
Name :
Email Address :
Comments :
<< Creating Smart Images in ASP.NET.

Disclaimer - Privacy
© 2002-2017