Happy family THX (Copy 2183)
✨ ธนเดช แซ่ฉั่ว
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css"> <style>body{ width:100%; height: 100%; overflow: hidden; z-index: -20; } .bg{ /* display: block; */ /* margin:auto; */ width: 100%; height: 111%; transform: translate(-50%, -50%); top: 49.75%; left: 50%; position:absolute; z-index: -10; } .nobita1{ width:250px; height: 250px; margin: auto; transform: translate(-50%, 100%); top: 30%; left: 50%; position:absolute; visibility: visible; } .nobita2{ width:250px; height: 250px; margin: auto; transform: translate(-50%, 100%); top: 30%; left: 50%; position:absolute; visibility: hidden; } .jaiko1{ width:250px; height: 250px; margin: auto; transform: translate(-50%, 100%); top: 30%; left: 70%; position:absolute; visibility: visible; } .jaiko2{ width:250px; height: 250px; margin: auto; transform: translate(-50%, 100%); top: 30%; left: 70%; position:absolute; visibility: hidden; } .suneo1{ width:250px; height: 250px; margin: auto; transform: translate(-160%, 20%); top: 30%; left: 70%; position:absolute; visibility: visible; } .suneo2{ width:250px; height: 250px; margin: auto; transform: translate(-160%, 20%); top: 30%; left: 70%; position:absolute; visibility: hidden; } .gian1{ width:250px; height: 250px; margin: auto; transform: translate(-50%, 100%); top: 30%; left: 70%; position:absolute; visibility: visible; } .gian2{ width:250px; height: 250px; margin: auto; transform: translate(-50%, 100%); top: 30%; left: 70%; position:absolute; visibility: hidden; } .teacher1{ width:250px; height:300px; margin: auto; transform: translate(-300%, 68%); top: 30%; left: 70%; position:absolute; visibility: visible; } .teacher2{ width:250px; height:300px; margin: auto; transform: translate(-300%, 68%); top: 30%; left: 70%; position:absolute; visibility: hidden; } .shizuka1{ width:250px; height: 250px; margin: auto; transform: translate(-50%, 100%); top: 30%; left: 70%; position:absolute; visibility: visible; } .shizuka2{ width:250px; height: 250px; margin: auto; transform: translate(-50%, 100%); top: 30%; left: 70%; position:absolute; visibility: hidden; } .deki1{ width:250px; height: 250px; margin: auto; transform: translate(-50%, 100%); top: 30%; left: 70%; position:absolute; visibility: visible; } .deki2{ width:250px; height: 250px; margin: auto; transform: translate(-50%, 100%); top: 30%; left: 70%; position:absolute; visibility: hidden; } .none1{ width:250px; height: 250px; margin: auto; transform: translate(-50%, 100%); top: 30%; left: 70%; position:absolute; visibility: visible; } .none2{ width:250px; height: 250px; margin: auto; transform: translate(-50%, 100%); top: 30%; left: 70%; position:absolute; visibility: hidden; } .pthx{ width:250px; height: 250px; margin: auto; transform: translate(-250%, 50%); top: 30%; left: 70%; position:absolute; visibility: visible; z-index: -5; } .pthx2{ width:250px; height: 250px; margin: auto; transform: translate(-250%, 50%); top: 30%; left: 70%; position:absolute; visibility: hidden; z-index: -5; } </style> </head> <body> <img src="https://cdn.discordapp.com/attachments/806902125610270764/810123840352682034/test.jpg" class="bg"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071852084625418/26_20210213153630.PNG" id="act1" class="nobita1" onclick="clickact()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071852147146772/26_20210213153626.PNG" id="act2" class="nobita2" onclick="clickact()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act3" class="jaiko1" onclick="clickact2()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act4" class="jaiko2" onclick="clickact2()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810085000137539604/26_20210213162003.PNG" id="act5" class="suneo1" onclick="clickact3()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810085000199405578/26_20210213162010.PNG" id="act6" class="suneo2" onclick="clickact3()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act7" class="gian1" onclick="clickact4()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act8" class="gian2" onclick="clickact4()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810085000288010251/26_20210213164700.PNG" id="act9" class="teacher1" onclick="clickact5()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810084999307067423/26_20210213164407.PNG" id="act10" class="teacher2" onclick="clickact5()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act11" class="shizuka1" onclick="clickact6()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act12" class="shizuka2" onclick="clickact6()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act13" class="deki1" onclick="clickact7()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act14" class="deki2" onclick="clickact7()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act13" class="deki1" onclick="clickact8()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act14" class="deki2" onclick="clickact8()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071852495273984/26_20210213155406.PNG" id="act15" class="pthx" onclick="clickact9()"> <img src="https://media.discordapp.net/attachments/801450532006133822/810071851941363742/26_20210213155410.PNG" id="act16" class="pthx2" onclick="clickact9()"> <script> let stateact1 = 1, stateact2 = 0; function clickact(){ if (stateact1 == 1 && stateact2 == 0){ document.getElementById("act1").style.visibility = 'hidden'; document.getElementById("act2").style.visibility = 'visible'; stateact1 --, stateact2 ++;} else if (stateact1 == 0 && stateact2 == 1){ document.getElementById("act1").style.visibility = 'visible'; document.getElementById("act2").style.visibility = 'hidden'; stateact1 ++, stateact2 --; } } let stateact3 = 1, stateact4 = 0; function clickact2(){ if (stateact3 == 1 && stateact4 == 0){ document.getElementById("act3").style.visibility = 'hidden'; document.getElementById("act4").style.visibility = 'visible'; stateact3 --, stateact4 ++;} else if (stateact3 == 0 && stateact4 == 1){ document.getElementById("act3").style.visibility = 'visible'; document.getElementById("act4").style.visibility = 'hidden'; stateact3 ++, stateact4 --; } } let stateact5 = 1, stateact6 = 0; function clickact3(){ if (stateact5 == 1 && stateact6 == 0){ document.getElementById("act5").style.visibility = 'hidden'; document.getElementById("act6").style.visibility = 'visible'; stateact5 --, stateact6 ++;} else if (stateact5 == 0 && stateact6 == 1){ document.getElementById("act5").style.visibility = 'visible'; document.getElementById("act6").style.visibility = 'hidden'; stateact5 ++, stateact6 --; } } let stateact9 = 1, stateact10 = 0; function clickact5(){ if (stateact9 == 1 && stateact10 == 0){ document.getElementById("act9").style.visibility = 'hidden'; document.getElementById("act10").style.visibility = 'visible'; stateact9 --, stateact10 ++;} else if (stateact9 == 0 && stateact10 == 1){ document.getElementById("act9").style.visibility = 'visible'; document.getElementById("act10").style.visibility = 'hidden'; stateact9 ++, stateact10 --; } } </script> </body> </html>