Jump to content

Change image on hover of text/link

Recommended Posts

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
  • Replies 10
  • Created
  • Last Reply

Top Posters In This Topic

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

image.thumb.png.59f9b8d9eed15feb97475c39eac7a89d.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

image.thumb.png.59f9b8d9eed15feb97475c39eac7a89d.png

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
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

image.thumb.png.82b1c183f8ea414ce7822353ed5b52fd.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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
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
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
  • 4 months later...
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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.