Welcome to WebmasterWorld Guest from

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


I Will Make It

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

5+ Year Member

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.

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

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)

WebmasterWorld Senior Member 10+ Year Member

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

4:19 pm on Oct 13, 2010 (gmt 0)

5+ Year Member

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)

WebmasterWorld Senior Member 10+ Year Member

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.src = "/images/"+theField+".jpg";

That's untested but it ought to work.

I Will Make It

8:07 pm on Oct 20, 2010 (gmt 0)

5+ Year Member

I made it work :)
Thank you!

Featured Threads

Hot Threads This Week

Hot Threads This Month