javascript - Javascript 画像にカーソルを合わせるとメッセージを表示する方法

Question

以下のコードで画像警告を表示できます。ユーザー名またはパスワードが空の場合。

マウスを警告画像に合わせると、メッセージを表示したい。

例えば;

「ユーザー名を空にすることはできません!」UserName と「パスワードを空にすることはできません!」パスワード用。

マウスで画像にホバーしたときにメッセージを表示するために編集する場所は?

私のJavascriptコード:

function LoginButonOnclick() {
  var data= {
  UserName: $('#UserNameTextBox').val(),
  Password: $('#PasswordTextBox').val(),
  };
  if (data.UserName== null) {
    $("#showwarning1").html('<img src="~/Image/warning.png">');
  }
  if (data.Password== null) {
    $("#showwarning2").html('<img src="~/Image/warning.png" />');
  }
}

私の HTML コード:

<input type="text" id="UsernameTextBox" name="UsernameTextBox"/>
<input type="text" id="PasswordTextBox" name="PasswordTextBox"/>
<input type="button" onclick="LoginButonOnclick()" value="Enter"/>

<div id="showwarning1"></div>
<div id="showwarning2"></div>

Answer 1

なぜ自分で物事を複雑にする必要があるのですか....とても簡単です...タグのタイトル属性を使用して、マウスホバーメッセージを表示します!!<img>

<img src="~/Image/warning.png" title="Password is empty!!"/>

Answer 2

onmouseover 属性を使用して同じ関数を呼び出すことができるため、ホバー時とクリック時で同じことを行います。

  function LoginButonOnclick() {
  var data= {
  UserName: $('#UserNameTextBox').val(),
  Password: $('#PasswordTextBox').val(),
  };
  if (data.UserName== null) {
    $("#showwarning1").html('<img src="~/Image/warning.png">');
  }
  if (data.Password== null) {
    $("#showwarning2").html('<img src="~/Image/warning.png" />');
  }
}
<input type="text" id="UsernameTextBox" name="UsernameTextBox"/>
    <input type="text" id="PasswordTextBox" name="PasswordTextBox"/>
    <input type="button" onclick="LoginButonOnclick()" onmouseover="LoginButonOnclick()" value="Enter"/>

    <div id="showwarning1"></div>
    <div id="showwarning2"></div>

あるいは、jQuery を使用することもできます

Answer 3

jqueryを使えば簡単にできます。

http://api.jquery.com/mouseover/