JavaScript: Changing Image at runtime.

This is just very basic example. hum? but this is also very bad UI design that you should NOT use in your web application. Because the code doesn’t work on Web Server. In order to make this script to work, your have to add this page which is using this code as a trust site in Internet Explore 6 or 7. Of course, it won’t work in Mozilla-based browsers.. but the firefox extension called Noscript might help the script to work in Mozilla Firefox. (But I have tested yet.)

Here is the discussion.

Feel free to let me know if you have any comment for this script.

<meta http-equiv="Content-Language" content="en-us">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script language=javascript>
Changing the image at runtime by using JavaScript.
@imgId   : ID of Image HTML Control
@strPath : The path of the image that you just browse.
function changePic(imgId,strPath){
var o = document.getElementById(imgId);
var s = new String(strPath);
s = s.replace("\\","/");
alert("file:///" + s);
o.src="file:///" + s;


<img id=“img1″ border=”0″ src=”../sm_sunita.jpg” width=”300″ height=”225″>
<input type=”file” name=”F1″ size=”20″ onchange=”changePic(‘img1′,this.value)”>

Note: Demo Images has been removed.

Leave a Reply