Looking to change / replace an image when a text field onfocus

Question

Hi - I am looking for a solution to replace an image with another image when you focus on a text field.

There are 4 text fields and 5 images (1 image is the default image)

When you focus on each of the text fields, the correct image should replace the default image..

Thanks for any guide on this

Answer 1

I think what you are looking here are onfocus and onblur events:

The onFocus, onBlur and onChange events are often used in combination with validation of form fields.

Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field:

<input type="text" size="30" id="email" onchange="checkEmail()">

In your case, you could simply add handles for onblur and onfocus events to your images and change the image via DOM as required:

<img src="image.jpg" onblur="/*switch image back to original*/"
                     onfocus="/*replace image*/" />

If you want to learn JavaScript, I generally recommend looking at Javascript section in W3Schools.com. If you also want to understand how DOM works in more detail, see DOM section.

This should get you started!