How to switch between several images as you hover the menu-buttons?

[bennizone]

Helloooo!
I'm working on my gallery-navigation. Here's a rough mock-up of what I'm trying to achieve:



My first instinct was to make a div, put the main-image as the background, and then make it change background depending on which button I was hovering over... but I can only figure out how to make it swap between two images!! and I need a total of five images (one with No hover-effect, and four for hovering each category).

I'm open to all solutions, though I only know basic CSS + HTML, and how to copy-paste javascripts haha. Thanks in advance!! 

[Dan Q]

There's a few ways to do this, but if you can avoid swapping between five images then you should! Not just because that's hard, but mostly because if you're replacing that whole image every time it'll be slow! Best to just replace the bit you need!

To do that, I'd recommend cutting up your image into several smaller images: one for the bit that doesn't change (the four figures at the bottom; assuming I've understood you correctly!) and one for each of the buttons at the top. Then you only need to image-swap the buttons at the top when they're changed!

If I've misunderstood and the whole figure is clickable (and potentially changeable...) I'd still suggest cutting up into multiple images, but with some "overlap" between them. Then position each image absolutely on a background, overlaying one another slightly, and replace as normal with a CSS :hover.

I hope that makes sense; I can probably knock up a proof-of-concept if not!

[bennizone]

There's a few ways to do this

Hi again Dan Q !! thanks for taking a look :-)) The figures are supposed to glow independently of each other, when hovering their respective category! aka, When hovering "comics", the first figure in the lineup glows. That's why I figured the easiest way was to replace the entire lineup-image, upon hover.

Any thoughts? Oh, and: cutting up the image would allow me to swap between two images in each category, which I could probably make work.. I'll play around with that for a bit. Thanks so far !!!

[Dan Q]

Gotcha!

Okay, I'd still cut up the buttons at the very least, even if you do a whole-image-swap for the rest. I'd probably do something like this (proof-of-concept).

Essentially:

1. Put the top images into a list of links (and then use some CSS to lay them out "sideways").
2. Swap to an alternate version of each top image when it's hovered.
3. Put the six (1 default + 5 alternate) bottom images into a container below them.
4. Use CSS to hide all the alternates.
5. Use CSS to say "in a page with a top link hovered, swap the bottom image like this"

A full copy of my source code is below:

HTML:

Code

<nav class="links">
  <ul>
    <li>
      <a href="/link-one" class="first-link">
        <img src="https://placehold.co/100x40/red/white/?text=One" alt="One" class="primary">
        <img src="https://placehold.co/100x40/white/red/?text=One" alt="One" class="hovered">
      </a>
    </li>

      <li>
      <a href="/link-two" class="second-link">
        <img src="https://placehold.co/100x40/blue/white/?text=Two" alt="Two" class="primary">
        <img src="https://placehold.co/100x40/white/blue/?text=Two" alt="Two" class="hovered">
      </a>
    </li>

      <li>
      <a href="/link-one" class="third-link">
        <img src="https://placehold.co/100x40/orange/white/?text=Three" alt="Three" class="primary">
        <img src="https://placehold.co/100x40/white/orange/?text=Three" alt="Three" class="hovered">
      </a>
    </li>

      <li>
      <a href="/link-one" class="fourth-link">
        <img src="https://placehold.co/100x40/brown/white/?text=Four" alt="Four" class="primary">
        <img src="https://placehold.co/100x40/white/brown/?text=Four" alt="Four" class="hovered">
      </a>
    </li>

      <li>
      <a href="/link-one" class="fifth-link">
        <img src="https://placehold.co/100x40/purple/white/?text=Five" alt="Five" class="primary">
        <img src="https://placehold.co/100x40/white/purple/?text=Five" alt="Five" class="hovered">
      </a>
    </li>
  </ul>
</nav>

