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

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.

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.

Hi,

You mean this?

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

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.

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>

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

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

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.

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.

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

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

 

Add to Design > Custom CSS

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