alynch Posted January 27, 2022 Share Posted January 27, 2022 Site URL: https://www.ljathenaeum.org/mega-events-2 Hello! Site page: https://www.ljathenaeum.org/mega-events-2 I am trying to create a page with an image and a series of linked texts. I want the image to change when I hover over each link. I have added a code block with the texts, links, and images. I have also added the following Javascript: <script> /* Mega menu image change on hover */ $(document).ready(function(){ $('.mural-menulink').mouseover(function() { myvar = this.id; $("div.mural-menuimage").hide(); $('#div'+myvar).show(); }); }); </script> <script> $(document).ready(function(){ $('.mural-menulink').mouseover(function() { myvar = this.id; $("div.mural-main-image").hide(); }); }); </script> The script properly hides the initial image on hover, and it also properly hides the links' images before hover, but it won't show the new image on hover. I don't know what I'm doing wrong! Any help or insight would be greatly appreciated. Or if there is another way to do this, that'd be great, too. Thanks so much in advance! Angela Link to comment
Beyondspace Posted February 1, 2022 Share Posted February 1, 2022 On 1/27/2022 at 9:00 AM, alynch said: Site URL: https://www.ljathenaeum.org/mega-events-2 Hello! Site page: https://www.ljathenaeum.org/mega-events-2 I am trying to create a page with an image and a series of linked texts. I want the image to change when I hover over each link. I have added a code block with the texts, links, and images. I have also added the following Javascript: <script> /* Mega menu image change on hover */ $(document).ready(function(){ $('.mural-menulink').mouseover(function() { myvar = this.id; $("div.mural-menuimage").hide(); $('#div'+myvar).show(); }); }); </script> <script> $(document).ready(function(){ $('.mural-menulink').mouseover(function() { myvar = this.id; $("div.mural-main-image").hide(); }); }); </script> The script properly hides the initial image on hover, and it also properly hides the links' images before hover, but it won't show the new image on hover. I don't know what I'm doing wrong! Any help or insight would be greatly appreciated. Or if there is another way to do this, that'd be great, too. Thanks so much in advance! Angela I think you can try the standard feature: portfolio page. It already has the effect like you mention BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
alynch Posted February 3, 2022 Author Share Posted February 3, 2022 On 1/31/2022 at 8:55 PM, bangank36 said: I think you can try the standard feature: portfolio page. It already has the effect like you mention Thanks so much for answering, bangank36! Unfortunately, I'm using Brine 7.0, which I don't think supports portfolio pages. Any thoughts for Brine 7.0? Thanks again! Link to comment
Beyondspace Posted February 6, 2022 Share Posted February 6, 2022 On 2/3/2022 at 7:11 AM, alynch said: Thanks so much for answering, bangank36! Unfortunately, I'm using Brine 7.0, which I don't think supports portfolio pages. Any thoughts for Brine 7.0? Thanks again! You can get reference from: https://support.squarespace.com/hc/en-us/articles/206543817#grid or https://support.squarespace.com/hc/en-us/articles/220894547 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
tuanphan Posted February 12, 2022 Share Posted February 12, 2022 On 1/27/2022 at 9:00 AM, alynch said: Site URL: https://www.ljathenaeum.org/mega-events-2 Hello! Site page: https://www.ljathenaeum.org/mega-events-2 I am trying to create a page with an image and a series of linked texts. I want the image to change when I hover over each link. I have added a code block with the texts, links, and images. I have also added the following Javascript: <script> /* Mega menu image change on hover */ $(document).ready(function(){ $('.mural-menulink').mouseover(function() { myvar = this.id; $("div.mural-menuimage").hide(); $('#div'+myvar).show(); }); }); </script> <script> $(document).ready(function(){ $('.mural-menulink').mouseover(function() { myvar = this.id; $("div.mural-main-image").hide(); }); }); </script> The script properly hides the initial image on hover, and it also properly hides the links' images before hover, but it won't show the new image on hover. I don't know what I'm doing wrong! Any help or insight would be greatly appreciated. Or if there is another way to do this, that'd be great, too. Thanks so much in advance! Angela You mean something like this? https://codepen.io/Niharika1/pen/KYjMdo Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
alynch Posted February 12, 2022 Author Share Posted February 12, 2022 8 hours ago, tuanphan said: You mean something like this? https://codepen.io/Niharika1/pen/KYjMdo YES!! Exactly like that! Thank you so much, tuanphan! Link to comment
tuanphan Posted February 14, 2022 Share Posted February 14, 2022 On 2/13/2022 at 2:30 AM, alynch said: YES!! Exactly like that! Thank you so much, tuanphan! Try adding a Code Block >> paste this code <div class = "header-menu alynch"> <ul> <li><a data-image-id='1' class="navigation" href="index.html">Home</a></li> <li><a data-image-id='2' class="navigation" href="index.html">About</a></li> <li><a data-image-id='3' class="navigation" href="index.html">Rules</a></li> <li><a data-image-id='4' class="navigation" href="login.html">Log In </a></li> <li><a data-image-id='5' class="navigation" href="signup.html">Sign Up</a></li> </ul> </div> <div id="background"> </div> <style> .header-menu.alynch { height:95px; width:100%; height:100px; position:relative; overflow: hidden; } .header-menu.alynch li { display: inline; margin :20px; } #background{ width:100%; height:350px; background-image: url('https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); background-repeat: no-repeat; background-size: cover; } </style> <script> (function() { var images = { "1": "http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business.jpg", "2": "https://images.pexels.com/photos/2101187/pexels-photo-2101187.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", "3": "http://monevator.monevator.netdna-cdn.com/wp-content/uploads/2008/12/small-cap-fireworks.jpg", "4": "https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", "5": "http://www.smallarmssurvey.org/uploads/tx_rgslideshow/sas-homepage-armed-violence.jpg" }; var background = document.getElementById('background'); var arr = document.getElementsByClassName('navigation'); for(var i=0; i<arr.length; i++) { arr[i].onmouseover = function(e) { var a = e.target; var imgId = a.getAttribute('data-image-id'); var imgSrc = images[imgId]; var style = ['background-image: url(', imgSrc, ');'].join(''); background.setAttribute('style', style); } } })(); </script> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
alynch Posted February 17, 2022 Author Share Posted February 17, 2022 On 2/13/2022 at 7:57 PM, tuanphan said: Try adding a Code Block >> paste this code <div class = "header-menu alynch"> <ul> <li><a data-image-id='1' class="navigation" href="index.html">Home</a></li> <li><a data-image-id='2' class="navigation" href="index.html">About</a></li> <li><a data-image-id='3' class="navigation" href="index.html">Rules</a></li> <li><a data-image-id='4' class="navigation" href="login.html">Log In </a></li> <li><a data-image-id='5' class="navigation" href="signup.html">Sign Up</a></li> </ul> </div> <div id="background"> </div> <style> .header-menu.alynch { height:95px; width:100%; height:100px; position:relative; overflow: hidden; } .header-menu.alynch li { display: inline; margin :20px; } #background{ width:100%; height:350px; background-image: url('https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); background-repeat: no-repeat; background-size: cover; } </style> <script> (function() { var images = { "1": "http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business.jpg", "2": "https://images.pexels.com/photos/2101187/pexels-photo-2101187.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260", "3": "http://monevator.monevator.netdna-cdn.com/wp-content/uploads/2008/12/small-cap-fireworks.jpg", "4": "https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500", "5": "http://www.smallarmssurvey.org/uploads/tx_rgslideshow/sas-homepage-armed-violence.jpg" }; var background = document.getElementById('background'); var arr = document.getElementsByClassName('navigation'); for(var i=0; i<arr.length; i++) { arr[i].onmouseover = function(e) { var a = e.target; var imgId = a.getAttribute('data-image-id'); var imgSrc = images[imgId]; var style = ['background-image: url(', imgSrc, ');'].join(''); background.setAttribute('style', style); } } })(); </script> Thanks! It worked perfectly! Link to comment
Leslie1570048145 Posted June 22, 2022 Share Posted June 22, 2022 I am looking to do something similar but not with navigation. Below is my compromise but would love it if the images swapped only when hovering over the correlating word. Will the above code work or do I need to edit it? Thank you https://raspberry-teal-xm6r.squarespace.com/projects password : lbeck Link to comment
tuanphan Posted June 23, 2022 Share Posted June 23, 2022 20 hours ago, Leslie1570048145 said: I am looking to do something similar but not with navigation. Below is my compromise but would love it if the images swapped only when hovering over the correlating word. Will the above code work or do I need to edit it? Thank you https://raspberry-teal-xm6r.squarespace.com/projects password : lbeck Something like this? https://thung.squarespace.com/vertical-tabs-hover-1?noredirect pass: abc Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Leslie1570048145 Posted June 23, 2022 Share Posted June 23, 2022 yes! like that. I know there was a similar question asked a few months ago you helped with but hers was an image change when hovering over navigation text and I wasn't sure if the code was the same. Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment