Jump to content

Wells Template - How to show images in body for main navigation link hover??

Recommended Posts

Site URL: https://www.bengoodman.com

Hi!

I currently have one image in the body area of my site on the main landing page. Each navigation link has a strikethrough on hover. However, I would like to ALSO have the image (or GIF) in the main body change, depending on which link I hover over.  Each portfolio link would display a relevant image on hover.

 

Any help would be greatly appreciated! Thank you.

Screen Shot 2021-10-24 at 4.33.22 PM.png

Screen Shot 2021-10-24 at 4.33.22 PM copy.png

Link to comment
  • Replies 9
  • Views 351
  • Created
  • Last Reply

Top Posters In This Topic

On 10/25/2021 at 6:35 AM, bizballs said:

Site URL: https://www.bengoodman.com

Hi!

I currently have one image in the body area of my site on the main landing page. Each navigation link has a strikethrough on hover. However, I would like to ALSO have the image (or GIF) in the main body change, depending on which link I hover over.  Each portfolio link would display a relevant image on hover.

 

Any help would be greatly appreciated! Thank you.

Screen Shot 2021-10-24 at 4.33.22 PM.png

Screen Shot 2021-10-24 at 4.33.22 PM copy.png

Hi,

You mean this?

This will require CSS & JavaScript code. Do you use Personal Business or Commerce Plan?

image.thumb.png.9ef42d28bd3791a4cf5ded3852792404.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/27/2021 at 10:32 PM, bizballs said:

That is precisely what I'm trying to do. Ideally it would display a gif on hover instead of a single still image but I imagine the method is the same. And yes I have a (formerly 'professional') / business plan and can implement custom coding.

Try adding this to Settings > Advanced > Code Injection > Footer (this code for first link), If it works, I will check other links

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$('nav#mainNavigation>ul>li:nth-child(1) a').hover(function(){
    $('div#block-yui_3_17_2_1_1629992987131_6870 img').attr('src','https://cdn.pixabay.com/photo/2021/10/15/01/57/women-6710736__340.jpg');
});
</script>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

yes that worked!

If you could let me know too how you're 'finding the link' that would be helpful as I often update / change links on this site. I'll need to know how to find them in the future! also, where are the images being pulled from? and how can I change the size / aspect ratio if needed?

THANK YOU

Link to comment
On 11/3/2021 at 7:17 AM, bizballs said:

yes that worked!

If you could let me know too how you're 'finding the link' that would be helpful as I often update / change links on this site. I'll need to know how to find them in the future! also, where are the images being pulled from? and how can I change the size / aspect ratio if needed?

THANK YOU

In the code, you will see nth-child(1), you can repeat the code with nth-child(2), ...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$('nav#mainNavigation>ul>li:nth-child(1) a').hover(function(){
    $('div#block-yui_3_17_2_1_1629992987131_6870 img').attr('src','https://cdn.pixabay.com/photo/2021/10/15/01/57/women-6710736__340.jpg');
});
  $('nav#mainNavigation>ul>li:nth-child(2) a').hover(function(){
    $('div#block-yui_3_17_2_1_1629992987131_6870 img').attr('src','https://cdn.pixabay.com/photo/2021/11/02/15/30/tealights-6763542__340.jpg');
});
  $('nav#mainNavigation>ul>li:nth-child(3) a').hover(function(){
    $('div#block-yui_3_17_2_1_1629992987131_6870 img').attr('src','https://cdn.pixabay.com/photo/2020/09/23/17/12/flowers-5596564__340.png');
});
</script>

You can upload image & get url follow this guide https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
15 hours ago, bizballs said:

thank you so much! is there a way to control the sizing? for example some of the images should be displayed as 4:3 and others as 16x9 or 2:1 - right now, no matter the size of the image I use, it displays the exact same size and aspect ratio.

Hi,

No way to do this with above code. 

The code is just to change the image url when hovering on the navigation links, so if you change the ratio of one image, all the other images will change exactly the same.

Another way to solve it is to add more Image Blocks below the current Image. When hovering on any link, we will use the code to display the corresponding image, and hide all other images.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/10/2021 at 2:25 AM, bizballs said:

all sorted. thank you!! I do have one other question. is there a way to add a space in between items on the navigation bar? for example if I wanted the list to be broken up in sections...

 

1697898250_ScreenShot2021-11-09at11_24_06AM.thumb.png.36d05032c5dd48c853961d3d085e5f18.png

Add to Design > Custom CSS

li.page-collection [href="/kuso"] {
    margin-bottom: 20px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.