jquery onclick change css background image

Question

am using this code to get menu tab.when i mouseover on the tab the tab image will change, similarly i want to change the image of tab onlick using jquery.i used the below code to do this but i was not able to get it.how can i do this.

<html>
    <head>
    <title>Css Menu</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <style>
    .home {
        background: url("images/tab2.png") repeat scroll 0 0 transparent;
        border-radius: 4px 4px 0 0;
        height: 75px;
        left: 54px;
        position: relative;
        top: 25px;
        width: 90px;
    } 
    .home:hover {
        background: url("images/tab3.png") repeat scroll 0 0 transparent;
        border-top: 1px solid black;
        border-left: 1px solid black;
        border-right: 1px solid black;
    }


    </style>
    <script type="text/javascript">
        $(function() {
              $('.home').click(function() {
                    $('home').css('backgroundImage', 'url(images/tabs3.png)');
              });
        }):
    </script>

    </head>
    <body><div class="frame">
    <div class="header1"></div>
    <div class="header2">
        <a href="#"><div class="home" onclick="function()"><img src="images/tools.png" class="image"><br><span class="align">Home</span></div></a>
        </div>
    <div class="header3"></div>
    </div>
    </body>
    </html>

score 15 · Accepted Answer · edited Dec 23 '13 at 09:11

15

You need to use background-image instead of backgroundImage. For example:

$(function() {
  $('.home').click(function() {
    $(this).css('background-image', 'url(images/tabs3.png)');
  });
}):

edited Dec 23 '13 at 09:11

Phill Healey

3,084
2
33
67

answered Jan 31 '13 at 05:49

sandeep

91,313
23
137
155

This will not work you need to give '.' before home if you want to select that element – Raghurocks Jan 31 '13 at 05:52

score 3 · Answer 2 · answered Jan 31 '13 at 05:51

3

I think this should be:

$('.home').click(function() {
     $(this).css('background', 'url(images/tabs3.png)');
 });

and remove this:

<div class="home" onclick="function()">
     //-----------^^^^^^^^^^^^^^^^^^^^---------no need for this

You have to make sure you have a correct path to your image.

answered Jan 31 '13 at 05:51

Jai

74,255
12
74
103

+1 for additional suggestions :) – Damien Roche Jan 31 '13 at 05:53

score -2 · Answer 3 · answered Jan 31 '13 at 05:49

-2

Use your jquery like this

$('.home').css({'background-image':'url(images/tabs3.png)'});

answered Jan 31 '13 at 05:49

Dineshkani

2,899
7
31
43

1

This is incorrect and inefficient – TheEnvironmentalist Dec 21 '13 at 19:00
1

@TheEnvironmentalist How could you say this answer is inefficient. Do you have any examples or explain it briefly, I can learn it from you. It works fine. Did you try this, How you say this is incorrect?? – Dineshkani Dec 23 '13 at 06:24
2

You are using old, arguably deprecated notation. Look at sandeep's example. The css method should involve arguments separated by commas, rather than the actual CSS format, as it is an internal function with styles as arguments, rather than an insertion of an entire line of CSS. The brackets shouldn't be necessary, and clutter the code. The input is appreciated, but the example is a little messy. That is why it is inefficient. The appearance of being deprecated makes it incorrect. Just because it works, doesn't mean it's correct. There are conventions. I hope that clears it up. – TheEnvironmentalist Dec 23 '13 at 22:59
@TheEnvironmentalist What would you do if add more than one css element at a time. I dont see any documentation that says using like this is deprecated. See the jquery documentation http://api.jquery.com/css/ in this you can find example using like this. Its just like passing a JSONObject argument to .css() function. Anyhow, If you see any documentation share with me, it might be helpful. I am not clear up saying like this share any example or documentation about using like this is deprecated. – Dineshkani Dec 24 '13 at 09:30
Using set notation for a single item is inefficient and messy. I didn't say it didn't work, I said it was messy, though this method was commonplace a few years ago. It is no longer the 'best' or 'proper' way to do this. I.e., it is _deprecated_. It works, but it is messy and so shouldn't be suggested to others. Your input is appreciated, and your mistake is a very common one. _Just because it works, doesn't mean it's correct_. – TheEnvironmentalist Dec 24 '13 at 19:52

jquery onclick change css background image

3 Answers3

Linked