CODEWITHSUNDEEP
javascriptjqueryimagehovermouse
user2791307
user2791307

Reputation: 55

Javascript How to show message on hover to image

I can show image warning with below codes.If username or password is empty.

I want to show message , if mouse on hover to warning image.

For Example;

"UserName Can Not Be Empty!" for UserName and "Password Can Not Be Empty!" for Password.

Where to edit for showing message on hover to image with mouse?

My Javascript Code:

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" />');
  }
}

My Html Code:

<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>

Upvotes: 1

Views: 9830

Answers (5)

NoviceProgrammer
NoviceProgrammer

Reputation: 3365

you can consider using the jqueryUI tooltip widget.

Refer: http://jqueryui.com/tooltip/

alternatively use the hover event :http://api.jquery.com/hover/

Upvotes: 2

Deepak Mishra
Deepak Mishra

Reputation: 21

You can use the onmouseover attribute to call the same function, so that it will do the same thing on hover as on click.

  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>

Alternatively, you could also use jQuery

Upvotes: 2

DarkHorse
DarkHorse

Reputation: 2770

Why to go and complicate things for yourself.... Its so simple... use the title attribute of <img> tag to show mouse hover messages!!

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

Upvotes: 7

Lekhnath
Lekhnath

Reputation: 4625

$(function(){
 $("#showwarning1").on('mouseover', function(){
  //show error message to the user
  console.log("UserName Can Not Be Empty!");

 });

 $("#showwarning2").on('mouseover', function(){
  //show error message to the user
  console.log("Password Can Not Be Empty!");
 });
});

Upvotes: 0

Emre Acar
Emre Acar

Reputation: 920

You can do it very easily by using jquery.

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

Upvotes: 0

Related Questions