CODEWITHSUNDEEP
javascriptjquerywordpress
monss
monss

Reputation: 49

How to change body background image on menu item hover?

I have a menu and I need to change the body background to different image on every menu item. Also, it would be nice if it would fade or bounce or do something nice and clean while changing.

So far I have this code: 

    var $body = $('body');
    $('li:first-child').hover(function(){
        $body.css('background-image', 'url("img/dd.jpg")');
    }, function() {
        $body.css('background-image', '')
    })

The html is

<div id="main-menu-container">
    <ul>
       <li><a><span>One</span></a></li>

       <li><a><span>Two</span></a></li>

       <li><a><span>Three</span></a></li>      
    </ul>
</div>

How do I continue and add the animation?

Upvotes: 4

Views: 952

Answers (4)

monss
monss

Reputation: 49

Okey, so I figured it out. Thank you for your help people!

The html

<div id="main-menu-container">
    <ul>
        <li><a href="#"><span>One</span></a></li>
        <li><a href="#"><span>Two</span></a></li>
        <li><a href="#"><span>Three</span></a></li>
    </ul>
</div>

The CSS

body {
    background: url("../img/back.png");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -webkit-transition: background ease-in 1s;
    -moz-transition: background ease-in 1s;
    -o-transition: background ease-in 1s;
    transition: background ease-in 1s;
}

.background-0 {
background: url("../img/dd.jpg");
}
.background-1 {
background: url("../img/dd.jpg");
}
.background-2 {
    background: url("../img/dd.jpg");
}

The script

var list_elements = $('ul li');
var current_index = null;
list_elements.on('mouseenter', function() {
    current_index = list_elements.index(this);
    $('body').addClass('background-' + current_index);

}).on('mouseleave', function(){
    $('body').removeClass('background-' + current_index);
    current_index = null;
});

Upvotes: 0

Aram Hovsepyan
Aram Hovsepyan

Reputation: 1

Try to add all the images to the page with z-index:-1 and position:fixed. Then just animate opacities of those images. Here's HTML: 

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script src="myscript.js"></script>
    </head>
    <body>
    <div class = "images-container">
        <img src="img1.jpg">
        <img src="img2.jpg">
        <img src="img3.jpg">
        <img src="img0.jpg">
    </div>
    <ul id = "main-menu-container">
        <li><a><span>One</span></a></li>
       <li><a><span>Two</span></a></li>
       <li><a><span>Three</span></a></li>
    </ul>
    </body>
</html>

CSS: 

div.images-container img{
    z-index: -1;
    position: fixed;
    width:1600px;
    height: 900px;
}

ul#main-menu-container{
    position: relative;
    top:50px;
}

ul#main-menu-container li{
    font-weight: 500;
    font-family: sans-serif;
    background: #ed2389;
    border-color: #fff;
    border-width: 1px;
    float: left;
    color: white;
    list-style: none;
    padding: 8px;
    border-style: solid;
    border-collapse: collapse;
}

ul#main-menu-container li:hover{
    background: #fff;
    color: #ed2389;
    border-color: #ed2389;
}

JavaScript:

$(function() {
    $("div.images-container img").fadeOut(0);
    $("div.images-container img").last().fadeIn(0);
    $("#main-menu-container").hover(function(){
        $("div.images-container img").last().fadeToggle(500);
    });
    $("#main-menu-container li").hover(function(e) {
        var $target = $(e.target);
        var $menu = $("#main-menu-container li");
        var index = $menu.index($target);
        var $images = $("div.images-container img");
        $images.eq(index).fadeToggle(500);
    });
});

Here I used the order of the images to choose what image is going to be displayed. For more control you can use ids and classes. Here's a fiddle: https://jsfiddle.net/eoppskvL/

P.S. I don't own any of the images in the fiddle in case I need to say that.

Upvotes: 0

eisbehr
eisbehr

Reputation: 12452

You can just select the items where you want to change the background.

var $body = $('body');
$('#main-menu-container li a').hover(function(){
    $body.css('background', 'red');
}, function() {
    $body.css('background', '')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu-container">
  <ul>
    <li><a href="#"><span>One</span></a></li>
    <li><a href="#"><span>Two</span></a></li>
    <li><a href="#"><span>Three</span></a></li>      
  </ul>
</div>

If you want a different background you need to store them somehow. Maybe as data attribute on the menu, or create a object, storing the images, or something.

var $body = $('body');
var colors = ['#f00', '#f0f', '#0f0'];

$('#main-menu-container li a').hover(function(){
    $body.css('background', colors[$(this).parent().index()]);
}, function() {
    $body.css('background', '')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main-menu-container">
  <ul>
    <li><a href="#"><span>One</span></a></li>
    <li><a href="#"><span>Two</span></a></li>
    <li><a href="#"><span>Three</span></a></li>      
  </ul>
</div>

Upvotes: 2

Hulothe
Hulothe

Reputation: 764

Unfortunately you cannot animate the background-image of an element. You could use this trick to add a transparent background and animate the opacity of the :after pseudo-element.

Upvotes: -1

Related Questions