How to trigger different image base on input-box?

Question

I have 2 images

The first one look like this and second one like this GOAL

• The first image load as default when the user land my my site
• When user start to type in their username OR password , I want to load the second image instead at the exact position of first image was placed.

How do I do that ?

Will I need to use JS to get this done ?

---

EDIT

• I want to show the image a moment the focus is on one of the 2 inputs
• Even if the user delete all letters in the textbox but as long as he/she is at the input field. I want to trigger the 2nd image.

Huge thanks to all of you who involve in this post and your consideration !

Answer 1

I believe this is exactly what you mean - right ?

SOLUTION

JS

$("#image2").hide();

$('#username').on('input', function (event) {
    $("#image1").hide();
    $("#image2").show();

});

$('#password').on('input', function (event) {
    $("#image1").hide();
    $("#image2").show();

});

Answer 2

You will need javascript and/or the JQuery library to make what you want to do happen.

Link to jsfiddle: http://jsfiddle.net/larryjoelane/0esjvv46/

If right click on the img elements and click on inspect element you will see in the html that the src attributes will have changed.

Below is some basic html to get you started.

<img id = "image1" src="pathToImage1" alt ="1st Image">

<input type="text" id="username" value ="">

 <input type="text" id="password" value ="">

 <img id = "image2" src="pathToImage2" alt ="2nd Image">

JQuery you will need to change the img element src attribute:

    $("#username").on("change",function(){//begin on change event



    //replace the #image1 img element src with the #img2 element src
    $("#image1").attr("src",$("#image2").attr("src"));



});//end on change event



  $("#password").on("change",function(){//begin on change event



    //replace the #image1 img element src with the #img2 element src
    $("#image1").attr("src",$("#image2").attr("src"));



});//end on change event

Answer 3

You will need to use javascript in order to change the image. But if you change dynamically the image "src" attribute – or the background-image if not an img – you will see a little blink during transition.

For a clean effect you can use the sprite technique.

Answer 4

try this http://jsfiddle.net/tv0kgq6h/

html

<div id="first" style="position: absolute; top:0px;left: 0px;">
    <input class="txt1" type="text" />
    <br>
    <input class="txt1" type="password"/>
     <br>
    <input type="button" value="submit"/>
</div>
<div id="second"  style="position: absolute; top:0px;left: 0px;display:none">
    <input type="text" />
    <br>
    <input type="password"/>
     <br>
    <input type="button" value="submit2"/>
</div>

js

$(".txt1").click(function(){
$("#fist").hide();
  $("#second").show();
});