I wanna try make a habit of writing these when I learn about code that can be useful or fun for others to use!
I like using this persona for this cause Pokémon professors are supposed to be nerds
This code lets you toggle between 2 images when clicked. Like the example my amazing Chonkmesa is giving.
This is the style code, you will need access to style tags for this to work.
<style>
#pkdex{
display: inline-block;
cursor: pointer;
}#pkdex input,
#pkdex input:checked + img,
#pkdex input:not(:checked) + img + img {
display: none;
}
</style>
And here is the element that holds the images, you can edit its placement by wrapping it in a <div> and messing with margins and such or add a "style=" to the label tag
<label id="pkdex" class="m-0">
<input type="checkbox" />
<img src="1st IMAGE URL HERE" style="height:200px;"/>
<img src="2nd IMAGE URL HERE" style="height:200px;"/></label>
You can move this label element essentially the same way you´d move an <img>, and to my knowledge you can only toggle between 2 images this way, and not more. (feel free to correct me if I'm wrong)
Lore about this code:
I wanted a way to swap between Normal and Shiny sprites for my Pokédex entries, so naturaly I set out to the internet to see if it was possible with basic HTML and CSS.
I learned that "Yes. Sorta" was the answer, and got dragged down the checkbox rabbit-hole
After struggling for an hour(s) to get what I had (which was only kinda working) in a better state and failing... I reached out and @Ry ended up fixing it so it works and looks nice the end, so shoutout to him for being a nerd.