[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

jQuery hover - change background image

Posted on 2010-09-01
12
Medium Priority
?
1,251 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +3
12 Comments
 
LVL 10

Expert Comment

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

Expert Comment

by:Gurvinder Pal Singh
ID: 33579463
Is the path correct? are you able to see the console logs?
0
 
LVL 10

Expert Comment

by:Hans Langer
ID: 33579472
This should work unless you have problems with the image size:

  <input class="submit" type="submit" value="click here" />
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 1

Author Comment

by:catonthecouchproductions
ID: 33580060
This is my HTML

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

Author Comment

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

Accepted Solution

by:
Designbyonyx earned 2000 total points
ID: 33580119
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
 
LVL 22

Expert Comment

by:kadaba
ID: 33580225
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
ID: 33582843
Hey!!! @kabada my friend!!! What's up ? Are you fine ?
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33583668
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
ID: 33600569
@Designbyonyx worked great!

Thank you all for your help, hes worked great.

Ryan
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33600798
>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
ID: 33600986
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

[Webinar] Lessons on Recovering from Petya

Skyport is working hard to help customers recover from recent attacks, like the Petya worm. This work has brought to light some important lessons. New malware attacks like this can take down your entire environment. Learn from others mistakes on how to prevent Petya like worms.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

650 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