Change Image URL when cleint changes path in textbox

ScottNL1

09-08-2008, 10:50 AM

I am having some trouble in changing the img scr when the textbox location has been changed.

For example.

this is filled in the Textbox > images/client/"theimagetheyhaveuploaded.gif"

when it has been filled in the Preview of the image is showen on the same page.

This is how i set the url of the picture.

<input class="text" type="text" name="image_small_{image_index}" value="{picture_small}" size="50" maxlength="255" onchange="document.getElementById('preview_image').innertext=this.value"/>

If i want to diplay the text in the textbox further down the page i fill in

<td id="preview_image"></td> This will display what has been filled in the textbox.

But i want to use the set value "preview_image" as a url where the picture is located.

This is what i want to do.

<td align="right"><img scr="preview_image"></td>

Of course this does not work but what should i do?

rangana

09-09-2008, 02:46 AM

This is what i want to do.

<td align="right"><img scr="preview_image"></td>

Of course this does not work but what should i do?

If you mean it literally, then it will not work since there is no scr attribute, you mean to use src instead.

For your problem, mind rephrasing it and showing a complete code instead :p

vwphillips

09-09-2008, 10:12 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function CngImg(ip,id){
var img=document.getElementById(id);
var imgobj=new Image();
imgobj.src=ip.value;
if (!img.defaultimg) img.defaultimg=img.src;
img.src=img.defaultimg;
CkComplete(img,imgobj);
}

function CkComplete(img,imgobj){
if (imgobj.complete) img.src=imgobj.src;
else img.to=setTimeout(function(){CkComplete(img,imgobj)},500)
}

/*]]>*/
</script></head>

<body>
<input class="text" type="text" name="image_small_{image_index}" value="{picture_small}" size="50" maxlength="255" onblur="CngImg(this,'tst');" /><br />
<img id="tst" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" />
<br />
<br />
Valid Test Images<br />
http://www.vicsjavascripts.org.uk/StdImages/Two.gif<br />
http://www.vicsjavascripts.org.uk/StdImages/Three.gif<br />
http://www.vicsjavascripts.org.uk/StdImages/Four.gif<br />
</body>

</html>

ScottNL1

09-09-2008, 11:11 AM

Vic Thanks allot, works perfect. Added you're website to my fav.