Show image when onfocus in input-type:text

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

[I Will Make It]

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>

[MichaelBluejay]

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

[I Will Make It]

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?

[MichaelBluejay]

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.

[I Will Make It]

I made it work :)
Thank you!