List of links, showing background image, when doing rollover, js+css
-
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.
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:
<script>
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>
-
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
-
Thanks DMB, but I have not managed well to put the code that indicates the tutorial of Lay Theme. :(
-
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
I don't answer or check forum DMs, please just post on the forum.
Try this to fix issues before you post:
Use the Search Feature. Maybe there is already a solution to your issue.
1. Update Lay Theme and all Lay Theme Addons
2. Disable all Plugins
3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
4. Now see if your problem solved itself
5. Go here, see if your problem is listed here:
Troubleshooting
When you post:
1. Post a link to where the problem is
2. If the problem is difficult to explain, post screenshots / link to a video to explain it