How to switch background image on mouseover?

JavaScript
1

Hello All!

I am currently working on a site that has a continuous video playing in the background. The desired effect is that when the links are hovered over that the background changes to a still photo. I know I can do this with css hovers but this site will eventually be converted to work with OpenCart and I am trying to control the trigger with HTML so that I can customize the back end of the CMS eventually for easy updating of the photos/video.

What have I done?

I decided to use the data-background attribute <a href=“http://theembark.com/homepagedev/”>here is a link to the site I am working on</a>. Really all I want is on mouseover the background changes to the data-background file and then on mouseout it goes back to the video. The links blog/mood/preorder/contact us are the triggers. Any advice would be greatly appreciated. Please note that I choose to use data-background but if there is a better way please feel free to share it! I am always open to alternate solutions :slight_smile:

Thanks,
Kevin

2

Update: I am still having issues with this. I am not sure if it is the way I am trying to implement it or not? I am not getting any JS errors in firebug.

The script is relatively simple:
<script>
$(‘.swap’).on(‘mouseover’, ‘a’, function () {
var background = “url('” + $(this).attr(‘data-background’) + “')”;
$(‘.swap’).css(‘background-image’, background)
});
</script>

The HTML:
<div class=“swap”>
<div>
<ul class=“nav”>
<li><a href=“#” data-background=“images/background1.jpg”>Blog</a></li>
<li><a href=“#” data-background=“images/background2.jpg”>Mood</a></li>
<li><a href=“#” data-background=“images/background3.jpg”>Preorder</a> </li>
<li><a href=“#” data-background=“images/background4.jpg”>Contact Us</a></li>
</ul>
</div>
</div>

I did check to see if the video was interfering with the script and it does not appear to be. Any help would be greatly appreciated :D.

Thanks,
Kevin

3

Hi,

The initial problem is with the syntax.
Change your JS to this:

$('.swap').on('mouseover', 'a', function () {
    var backgroundUrl = "http://theembark.com/homepagedev/" + $(this).data('background');
    $('.swap').css({'background-image': 'url(' + backgroundUrl + ')'});
});

You’ll also have to specify a height for the body:

html, body{
    height:100%;
    width: 100%
}

You’ll now need to work out how to have the video start playing again if the user mouses out from one of the links, but this should put you on the right track.

You might also want to look at preloading the images and hiding the video on mouse over.

Demo

4

Thank you for the response Pullo. The amount of syntax errors I had is a bit embarrassing :confused: but it’s been a while!

I went a head and implemented the changes but I am still having issues with the <a href=“http://theembark.com/homepagedev/”>live link</a>. I am assuming this is again syntax related any additional help would be greatly appreciated.

And yes I will definitely be preloading and implementing a CDN. I will also explore hiding the video on mouse over.

Thank you!
Kevin

5

Hi,

Just place your JS at the bottom of the page, just before the closing </body> tag.
As it is, you are trying to reference images on the page before they have been rendered.

6

Thank you Pullo! That makes sense… :smiley: time to debug and optimize!

Thanks again,
Kevin

7