CODEWITHSUNDEEP
jqueryhtml
SSabinAA
SSabinAA

Reputation: 31

Changing background images with JQuery for different divs

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. :(

Upvotes: 2

Views: 218

Answers (3)

SSabinAA
SSabinAA

Reputation: 31

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?

Upvotes: 1

Nemanja Milosavljevic
Nemanja Milosavljevic

Reputation: 1291

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:

  1. Add the background image on the body element if possible
  2. 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>

Upvotes: 1

Daan
Daan

Reputation: 598

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);

Upvotes: 1

Related Questions