CODEWITHSUNDEEP
javascriptjqueryhtmlcssmouseover
Blosom
Blosom

Reputation: 111

Change in jQuery the background-image of data-attribute while mouseover.

Like in the topic. Something doesn't work...I want to hover on link and change the background-image of div element. Always on different picture which is set in data-rhomboid-img. 

<div id="img-nav-rhomboid" class="nav-rhomboid"></div>
            <ul class="menu-list"> 
                <li><a href="#" data-rhomboid-img="img/example1.jpg">A</a></li>
                <li><a href="#" data-rhomboid-img="img/example2.jpg">B</a></li>
            </ul>

.nav-rhomboid{
    background: url(../img/nav-bg.png) no-repeat center center;
    display: flex;
    align-items: center;
}

 $('li a').mouseover(function () {
    var rhomboidImg = $(this).data('rhomboid-img');

    $('#img-nav-rhomboid').each(function () {
        $(this).css('background', $(this).attr(rhomboidImg));
    });
});

Upvotes: 0

Views: 2040

Answers (3)

Tomas Lucena
Tomas Lucena

Reputation: 1526

This will do the trick... for your reference:

1- Assign and height and width to the div nav-rhomboid by css

2- In your js code your are missing a part of the css line, you have to add url()

3- You must never should have the need of loop over an element with ID (this must be unique)

4- update my code with the right path to images (i just did one test on my side)

<div id="img-nav-rhomboid" class="nav-rhomboid"></div>
<ul class="menu-list"> 
    <li><a href="#" data-rhomboid-img="images/back_release.jpg">A</a></li>
    <li><a href="#" data-rhomboid-img="images/back_investors.jpg">B</a></li>
</ul>
<style>
.nav-rhomboid{
    background: url(images/back_reset.jpg) no-repeat center center;
    display: flex;
    align-items: center;
    min-height: 400px;
    width: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
 $('li a').mouseover(function () {
    var rhomboidImg = $(this).data('rhomboid-img');
    $('#img-nav-rhomboid').css('background', 'url('+rhomboidImg+')');
});

Upvotes: 0

Carsten L&#248;vbo Andersen
Carsten L&#248;vbo Andersen

Reputation: 27041

try use this line of code $('#img-nav-rhomboid').css('background', 'url(' + rhomboidImg + ') no-repeat');

$('li a').mouseover(function() {
  var rhomboidImg = $(this).data('rhomboid-img');
  $('#img-nav-rhomboid').css('background', 'url(' + rhomboidImg + ') no-repeat');
});
.nav-rhomboid {
  background: url('http://s7d2.scene7.com/is/image/PetSmart/PB0101_HERO-Dog-Toys-20160818?$sclp-banner-main_large$') no-repeat center center;
  display: flex;
  align-items: center;
}

#img-nav-rhomboid {
  height: 200px;
  width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img-nav-rhomboid" class="nav-rhomboid"></div>
<ul class="menu-list">
  <li><a href="#" data-rhomboid-img="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg">A</a></li>
  <li><a href="#" data-rhomboid-img="img/example2.jpg">B</a></li>
</ul>

Upvotes: 2

Super User
Super User

Reputation: 9642

You have some error in your jQuery code, Check updated snippet below:

 $('li a').mouseover(function () {
    var rhomboidImg = $(this).data('rhomboid-img');
    $('#img-nav-rhomboid').css('background', 'url('+rhomboidImg+') no-repeat');
});
.nav-rhomboid{
    background: url(../img/nav-bg.png) no-repeat center center;
    display: flex;
    align-items: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="img-nav-rhomboid" class="nav-rhomboid"></div>
<ul class="menu-list"> 
    <li><a href="#" data-rhomboid-img="img/example1.jpg">A</a></li>
    <li><a href="#" data-rhomboid-img="img/example2.jpg">B</a></li>
</ul>

Upvotes: 0

Related Questions