Home» Forum» Web & Tech» background previewing script for my site?

background previewing script for my site?

Back to Web & Tech

I'm currently trying to add my graphics hoard to my website, I want to make the backgrounds section similar to this (https://bettysgraphics.neocities.org/backgrounds) where it changes the whole site's bg when hovering over it. I researched the hell out of this online and tried looking at the source code itself, I found nothing and I know nothing about js D: any help would be appreciated

you could do an onhover that triggers a javascript function, then apply that trigger also using javascript to every element with a certain class or some other qualifier. i typically send the target object through the brackets using this but you can do this in the function itself i forgot how to do it. then have the object's src variable be applied to the body's background image value on hover. you can have an opposite check i forgot what its called to reset the background if you want. once i get home i can write this out for you too

that's what i think, anyway...

hi! i made the code for you, considering you said you have no javascript experience whatsoever. it's here on my website. in hindsight i made it kind of unoptimized, my recommendation for a lot of stringed together elements would be to replace previewClass' value with ".bgpreview img" and then wrap a div with a .bgpreview class around all of your img elements instead of applying the class to every image separately. i made this to use with like a singular image on one page, sorry about that.

p.s. this was surprisingly tricky to make customizable. also it might be a little inconsistent, hope you don't mind.

that's what i think, anyway...

@FauxHumanoid u literally saved my life tysm!!!! I'll credit you with the link to the snippet page if that's ok!

You must be logged in to reply.