如何在输入框上触发不同的图像？

Question

我有2张图片

第一个看起来像这样 第二个是这样的 的目标

• 当用户登陆我的网站时，第一张图片加载为default
• 当用户开始输入username或password时，我想在第一张图片的exact位置加载第二张图片。

我该怎么做？

我是否需要使用JS来完成此操作？

---

EDIT

• 我希望将焦点显示在2个输入中的一个
上
• 即使用户删除了文本框中的所有字母，但只要他/她在输入字段中。 我想触发第二张图片。

对所有参与此帖和您考虑的人们thanks！

Answer 1

我相信这正是你的意思 - 对吧？

SOLUTION

JS

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

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

});

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

});

Answer 2

试试这个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();
});

Answer 3

您需要使用javascript来更改图片。 但是如果你动态改变图像“src”属性 - 或者背景图像（如果不是img） - 你会在转换过程中看到一点点闪烁。

要获得干净的效果，您可以使用sprite technique。

Answer 4

您将需要javascript和/或JQuery库来实现您想要做的事情。

链接到jsfiddle：http://jsfiddle.net/larryjoelane/0esjvv46/

如果右键单击img元素并单击inspect元素，您将在中看到 html src属性会发生变化。

下面是一些基本的HTML来帮助你入门。

<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你需要更改img元素的src属性：

    $("#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