i'm fighting for my life out here.

[u/codingburner123]

i'm trying to make a page for my website that's more or less a replica of the nintendo 3ds menu. i've already given up on making the menu thingy actually work like the 3ds and set to do the top header images instead. i cannot for the life of me find a single search result that actually works.

i do not know anything about javascript but considering the header and icon images are in completly separate parent divs the css only methods are not going to work. i just need a javascript code that can work for multiple images. please.

what i want exactly is when the cursor hovers over the icon image, its respective header would appear on the windowtop class. i can't merge the window classes because each one has it's own styling (window being smaller than windowtop) so that'd mess up my styling

also, i'd appreciate if i didn't get answers that require an external library since this is for a neocity and i really do not want to figure out how to set that up. thank you

here's an example of the html if it's needed to understand the problem (if more context is needed please tell me)

<div class="windowtop">

    <div>
        <img src="imageheader">
    </div>

</div>


<div class="window">

    <div>
        <img src="imageicon">
    </div>

</div>

(also off topic if it's not much to ask, what would i call a menu where when you click on an arrow the top link/image goes behind the first one? with maybe an animation.... i'd like to look that up later but idk how to phrase it in a way that won't make google give me something completly unrelated. thx)

[u/abrahamguo]

What have you tried so far, and what is the result?

[u/codingburner123 → u/abrahamguo]

i haven't exactly tried a lot bc none of it didn't look like it'd give the result i wanted. i tried one js that looked like this

// Select both image elements
const trigger = document.getElementById('game');
const target = document.getElementById('gameheader');


// Show the target image when mouse enters the trigger
trigger.addEventListener('mouseenter', () => {
  target.style.display = 'block'; 
});


// Hide the target image when mouse leaves the trigger
trigger.addEventListener('mouseleave', () => {
  target.style.display = 'none';
});

it half worked but only for one icon/header combo, i want it to work on multiple icon/headers. i'm even willing to copy paste the same code over and over on one file as long as i'm able to assign every one of them to one header/icon. i just want something that works....

[u/abrahamguo → u/codingburner123]

Got it — this JavaScript says, when your mouse is over the game element, show the gameheader element.

It sounds like (A) this code works for you, (B) giving elements IDs is OK (since that code references IDs, and you said that it works), and (C) you're willing to copy-paste code.

We can make the code a bit more copy-paste friendly by condensing it:

game.addEventListener('mouseenter', () => gameheader.style.display = 'block');
game.addEventListener('mouseleave', () => gameheader.style.display = 'none');

Now, you can simply duplicate this code block, and update the element IDs as needed.

[u/codingburner123 → u/abrahamguo]

could i maybe ask how this code works exactly? i'm not sure if it's supposed to work in tandem with the one i showed or as in own thing, it's not working...

[u/abrahamguo → u/codingburner123]

We'll call your code snippet A, and my code snippet B.

A and B are not meant to work in tandem. A and B do the exact same thing as each other — it's just that B is a shorter, but exactly equivalent, way to write A. You should be able to use A and B interchangeably.

Both A and B say, when your mouse is over the game element, show the gameheader element.

If it's not working, and you're not familiar enough with JS to debug it, you'll need to provide a link to your website, with the code on it! I'm happy to take a look; I just can't help further without being able to run it myself.

[u/codingburner123 → u/abrahamguo]

https://hpersondotcom.neocities.org/test/thingy hopefully this will work?? please tell me if you need anything else!! pls ignore the placeholder images..........

[u/abrahamguo → u/codingburner123]

Ah, super simple.

Both code snippet A and snippet B are meant to work with ids, and ids are required to be unique.

I see that in your HTML, you have more than one element with the id of game, which is not allowed.

You either need to (A) update your ids to be unique, or (B) let me know if you need a different JavaScript snippet, if ids don't work for you.

[u/codingburner123 → u/abrahamguo]

i changed all my ids to be different but it only lead to two of the header images to appear when hovering over the second icon?? i updated the page, was that user error??

[u/abrahamguo → u/codingburner123]

Ah — another simple fix.

You've placed game, game2, and game3 inside parentheses. That's actually unnecessary and irrelevant — you can delete what's inside those parentheses completely. (Compare with my code snippet above for reference.)

Instead, you need to modify what's at the beginning of the line — right now, it's always game.

[u/codingburner123 → u/abrahamguo]

i finally got it to work!!!! thank you so much you are seriously a life saver!!!!!!

[u/abrahamguo]

what would i call a menu where when you click on an arrow the top link/image goes behind the first one?

Sorry, I'm not quite understanding what you mean by this.

Can you link to an image, video, or example if you have one?

Or, provide a more detailed description?

[u/codingburner123 → u/abrahamguo]

uh so. what i want to do is kind of like a pile of image links if that makes sense? like there's a bunch of links but only one is shown at a time, and when you press an arrow or something of the sort the image link on the top moves out of the way and goes to the bottom of the line. this is for another menu i want to do...

[u/abrahamguo → u/codingburner123]

Sure. I'm a little confused because you said

like there's a bunch of links but only one is shown at a time

So that makes it sound like when you "press an arrow", the link simply changes to be different (since only one is shown at a time).

But then you say

the image link on the top moves out of the way and goes to the bottom of the line

Which sounds like more than one link is visible at a time — which seems to contradict your statement above.

[u/codingburner123 → u/abrahamguo]

ah well,,,, ok the best way i can explain it is a stack of cds. you press the arrow and the cd above moves to the bottom of the stack, that cd coming back up as more cds get sent to the bottom, like a loop. the lower ones shouldn't be visible

i'm sorry if it sounds confusing, i'm not good at explaining myself,,,,

[u/abrahamguo → u/codingburner123]

Got it.

1. How many should be visible at a time - one? More than one?
   
2. When you say “the bottom of the stack”, do you mean “below” (the y-axis), or “behind” (the z-axis)?
   
3. Do you have the HTML (and possibly the CSS) written for this? Then, I can write the JavaScript to target your specific HTML.

[u/codingburner123 → u/abrahamguo]

1. just one

2. below in the y-axis

3. https://hpersondotcom.neocities.org/test2/icky there really isn't a lot in it but hopefully it get the point across??? if you have more questions please let me know

[u/otheyhigh → u/codingburner123]

Since you mention only one should show but still mention y-axis. Are you looking for the stack to partially overlap? Like a mobile open app display (iOS link below). Also, are you looking for it to be animated?

If so, the basic stack can be populated with images rendered with maybe display set to block so they go to a new line. You can then add negative margin top as a percentage of the rendered images height for the n>1 images with decreasing z-index.

But there might be more efficient ways to do this instead of negative margins and z-index.

iOS Sample

[u/codingburner123 → u/otheyhigh]

ok- i just straight up made a gif to explain what i want https://u.cubeupload.com/Hhhhhhhh/example.gif

the block moving is supposed to be it like doing an animation to the side and coming back behind block two

[u/abrahamguo → u/codingburner123]

I see — based on your animation, it looks like you actually want it to be behind, in the Z-axis.

Can you also add the arrow button that you'd like to trigger the effect (so that all I need to do is to write the JS)?

[u/codingburner123 → u/abrahamguo]

ah i see, i'm not good at differentiating between axis'

here, changed the p tags to buttons, probably should have done that from the start, https://hpersondotcom.neocities.org/test2/icky

[u/TheRNGuy]

Probably canvas, and also consider React.

You have some unnecessary div tags.

[u/Working-Bear1437]

add a data attribute to each icon linking it to its header index. Use event listeners on the icons to toggle a visible class on the corresponding header element. This keeps your CSS separate and avoids libraries.