List of links, showing background image, when doing rollover, js+css

soyfranasensio

Hi. I am trying to create a list of links to my works, in which when doing rollover on each one of my links, an image appears in the background of the centered page. I give you an example of what I want.

http://chrissutevski.com/

I have tried to recreate it with css, with css and js, but I can not. Could you help me?
I am very grateful!

I have included this code in my custom css & html:

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
if(type == "page" && obj.id == starwarscards){
	$(document).ready(function() {
  $('body').css({
'background-repeat': 'no-repeat', 'background-position' : '50% 50%', 'background-size' : '60%', 'background-attachment' : 'fixed'

});

window.laytheme.on("newpageshown", function(layoutObj, type, obj){

var $body = $('body');

 $('.starwarscards').hover(function(){
    $body.css('background-image', 'url(http://soyfrancis.co/img/6.jpg)')
}, function() {
    $body.css('background-image', '')
})
}

});

</script>

DMB

@soyfranasensio

I am no expert in jQuery at all, but I do know that in Lay you cannot write '$'. Try replacing '$' with 'jQuery' for a start. There is further documentation here about it:

http://laytheme.com/documentation.html#custom-javascript

Best,

D

soyfranasensio

Thanks DMB, but I have not managed well to put the code that indicates the tutorial of Lay Theme. :(

mariusjopen

Hey soyfranasensio,

please use "jQuery" instead of "$".

Do not insert jQuery by yourself using <script src="jquery.js"></script>", because jQuery is already included. If you insert jQuery another time, this will cause bugs.

You can put all of your custom JavaScript into "Lay Options" → "Custom CSS & HTML" → "Custom <head> content". Don't forget to wrap your JavaScript with <script> … </script>.

Did that help?

Many wishes!

Marius