Welcome to WebmasterWorld Guest from 54.225.38.176

Forum Moderators: open

Message Too Old, No Replies

Show image when onfocus in input-type:text

Using a for-loop to name and ID the input-fields

     
8:08 pm on Oct 12, 2010 (gmt 0)

Full Member

10+ Year Member

joined:Jan 31, 2006
posts: 305
votes: 0


I don't know if this is possible, but I have a php for-loop which prints out 9 input boxes (text fields).

I want 9 different images to show up, depending on which input field I focus on. Can this be done?

This is my for loop.


<?php
for($i=0;$i<sizeof($options_name);$i++) {
echo "\n" . $options_menu[$i];
?>


I have this small javascript:

<script type="text/javascript">
function show(Id) {
document.getElementById(Id).style.display="inline";
}
</script>


Would this be possible?:
<span onmouseover="show('myImage')"><div style=""><b><?php echo $options_name[$i]; ?>:</b></div>
<div style="border: solid 0px blue;"><?php echo "\n" . $options_menu[$i]; ?></div></span>


And then:
<span id="<?php echo $options_name[$i]; ?>" style="display:none;" /><img src="http://www.domain.com/image<?php echo $options_name[$i]; ?>.jpg"></span>
8:40 am on Oct 13, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 12, 2003
posts: 1199
votes: 0


What exactly are you trying to do? Your question isn't clear. You want "9 different images to show up", or you want ONE of nine different images to show up? And you want the image(s) to show up on field focus (as per your question), or on mouseover (as per your code)?

If you're trying to get a single image related to an input field to show up when you focus the field, then how about this:

<input type=text id=input1 onfocus="show(me.id)">
4:19 pm on Oct 13, 2010 (gmt 0)

Full Member

10+ Year Member

joined:Jan 31, 2006
posts: 305
votes: 0


Sorry for my bad explanation.

I have 9 input text fields.
I want to attach separate images to each text-field. That will be 9 images all together.

When one of the inputfields are in focus, I want THAT field's image to show up. If the user place the focus in another textfield, I want the image to be replaced by THAT input field's image, and so on.

So 9 different images, where one image shows up depending on which textfield has the focus.

$options_menu[$i] is the input fields.

The $options_menu[$i] contains this for field nr. 4:

<input onfocus="show(me.id)" name="id[TEXT_PREFIX4]" size="3" maxlength="3" value="" id="attrib-4-0" type="text">

Now, how can I attach an image to this field?
1:53 am on Oct 15, 2010 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 12, 2003
posts: 1199
votes: 0


Okay. If your ID's are in the form "attrib-FIELDNUMBER-0", then your images should be named "attrib-1-0.jpg", "attrib-2-0.jpg", "attrib-3-0.jpg", etc.

Here's the code:

<img id=theImage style="display:hidden">
<script type=text/JavaScript>
function show(theField) {
obj = document.getElementById('theImage');
obj.style.display='block';
obj.src = "/images/"+theField+".jpg";
}
</script>


That's untested but it ought to work.
8:07 pm on Oct 20, 2010 (gmt 0)

Full Member

10+ Year Member

joined:Jan 31, 2006
posts: 305
votes: 0


I made it work :)
Thank you!