Changing background images with JQuery for different divs

Question

I have this code and this script:

 $(document).ready(function() {
   $('#unua').hover(function() {
     $('#pagina').css('background-image', 'url(imagini/1.png)');
   }, function() {
     $('#pagina').css('background-image', '');
   });
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="pagina">
  <div id="primalinie">
    <div id="unu" class="cerculet">
      <div id="unua">
        <a href="http://tineriiuniti.ro/contact/">Contact</a>
      </div>
    </div>
    <div id="doi" class="cerculet">
      <div id="doia">
        <a href="http://tineriiuniti.ro/despre-atu/">About Us</a>
      </div>
    </div>
  </div>

Can you tell what's the problem here? The ID "pagina", is for the whole page. Let me clear you out the problem. I will want whenever a user is with the mouse over one div the background image of the site will change. Different div, different image. :(

Your script will work, provided the image is present in `imagini/` folder. Can you tell what do you see in the Console tab of the Chrome or Firebug? Also make sure you use jQuery and it gets loaded before your script is executed. — Praveen Kumar Purushothaman, Aug 21 '15 at 07:06
If image is present in `imagini ` directory then it should work. You can see it working for background color [here](https://jsfiddle.net/deepakb/e5xx9t00/) — Deepak Biswal, Aug 21 '15 at 07:09
Yes, exactly, that's what I was about to say: https://jsfiddle.net/3snzmLyy/ — Praveen Kumar Purushothaman, Aug 21 '15 at 07:10
It does work now, thank you guys! I didn't loaded the jQuery :)) Still morning for me :D — SSabinAA, Aug 21 '15 at 07:19
And how can I add an effect there? to ease in and opacity? :/ — SSabinAA, Aug 21 '15 at 07:26

score 1 · Answer 1 · edited May 23 '17 at 11:43

1

To ease in, take a look at this question: How to fade changing background image

replace $('#pagina').css('background-image', 'url(imagini/1.png)');

with

$('#elem').fadeTo('slow', 0.3, function() {
    $(#pagina).css('background-image', 'url(imagini/1.png)');
}).fadeTo('slow', 1);

edited May 23 '17 at 11:43

Community

1
1

answered Aug 21 '15 at 07:31

Daan

578
7
21

score 1 · Answer 2 · answered Aug 21 '15 at 08:20

If I understood correctly you want to have your websites background image to change when ever you hover some element? And the way you want to do that is by changing div#pagina's background, but the div's height is not covering the whole page? At least that's what the code here is showing?

Well, in that case, since your jQuery is already doing the background-image swapping on the div, the only thing you have to do is to set the height of the div#pagina. You can do that by setting it's height to 100%, but it's parents also have to have height 100%, and it usually takes some tweaking to make it look right.

Other solution I would suggest is made out of two parts:

Add the background image on the body element if possible
Define the image as a background-image in your css, if possible, and assign a class for it, like this .pagina-background-image { background-image: 'path/to/img.jpeg'}. This way you can add transitions to the background, such as fade in and similar more efficiently with CSS.

Also, I'd suggest for you to optimize the jQuery a bit. You can check the console log when you hover the div with text "test".

$(document).ready(function() {
  var $pagina = $('#pagina');

  $pagina.hover(function() {
    $pagina.toggleClass('background-image');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pagina">test</div>

Hi, I've posted another comment here, about this page, can you help me pls? 10q — SSabinAA, Aug 24 '15 at 08:57

score 1 · Answer 3 · answered Aug 24 '15 at 07:57

1

I come with some changes about this page :( Now, they want that the background-image on hover to be a live preview ... So i set the iframe box like this:

<div id="unu" class="cerculet"><div id="unua"><a href="http://tineriiuniti.ro/contact/">Contact</a><div class="box"><iframe src="http://tineriiuniti.ro/contact/" width = "500px" height = "500px"></iframe></div></div>
        </div>

And the CSS:

.box {
    display: none;
    width: 100%;
}

a:hover + .box,.box:hover{
    display: block;
    position: relative;
    z-index: 100;
    opacity: 0.3;
}

But it is displayed as a pop-up. How can I change this making in an background image?

answered Aug 24 '15 at 07:57

SSabinAA

31
5

I've tried like this but it doesn't work: $(document).ready(function(){ $('.box').hide(); }); $('#unua').hover(function() { $('#pagina').css('background-image', $('.box')); }); }, function() { $('#pagina').css('background-image', ''); }); – SSabinAA Aug 24 '15 at 09:42
Can you explain a bit more what does the "live preview" mean? Some other internal page or external page? – Nemanja Milosavljevic Aug 24 '15 at 19:59
Internal pages, links from them... Let me explain, I have a page with circles as a menu, and when I hover a circle to have in background the live preview like in this picture : http://imgur.com/bRbiFUz – SSabinAA Aug 25 '15 at 07:07

Changing background images with JQuery for different divs

3 Answers3