Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Hej
    Hej is offline
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Is this possible?

    I wanna create something that works as following:

    When typing into a form field a prefix I want an image to appear below with that prefix I just typed in. Let me give an example:

    I type chicken into the field.

    Below this should show up:

    <img src="http://www.website.com/chicken.png" />

    Understand what I mean?

  • #2
    Hej
    Hej is offline
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've managed to work on this while waiting for this topic approval.

    This is what I have done so far:
    Code:
     <p><form name="Exercise_1">
     <input name="string1" value="Input name"><p>
    <input name="showMeArea" readonly="true"><br>
     <input type="button" value="Submit"
     OnClick="showMeArea.value= 'http://url.com' + string1.value + '&size=175';"></p>
     </form></p>
    My question now is how can I make this appear in html outside the form-thingy?

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,444
    Thanks
    11
    Thanked 598 Times in 578 Posts
    Code:
    <html>
      <input  onchange='img.src="/"+this.value+".png"'>
      <br>
      <img id=img>
    </html>
    Last edited by rnd me; 11-26-2012 at 11:20 PM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,555 Times in 4,519 Posts
    Not hard.

    But the problem is you need a list of *ALL* the available images.

    If there only a few hundred, you could just put the names into your JS code and then look for matches.

    If thousands of them, you would want to go ask the server for a match. That means probably using AJAX (though not necessarily...there's an easier trick).

    And the other problem you have is WHAT constitutes the BEST MATCH for a given prefix???

    Suppose the user types in "car" and you show an image of a car. But the keep typing and add a "p" to get "carp" so you show a picture of a carp (fish) but then then type "et" to get "carpet" and ... Well, you get the idea. Maybe you should have shown the picture of the "carpet" in the first place?

    You need to fully flesh out your requirements. Decide what constitutes a match. Decide how many images you will have. Will you do it all in JS or will you use help from a server?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,118
    Thanks
    80
    Thanked 4,555 Times in 4,519 Posts
    Quote Originally Posted by rnd me View Post
    Code:
    <html>
      <input  onchange='img.src="/"+this.value+".png"'>
      <br>
      <img id=img>
    </html>
    Ummmm...just img.src and not document.getElementById('img').src??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,243
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    Quote Originally Posted by Hej View Post
    I wanna create something that works as following:

    When typing into a form field a prefix I want an image to appear below with that prefix I just typed in. Let me give an example:

    I type chicken into the field.

    Below this should show up:

    <img src="http://www.website.com/chicken.png" />

    Understand what I mean?
    You mean something like this:-

    Code:
    <input type = "text" id = "t1" onkeyup = "check(this)">
    <br>
    <div id = "pic"></div>
    
    <script type = "text/javascript">
    
    function check(which) {
    document.getElementById("pic").innerHTML = "";
    var val = which.value.toLowerCase();
    
    if (/(\bchicken\b)/g.test(val)) { // the whole word chicken (not chickens) case-insensitive. Omit the second \b to allow chickens, chickenpox etc.
    alert ("The word chicken was typed");
    document.getElementById("pic").innerHTML = "<img src = 'http://www.website.com/chicken.png'>";
    }
    // repeat for another different word
    
    }
    
    </script>
    But I endorse Old Pedant's comment about car - carp - carpet - a lot depends on how many matches you plan to have. My code will work with up to a few dozen, more probably requires server-side assistance.

    Do you just want one image or several where the text with different words is matched?



    Overheard in Italy: "The Tower of Pisa - is it actually in Pisa?"
    Last edited by Philip M; 11-26-2012 at 11:39 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    Hej
    Hej is offline
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Not hard.

    But the problem is you need a list of *ALL* the available images.

    If there only a few hundred, you could just put the names into your JS code and then look for matches.

    If thousands of them, you would want to go ask the server for a match. That means probably using AJAX (though not necessarily...there's an easier trick).

    And the other problem you have is WHAT constitutes the BEST MATCH for a given prefix???

    Suppose the user types in "car" and you show an image of a car. But the keep typing and add a "p" to get "carp" so you show a picture of a carp (fish) but then then type "et" to get "carpet" and ... Well, you get the idea. Maybe you should have shown the picture of the "carpet" in the first place?

    You need to fully flesh out your requirements. Decide what constitutes a match. Decide how many images you will have. Will you do it all in JS or will you use help from a server?
    Thanks for your answers. I will be using an API for this. The API allows me to use their http://www.url.com/image.php?name=whatItypeinfield.php. What I mean is if someone would enter a faulty name in the field the fallback for that will be automatically be a standard image that's used for just that purpose. I don't know if that makes any sense but I hope it does.

    So basically it doesn't matter what someone types in the field as if someone would type a name of an image that does not exist it will still show the fallback image.

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,444
    Thanks
    11
    Thanked 598 Times in 578 Posts
    Quote Originally Posted by Old Pedant View Post
    Ummmm...just img.src and not document.getElementById('img').src??
    yup, pretty cool huh?
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •