...

View Full Version : Is this possible?



Hej
11-26-2012, 10:04 PM
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?

Hej
11-26-2012, 11:06 PM
I've managed to work on this while waiting for this topic approval.

This is what I have done so far:


<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?

rnd me
11-26-2012, 11:17 PM
<html>
<input onchange='img.src="/"+this.value+".png"'>
<br>
<img id=img>
</html>

Old Pedant
11-26-2012, 11:20 PM
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?

Old Pedant
11-26-2012, 11:22 PM
<html>
<input onchange='img.src="/"+this.value+".png"'>
<br>
<img id=img>
</html>


Ummmm...just img.src and not document.getElementById('img').src??

Philip M
11-26-2012, 11:25 PM
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:-


<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?"

Hej
11-26-2012, 11:46 PM
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.

rnd me
11-27-2012, 02:12 AM
Ummmm...just img.src and not document.getElementById('img').src??

yup, pretty cool huh?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum