• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1259
  • Last Modified:

jQuery hover - change background image

I am trying to use some simple jQuery to change the background image on a CSS class of a input with a class.

I have the code below in the box. I have seen the 'background-image' as that and 'backgroundImage' both showed no errors, but does not change my image.

Any ideas?

Thanks,

Ryan
jQuery("input.submit").hover(
		  function () {
		  $(this).css('background-image','url(../images/submit-on.png)');
		   console.log("over");
		  }, 
		  function () {
		    $(this).css('background-image','url(../images/submit-off.png)');
		  }
		);

Open in new window

0
catonthecouchproductions
Asked:
catonthecouchproductions
  • 3
  • 2
  • 2
  • +3
1 Solution
 
Hans LangerCommented:
Your button submit is including the class=".submit"?
what is the size of the button and the image?
0
 
Gurvinder Pal SinghCommented:
Is the path correct? are you able to see the console logs?
0
 
Hans LangerCommented:
This should work unless you have problems with the image size:

  <input class="submit" type="submit" value="click here" />
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
catonthecouchproductionsAuthor Commented:
This is my HTML

<input id="submitbutton" name="submitbutton" class="submit" type="submit" value="" />
0
 
catonthecouchproductionsAuthor Commented:
I see the console log when i have the css() commented out.
0
 
DesignbyonyxCommented:
you switch syntax in your code from jQuery to dollar sign.  Pick one and stick with.  You can do this:

(NOTE: I save the button in a variable for better performance)
(function($) {
    var $btnSubmit = $('input.submit')
    $btnSubmit.hover(function() {
        $btnSubmit.css('background-image','url(../images/submit-on.png)');
    }, function() {
        $btnSubmit.css('background-image','url(../images/submit-off.png)');
    });
}(jQuery));

Open in new window

0
 
kadabaCommented:
just an example....
seems to be you are using more then one js lib..
code seems fine

<!DOCTYPE html>
<html>
<head>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		$("input.submit").hover( function () {
		  $(this).css('background-image','url(http://4.bp.blogspot.com/_wQ_-unDZaEY/S9cll-eTjII/AAAAAAAAAB0/I1svixuna1c/s320/SubmitYourIdea.jpg)');
		  },
		  function () {
		    $(this).css('background-image','url(../images/submit-off.png)');
		  }	);
		});

	</script>
</head>
<body>
	<input type="submit" class="submit" style="width:320px;height:320px">
</body>
</html>

Open in new window

0
 
leakim971PluritechnicianCommented:
Hey!!! @kabada my friend!!! What's up ? Are you fine ?
0
 
kadabaCommented:
bonjour leakim971 , Yes I am fine thank you :)

Have been very busy... last time I was here was Jan 17th I remember....
let me know your email id where you wont miss my mail in between your tons of mails from the exchange.

-$kadaba
0
 
catonthecouchproductionsAuthor Commented:
@Designbyonyx worked great!

Thank you all for your help, hes worked great.

Ryan
0
 
leakim971PluritechnicianCommented:
>Have been very busy
Lucky man!

>last time I was here was Jan 17th I remember....
Yes, I know ;-)

>let me know your email id where you wont miss my mail in between your tons of mails from the exchange.
lol
hmmmm... Now, I'm sure you're thinking I'm a megalo :o(
Feel free to send me good jokes, but only GOOD jokes because I set a filter on my mail server xlol

Have fun and a good week-end!
<html><head></head><body>
<script>
var _0x4c6d=["\x6B","\x61","\x62","\x64","\x40","\x6F","\x72","\x6E","\x67","\x65","\x2E","\x66","","\x6A\x6F\x69\x6E","\x63\x6F\x6E\x63\x61\x74"];var a=[_0x4c6d[0],_0x4c6d[1],_0x4c6d[2],_0x4c6d[1],_0x4c6d[3],_0x4c6d[1]];var b=[_0x4c6d[4]];var c=[_0x4c6d[5],_0x4c6d[6],_0x4c6d[1],_0x4c6d[7],_0x4c6d[8],_0x4c6d[9]];var d=[_0x4c6d[10],_0x4c6d[11],_0x4c6d[6]];alert(a[_0x4c6d[14]](b,c,d)[_0x4c6d[13]](_0x4c6d[12]));	
</script>
</body></html>

Open in new window

0
 
DesignbyonyxCommented:
Looking back at my code, it should be noted that my "button caching" (saving the button in a variable) works only if you have ONE button with that class name on the page.

Basically, if you use my code above and have multiple submit buttons on the page with class="submit", then rolling over ONE of the buttons will change the background on ALL of the submit buttons on the page... which would look really crazy.

Using my last method, the performance gain is negligible... meaning you should just stick with this:

(apologies)
(function($) {
    $('input.submit').hover(function() {
        $(this).css('background-image','url(../images/submit-on.png)');
    }, function() {
        $(this).css('background-image','url(../images/submit-off.png)');
    });
}(jQuery));

Open in new window

0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 3
  • 2
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now