Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    348
    Thanks
    39
    Thanked 0 Times in 0 Posts

    JQuery background image change not working

    Hello, I am making a mini game in JQuery. Normally, I have a DIV where it ha a background image.

    The background image now will change after the user clicks on a button.

    Here is my CSS codes for the DIV:

    Code:
    #tank #view {
    	width:1000px;
    	height:540px;
    	background-image:url(../images/view.png);
    	margin:auto;
    	position:relative;
    }
    Here now is the JQuery codes where the background image should be changed:

    Code:
    $('.activate').click(function () {
    	$('#tank #view').css('background-image', 'url(../images/newa.png)');
    	$('#first').fadeOut();
    	$(this).hide();
    Well, it seems the background image is not changing. As you see in the JQuery codes, I have two other elements which should fade out and hide, both are working, except the background image is not changing...

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    is the #view element inside of the #tank element?

  • #3
    Regular Coder
    Join Date
    Sep 2011
    Posts
    348
    Thanks
    39
    Thanked 0 Times in 0 Posts
    Yes... it is inside... The CSS codes itself say all lol

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    The CSS alone says nothing. Please show us your entire HTML, ideally a link to a live example. Have you checked out the error console? Does it possibly give any hints?

  • #5
    Regular Coder
    Join Date
    Sep 2011
    Posts
    348
    Thanks
    39
    Thanked 0 Times in 0 Posts
    Here is the HTML:

    Code:
    <section id="tank">
    	<div id="view">
        	<p>Lorem ipsum...</p>
         </div>
    </section>

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Oh, by the way: image paths in the JS file must be relative to the HTML file. Think of it like the JS is executed in the HTML document, therefore it’s looking for any assets from that location.

  • Users who have thanked VIPStephan for this post:

    angelali (09-29-2012)

  • #7
    Regular Coder
    Join Date
    Sep 2011
    Posts
    348
    Thanks
    39
    Thanked 0 Times in 0 Posts
    What do you mean? It is not good my codes in JQuery? As far as I know it is like this we must do that. When I put a background color instead of a background image, it works, but for image not!

  • #8
    Regular Coder
    Join Date
    Sep 2011
    Posts
    348
    Thanks
    39
    Thanked 0 Times in 0 Posts
    The crap is working when I remove the image from the "Images" folder. Weird! Thank you anyway... Problem solved...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •