change background image in CSS when clicked

Question

Please can somebody tell me how to do the following

.logo {
display: block;
text-indent: -9999px;
text-transform: capitalize;
background: url(../images/menu.png) no-repeat;
height: 120px;
}

change image so when its clicked

background: url(../images/menu_open.png) no-repeat;

the HTML for this is

<div class="sidebar">
<a href="#" onclick="return showOrHide('menulink');"><div class="logo">TEST IMAGE</div></a>
<ul id="menulink">

Currently when clicking the icon, the menu opens and closes,

view the full codes at http://carbonyzed.co.uk/menu/2/index.html http://carbonyzed.co.uk/menu/2/css/style.css

Thanks

Do you want the background image to change permanently (until refresh or reload), or just for as long as the mouse is clicking it? What's a test image in this context? In what way is it different from a regular one? — Jules
– Jules, Commented Nov 6, 2012 at 13:40
idealy, to toggle with menu, please see carbonyzed.co.uk/menu/2 — Henry Aspden
– Henry Aspden, Commented Nov 6, 2012 at 13:42
Then I suggest that you follow @Lokase's advice, or use jQuery's show feature. — Jules
– Jules, Commented Nov 6, 2012 at 13:43

Lowkase · Accepted Answer · 2012-11-06 13:54:30Z

3

$(".logo").click(function() {
  $(this).css('background-image', 'url(../images/menu_open.png)');
});

edited Nov 6, 2012 at 13:54

answered Nov 6, 2012 at 13:39

Lowkase

5,6992 gold badges34 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Dipak Over a year ago

Really? Where has he mentioned jQuery solution? and the jquery you have written is wrong - jsfiddle.net/LdErY

Ozrix Over a year ago

You can't operate the click handler with pure html / css

Henry Aspden Over a year ago

Jquery solution would work, however I currently have an OnClick in there for toggling the menu, can you apply multiple OnClick results? and also, can I apply an OnClick in this case, where the image is located in the CSS? Thanks

daveyfaherty Over a year ago

Dipak, the dude is already using jquery, so there's no need to jump all over Lokase, and you look silly now.

Dipak Over a year ago

@puppybeard you should be careful with the comments you are posting, it can be flagged... and the solution Lokase has posted is wrong it doesn't work. it has to be $(this).css('background-image', 'url(../images/menu_open.png)');

|

daveyfaherty · Accepted Answer · 2012-11-06 13:54:52Z

1

For the best user experience, consider using a sprite, and changing the class on click, rather than changing the style attribute. So imagine you have the two images in one sprite, called menu_sprite.png

The image is 240px high, and the width of the logo. The default image is in top left, the "open" image is right underneath.

CSS

.logo{
  background-image: url(../images/menu_sprite.png) 0 0 no-repeat;
}

.logo.open{
  background-position: 0 -120px;
}

jQuery

$('.logo').click(function(){ $(this).toggleClass('open'); });

This method lets you avoid having a split-second with no image, without using preloaders.

answered Nov 6, 2012 at 13:54

daveyfaherty

4,6232 gold badges29 silver badges42 bronze badges

1 Comment

daveyfaherty Over a year ago

Glad you got it working. For an example where things aren't resizing it's very handy.

pmeyer · Accepted Answer · 2012-11-06 13:48:09Z

0

This should work

<a href="#" onclick="return ShowOrHide('menulink'); document.getElementById('id').style.background = 'url(img.img) no-repeat';" />;

edited Nov 6, 2012 at 13:48

answered Nov 6, 2012 at 13:42

pmeyer

9007 silver badges33 bronze badges

5 Comments

Henry Aspden Over a year ago

I currently have '<a href="#" onclick="return showOrHide('menulink');"><div class="logo">TEST IMAGE</div></a>' so can i make it '<a href="#" onclick="return showOrHide('menulink');""document.getElementById('id').style.background = 'url(img.img)' no-repeat" />;' ???

Henry Aspden Over a year ago

so - <a href="#" onclick="return showOrHide('menulink');";"document.getElementById('id').style.background = 'url(img.img)' no-repeat" />;

pmeyer Over a year ago

<a href="#" onclick="return ShowOrHide('menulink'); document.getElementById('id').style.background = 'url(img.img) no-repeat';" />;

Henry Aspden Over a year ago

in fact - <a href="#" onclick="return showOrHide('menulink')";"document.getElementById('id').style.background = 'url(img.img)' no-repeat" />

pmeyer Over a year ago

No.. dont close the quotes and open them again... "return showOrHide('menulink')";"document.getElementById('id').style.background = 'url(img.img)' no-repeat" should be "return showOrHide('menulink'); document.getElementById('id').style.background = 'url(img.img)' no-repeat"

Collectives™ on Stack Overflow

change background image in CSS when clicked

3 Answers 3

6 Comments

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related