Develop Reference

How to change background image of body element on click with jQuery

I have implemented an background image in the body section via CSS file and it worked. However I needed this image to change depending on what tab the user clicks.
Now I thought this would be simple enough and after reading and trying the solutions in many posts here I can't figure out where I go wrong.
So basically my main setup was:
CSS:
body {
background-image: url(/bg04.png);
}
This works as it displays the background image.
Now I tried in to change the bg image in the part of the code that changes the whole scene when someone clicks on a tab:
var activate_doodle = function(e) {
if (e) {
e.preventDefault();
}
$("#text_input_container").css("display", "none");
$("#doodle_input_container").css("display", "block");
$("#change_keyboard").removeClass("active");
$("#change_doodle").addClass("active");
document.getElementById("colorPicker").click();
$('body').css('background-imgage','url(http://example.com/bg04-2.png');
};
But it does not change the image. I tried copying and pasting the absolute URL into my browser and the path to the pic is correct.
I also tried taking it away from my CSS putting the whole thing in my initializing JS sequence and then the same lines in the click events.
I really appreciate your help guys.
Thanks.

'background-imgage'
Remove g from the attribute — it should be background-image:
$('body').css('background-image','url(http://example.com/bg04-2.png');

Maybe you type error
$('body').css('background-image','url(http://example.com/bg04-2.png)');

document.getElementById("colorPicker").click( function(e) {
if (e) {
e.preventDefault();
}
$("#text_input_container").css("display", "none");
$("#doodle_input_container").css("display", "block");
$("#change_keyboard").removeClass("active");
$("#change_doodle").addClass("active");
$('body').css('background-image','url(http://example.com/bg04-2.png');
};)
may be try to add an event listener.

.hover not working when used with .html

I am trying to do a simple image rollover with jQuery, but this code is not working:
HTML:
<div class="secondcircle" id="circleone">
<p>
<img src="/../ex/img/group1.png">
</p>
</div>
JS:
$("#circleone").hover(
function () {
$(this).html("<p><img src=\"/../ex/img/group2.png\"></p>");
},
function () {
$(this).html("<p><img src=\"/../ex/img/group1.png\"></p>");
}
);
The mouse enter event fires just fine, but none happens when the mouse leaves.
Moreover, the code works fine with simpler actions - the example in the jQuery docs of appending a span then removing it works just fine.
Why would the html not be working? I've been stuck on this for ages.
Update: Nearly every answer/comment suggests just replacing the image source, and while this works perfectly (thanks!) sometimes I do need to change the HTML (such as to change text). This was just one example. Sorry, I should have better specified that in the question.

Instead of replacing your entire HTML is is a better idea to just change the source of the image.
$("#circleone").hover(function () {
$(this).find('img').attr("src","/../ex/img/group2.png\");
},
function () {
$(this).find('img').attr("src","/../ex/img/group1.png\");
}
);

It works if you adjust it so it just replaces the img, like this:
http://jsfiddle.net/7etUU/
I think the main issue is your div being a block element that spans 100% of the width, then the contents get replaced on hover which removes the content, so it flashes.

Why not do this with CSS?
#circleone {
background-image:url('FirstImageURL');
}
circleone:hover{
background-image:url('SecondImageURL');
}
Totally stole this from this question.

I think your div is taking 100% width. Try adding a "float:left" CSS property. Like this...
.secondcircle{
float : left;
}

I noticed something weird when testing this. His original method does not work until I added a border around the parent div, then it works just fine.
Anyone know why that might be?
jsFiddle
/*UNCOMMENT ME AND I WILL WORK
#circleone
{
border: 1px solid #000;
}*/

You do not need to replace the whole HTML with hover event. If your goal is to change the image on hover, use the attr method instead http://api.jquery.com/attr/:
HTML
<div class="secondcircle" id="circleone">
<p>
<img id="img1" src="http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg" />
</p>
</div>
jQuery
$("#circleone").hover(
function () {
$("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg', 'alt':'MyAlt1' });
},
function () {
$("#img1").attr({ 'src': 'http://softwarebyrob.wpengine.netdna-cdn.com/images/football.jpg', 'alt':'MyAlt2' });
}
);
Working JsFiddle here: http://jsfiddle.net/TBMxm/1/
Also, this is better from performance and best practice point of view.
Update1
jQuery Code if you want to use HTML method:
var originalContent = $('#circleone p').html();
$("#circleone").hover(
function () {
$('#circleone p').html('<img src="http://softwarebyrob.wpengine.netdna-cdn.com/images/programming.jpg"/>');
},
function () {
$('#circleone p').html(originalContent);
}
);
Working sample using HTML: http://jsfiddle.net/TBMxm/3/

jQuery toggle() prevents loading of image

I'm new to jQuery and found the toggle function really attractive. I wanted an image to switch to different image after a click and back again, like this:
$(document).ready(function() {
$("#expand").toggle(function(){
$(this).attr("src","images/expandWidget.png");
},function(){
$(this).attr("src", "images/minimizeWidget.png");
});
}); // end ready
And the image itself is declared like this:
<img id="expand" src="images/minimizeWidget.png"></img></div>
I notice that when I ran this through Chrome, the image changed to:
<img id="expand" src="images/minimizeWidget.png" style="display: none;">
And my image did not show. Why did Chrome do that? If I instead change the toggle to click(), my image shows without a problem and I can switch to a different image, but not back of course. I have no errors in the console and the page doesn't import other styles that would affect img. Am I using the toggle incorrectly? Please let me know if you need more information.
Thanks

Instead of toggle use .click()
LIVE DEMO
var images = ["images/expandWidget.png", "images/minimizeWidget.png"], c=0;
$("#expand").click(function(){
this.src = images[++c%2];
});

You've misunderstood what jQuery toggle does.
It 'toggles' the visibility of an element, hence it disappearing. It's not the greatest name admittedly, but we all used to have to write our own version of the toggle method inside .click().
See the documentation:
http://api.jquery.com/toggle/
You probably want something like:
$("#expand").click(function(){
if($(this).attr("src") == "images/expandWidget.png") {
$(this).attr("src", "images/minimizeWidget.png");
} else {
$(this).attr("src","images/expandWidget.png");
}
});

fade on background image change

i have a botton which is for changing the background image with jquery, as the following code shows
$("#button").click(function() {
$('#div1').css("background-image", "url(images/newBG.jpg)");
});
it works very fine! but i want to fade in the newbg-image... is it possible to add a jquery fade method to it.
Any help would be very appreciated. Thanks Ted

Try this:
$("#button").click(function() {
$('#div1').hide().css("background-image", "url(images/newBG.jpg)").fadeIn(500);
});

Remove image title when mouse hover on the image

I am using lytebox for my image gallery. It works great except when a user hovers on images, there will be texts with html tags shown on the browser.
ex:
<h1>This is the first image </h1>
<p>The image desc<p>
I need the title attribute for my image gallery but don't want it to show when the user hovesr the image. Is that possible? Thanks for the help.

var imgTitle;
$("img").hover(function(){
imgTitle = $(this).attr("title");
$(this).removeAttr("title");
}, function(){
$(this).attr("title", imgTitle);
});

I think you'd have to do something like:
$('#slideshow img').hover(function() {
$(this).data('title', $(this).attr('title'));
$(this).attr('title', '');
}, function() {
$(this).attr('title', $(this).data('title'));
});​
Demo: http://jsfiddle.net/lucuma/cX5MD/
You won't see the title on the img's but if you inspect them you'll see they are still there.
You could also use jQuery removeAttr and attr instead of setting it to empty string.

Very simple like this
$('img').removeAttr('title');