Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Categories

Welcome to the new platform of Programmer's Heaven! We apologize for the inconvenience caused, if you visited us from a broken link of the previous version. The main reason to move to a new platform is to provide more effective and collaborative experience to you all. Please feel free to experience the new platform and use its exciting features. Contact us for any issue that you need to get clarified. We are more than happy to help you.

Image Opener

gilbgilb Posts: 1Member
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

Comments

  • zibadianzibadian Posts: 6,349Member
    : 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 image tag based on the user input. Then you can use the innerHTML of, for example, a
    tag to place the created image tag in the webpage without reloading.
    Help on innerHTML: http://www.w3schools.com/dhtml/dhtml_dom.asp
  • mac_doggiemac_doggie Posts: 488Member
    : : 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 image tag based on the user input. Then you can use the innerHTML of, for example, a
    tag to place the created image 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 :-)

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


    website - page






    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;
    }






    [/code]
    ;-)
    -mac-
    mailto:mac_doggie@hotmail.com
    the Netherlands...


Sign In or Register to comment.