<div class="figures">
  <img src="https://placehold.co/700x400/transparent/black/?text=Default State" alt="" class="default-figures">
  <img src="https://placehold.co/700x400/transparent/red/?text=First Link Variant" alt="" class="variant-figures for-first-link">
  <img src="https://placehold.co/700x400/transparent/blue/?text=Second Link Variant" alt="" class="variant-figures for-second-link">
  <img src="https://placehold.co/700x400/transparent/orange/?text=Third Link Variant" alt="" class="variant-figures for-third-link">
  <img src="https://placehold.co/700x400/transparent/brown/?text=Fourth Link Variant" alt="" class="variant-figures for-fourth-link">
  <img src="https://placehold.co/700x400/transparent/purple/?text=Fifth Link Variant" alt="" class="variant-figures for-fifth-link">
</div>

CSS:

Code

/* A little bit of layout stuff; not important! */
body {
  background: #999C87FF;
}

.links {
  /* Lay the links out nicely */
  ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 15px;
  }
  
  a {
    /* Hide the "hovered" version of links: */
    .hovered {
      display: none;
    }
  
    /* When you hover over or focus them, swap the image: */
    &:hover, &:focus {
      .primary {
        display: none;
      }
      .hovered {
        display: block;
      }
    }
  }
}

/* Hide the variant versions of the figures: */
.figures .variant-figures {
  display: none;
}

/* Clever Bit 1: when we hover or focus a link, hide the default figures: */
body:has(.links a:hover), body:has(.links a:focus) {
  .figures .default-figures {
    display: none;
  }
}

/* Clever Bit 2: when we hover (or focus) a link, show to the correct figures: */
body:has(.links .first-link:hover), body:has(.links .first-link:focus) {
  .figures .for-first-link {
    display: block;
  }
}
body:has(.links .second-link:hover), body:has(.links .second-link:focus) {
  .figures .for-second-link {
    display: block;
  }
}
body:has(.links .third-link:hover), body:has(.links .third-link:focus) {
  .figures .for-third-link {
    display: block;
  }
}
body:has(.links .fourth-link:hover), body:has(.links .fourth-link:focus) {
  .figures .for-fourth-link {
    display: block;
  }
}
body:has(.links .fifth-link:hover), body:has(.links .fifth-link:focus) {
  .figures .for-fifth-link {
    display: block;
  }
}

Does that make sense?

[bennizone]

Does that make sense?

Absolutely !! Oh this is exactly what I was trying to do, amazing! I've fiddled around with it a bit, and it works perfectly, aside from one thing; I can't seem to make everything centered, am I missing something? It stays left-aligned. Thanks again, this is crazy-cool 

[Dan Q]

I avoided doing much "extra" styling in my proof-of-concept because I didn't want to muddy the waters with a more-confusing explanation! But here's what I'd do.

First, find the wrapper element: the thing that surrounds both the <nav class="links"> and the <div class="figures">. In my toy example, that's the <body> element! But for you it might be something else, if e.g. you've got more on your page than just this one thing!

But for the <body>, I'd do this (I've updated the codepen too):

Code

/* Center alignment (for the <body>, in my case) */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

If you've got an inner wrapper like <main> or <div id="my-big-menu"> or something then substitute main or #my-big-menu in place of body, I guess!

[bennizone]

here's what I'd do.

Ahh!! absolutely perfect. Seriously, what a huge help!! here's my result: bennizone.net/gallery
I've yet to clean up the code (your notes are still in there haha) but I'm so pleased to have it working.  Thank you!!!!

[Dan Q]

Nice! Looking great!

A couple of suggestions to take it to the next level.

They're all absolutely optional. What you've got is good! Also, I've ordered them from most-important to most-nitpicky!

A. Preloading images.

Especially on slower connections, you might notice that when you hover over e.g. Comics, there's a "flicker" as the image switches over, because the replacement image hasn't loaded yet! If you're not seeing it, clear your cache and you will!

This happens because the browser sees that those images are invisible and thinks "I don't need to download them yet; I'll download them when I need them!". But you, the developer, know better: there's a very high chance that those images are going to be needed... so you should ask the browser to download them in advance:

There are two things you can do to mitigate this. First, consider putting "preload" directives for those images, especially the big ones. These go in the <head> section of your page:

