javascript to change an image source

I want to use javascript to change the src for images in a pretty lengthy web-based report.  Code below is stripped down to the very basics, but doesn't work.  It correctly alerts with the Pic.id, and it changes the desired border, so I know it's close.  Any ideas for getting it to load the new src?

I'm on a windows7 platform for testing (not a server).  I don't think this is the problem thought, because the ATL and BEL images load correctly in the basic html.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script type="text/javascript">
	function Ready() {
		alert("step1");
		var Pic = document.getElementById("r1c1");
		Pic.src="gif\HOU.Capacity.0307_0313.gif";
		Pic.border="4";
		Pic.width="100%";
		alert(Pic.id);
	}
</script>
</head>
<body onLoad="Ready()">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">
	<tr>
		<td width="50%"><img id="r1c1" border="0" src="gif\ATL.Capacity.0307_0313.gif" width="100%"></td></td>
		<td width="50%"><img id="r1c2" border="0" src="gif\BEL.Capacity.0307_0313.gif" width="100%"></td></td>
	</tr>
</table>
</body>
</html>

Open in new window

motokentAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
Don't set the width a second time (line 11) :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<script type="text/javascript">
	function Ready() {
		//alert("step1");
		var Pic = document.getElementById("r1c1");
		Pic.src="http://www.symbian-freak.com/images/news/07/11/android01.jpg";
		Pic.border="4";
		//Pic.width="100%";
		//alert(Pic.id);
	}
</script>
</head>
<body onLoad="Ready()">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" width="100%">
	<tr>
		<td width="50%"><img id="r1c1" border="0" src="http://www.droid-life.com/wp-content/uploads/2010/09/angry-birds-game.png" width="100%"></td></td>
		<td width="50%"><img id="r1c2" border="0" src="http://www.bazaarvoice.com/blog/wp-content/uploads/begging.jpg" width="100%"></td></td>
	</tr>
</table>
</body>
</html>

Open in new window

0
 
motokentAuthor Commented:
Thank you.  It worked great.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.