: : Hi,
: :
: : Can someone please help me. I'm trying to find a piece of code that will allow the user to submit the name of a picture and then that picture is displayed on the screen. Every time the user changes the picture name in the form, the picture changes.
: :
: : e.g. user input "dog" - file dog.jpg is displayed. Essentially the form changes the text inside the IMG SRC= tag.
: :
: : My friend told me that it can't be done, but I'm sure it must be possible. Can anyone help?
: :
: : Many Thanks
: :
: It can be done. The onsubmit() event should create the <img> tag based on the user input. Then you can use the innerHTML of, for example, a <div> tag to place the created <img> tag in the webpage without reloading.
: Help on innerHTML:
http://www.w3schools.com/dhtml/dhtml_dom.asp
:
Here... I made you a little examplescript...
Hope you find it usefull. As you see, it's not very difficult, but you might need to build in a check if a name is specified of an image that exists... Or else a red cross will show... In this example you can type in cat, dog or horse... To check wether an image exists you could try loading it first, but that is for a later lesson
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" />
<html lang="nl">
<head>
<title>website - page</title>
<link rel="Stylesheet" type="text/css" href="../css/mainstyles.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="R.V. van Doggenaar" />
<meta name="company" content="MAC-DOGGIE" />
<meta name="template" content="" />
<script type="text/JavaScript" Language="JavaScript">
function LoadImage() {
var imagename = document.getElementById('imagename').value;
if((imagename.toLowerCase() != 'dog') && (imagename.toLowerCase() != 'cat') && (imagename.toLowerCase() != 'horse')) {
imagename='pixel.gif'
imagealt ='there is no picture loaded yet...'
}else {
imagealt = 'this is a picture of a '+imagename;
}
document.getElementById('thePicture').src = 'images/'+ imagename + '.jpg';
document.getElementById('thePicture').alt = imagealt;
}
</script>
</head>
<body>
<div id="con_Main">
<img id="thePicture" src="pixel.gif" alt="there is no picture loaded yet..." />
<input type="text" id="imagename" value="" /> <a href="JavaScript:LoadImage()">Load Image</a>
</div>
</body>
</html>
-mac-
mailto:mac_doggie@hotmail.com
the Netherlands...