Suggestion #1 - image preloading

Code

<link rel="preload" as="image" href="https://bennizone.net/graphix/newlayout/lineupnavi-comi.png" fetchpriority="high">
<link rel="preload" as="image" href="https://bennizone.net/graphix/newlayout/lineupnavi-sketch.png" fetchpriority="high">
<link rel="preload" as="image" href="https://bennizone.net/graphix/newlayout/lineupnavi-illu.png" fetchpriority="high">
<link rel="preload" as="image" href="https://bennizone.net/graphix/newlayout/lineupnavi-obj.png" fetchpriority="high">

You can optionally do the same for the swapped-in textbox images at the top, but they're smaller so they're less-likely to be an issue in the first place.

On really slow connections, a secondary problem occurs: the browser doesn't know how much space to reserve on the page until it's downloaded the image, which means content "below" the image can shift around a bit as content loads; a phenomenon called Cumulative Layout Shift (CLS). CLS is most-annoying when - and you've probably experienced this on a website or app yourself - you're about to click something and then something above it loads into place and shifts it down, resulting in you clicking the wrong thing.

This can be simply mitigated by making sure that the browser knows the dimensions of the image before it downloads it. They don't have to be the exact dimensions that will result on the screen (which of course depends on the device width), but they need the right aspect ratio: so just give it the width and height of your file!

Suggestion #2 - image sizing

Code

<img id="glownavi" src="https://bennizone.net/graphix/newlayout/lineupnavi-0.png" alt="" width="1506" height="1013" class="default-figures">
<img id="glownavi" src="https://bennizone.net/graphix/newlayout/lineupnavi-comi.png" alt="" width="1506" height="1013" class="variant-figures for-first-link">
<img id="glownavi" src="https://bennizone.net/graphix/newlayout/lineupnavi-sketch.png" alt="" width="1506" height="1013" class="variant-figures for-second-link">
<img id="glownavi" src="https://bennizone.net/graphix/newlayout/lineupnavi-illu.png" alt="" width="1506" height="1013" class="variant-figures for-third-link"><img id="glownavi" src="https://bennizone.net/graphix/newlayout/lineupnavi-obj.png" alt="" class="variant-figures for-fourth-link">

B. ID reuse.

I notice that your images all share an id="glownavi". This is technically a violation of the HTML specification: no two elements on the same page should share an ID!

It's probably not going to cause you any problems to share an ID, because you're not doing much with them. But if you want to be more-correct, it's easy to fix.

So: HTML elements can have up to one ID (id="here-it-is") and up to any number of classes (class="first-class second-class third-class"). IDs are supposed to say specifically what something is, and classes are for saying what kind of thing something is.

If you were a HTML element, for example, you might be represented as <person id="bennizone" class="melonlander artist human">. "bennizone" is who you are, and there can only be one of those! But "melonlander", "artist", and "human" are categories you belong you, and you can have as many of those as you like and you might well share them with other people too.

(In general, classes are easier to work with than ids: if you don't have a specific reason to use an id, a class is often a better choice.)

All of which is to say: "glownavi" (and "topbuttons", for that matter) should probably be a class, not an id.

Suggestion #3 - classes, not ids

So if you were to change that first image, it'd become:

Code

<img src="https://bennizone.net/graphix/newlayout/lineupnavi-0.png" alt="" width="1506" height="1013" class="default-figures">
<img id="glownavi" src="https://bennizone.net/graphix/newlayout/lineupnavi-comi.png" alt="" width="1506" height="1013" class="glownavi variant-figures for-first-link">

And there'd be a corresponding change to your CSS:

Code

.glownavi { /* (this used to be "#glownavi") */
  width: 100%;
}

(In CSS, a dot means "with the class name...", and a hash means "with the ID...")

Anyway, those are my three suggestions in ascending order of nitpickiness. Take as few or as many as you like of them: what you've produced is already pretty awesome and, honestly, better HTML code and web design skills than I see out of people I've worked with who claim to do this stuff professionally. You're rocking it. (And your site's got such personality; I love it!)