www.webdeveloper.com
Results 1 to 8 of 8

Thread: Change page background on hover

  1. #1
    Join Date
    Mar 2014
    Posts
    12

    Change page background on hover

    Hi there,

    I am currently helping my company develop a new site, but I am currently stuck on getting the background image on the home page to change whenever you hover on one of the three descriptions on the page.

    Not sure what method to use...can anyone guide me through?

    http://dev.colincowie.com

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    It looks like you are already including jQuery on your page so I'll use that to attempt to build a little snippet that should give you what you want.

    Code:
    $(function(){
      $(".service2").hover(function() {
        $('body').css("background", "url('path/to/background/" + $(this).data("img") + ".jpg')");
      });
    });
    That's a rough draft though. I noticed you have a data-img attribute set for these boxes and I assume this is somehow related to the backgrounds they should be associated with. You will need to change the 'path/to/background/' part to wherever these background images are and also update the extension used at the end, assuming it's not .jpg.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Mar 2014
    Posts
    12
    Thanks,

    As following your guide, I have implemented the snippet. I do have div with an id of "bg" class="main". Is this something I should remove?

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Sorry, I didn't notice that div before. Now that I see how you have your 'backgrounds' set up, you could use the following code:
    Code:
    $(function(){
      $(".service2").hover(function() {
        $('#brand-bg, #inspiration-bg, #main-bg').css("display", "none");
        $('#'+$(this).data("img")).css("display", "block");
      });
    });
    To be fair though, I don't really like this as a 'solution' because it doesn't scale very well with any potential changes or future updates (as I have the background IDs directly coded into part of this). But it should get the job done.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  5. #5
    Join Date
    Mar 2014
    Posts
    12
    Ok I tried that yet it still doesn't change, not sure what I may be doing wrong.

  6. #6
    Join Date
    Mar 2014
    Posts
    12
    If there is a better way to achieve this, I would love to learn it.

  7. #7
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    Sorry, I just realized that I was using the wrong jQuery selector. The correct code should be
    Code:
    $(function(){
      $(".service2").hover(function() {
        $('#bg').children('img').each(function () {
          $(this).css("display", "none");
        });
        $('.'+$(this).data("img")).css("display", "block");
      });
    });
    And as far as a 'better' way, I guess that's all relative. There are probably 20 different ways you could set up something like this and frankly they could all work just as well as each other without any noticeable difference. The code I've given you was just built based on what you already had on your page, saving the trouble of having to redo anything. I did update the code a little to scale better so that if you add more backgrounds or divs to hover, it should adjust.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  8. #8
    Join Date
    Mar 2014
    Posts
    12
    I must say you are god-send angel. Thank you for help. I appreciate the help.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles