homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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)

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)

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)

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)

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)

I made it work :)
Thank you!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved