Change image on hover of text/link

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

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

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!

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

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

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! 

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>

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!

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

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

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.