Solved

jQuery hover - change background image

Posted on 2010-09-01
12
1,234 Views
Last Modified: 2012-05-10
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
Comment
  • 3
  • 2
  • 2
  • +3
12 Comments
 
LVL 10

Expert Comment

by:Hans Langer
Comment Utility
Your button submit is including the class=".submit"?
what is the size of the button and the image?
0
 
LVL 40

Expert Comment

by:gurvinder372
Comment Utility
Is the path correct? are you able to see the console logs?
0
 
LVL 10

Expert Comment

by:Hans Langer
Comment Utility
This should work unless you have problems with the image size:

  <input class="submit" type="submit" value="click here" />
0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
This is my HTML

<input id="submitbutton" name="submitbutton" class="submit" type="submit" value="" />
0
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
I see the console log when i have the css() commented out.
0
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 500 total points
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 22

Expert Comment

by:kadaba
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Hey!!! @kabada my friend!!! What's up ? Are you fine ?
0
 
LVL 22

Expert Comment

by:kadaba
Comment Utility
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
 
LVL 1

Author Comment

by:catonthecouchproductions
Comment Utility
@Designbyonyx worked great!

Thank you all for your help, hes worked great.

Ryan
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
>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
 
LVL 14

Expert Comment

by:Designbyonyx
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now