Menü wahl, soll immer erstes bild gewählt werden, wie?

habe folgendes Problem: Wenn ich beim Menü (Kreis "Button"), wähle, soll immer Dummy 1 ausgewählt werden. So funktioniert es, aber wenn ich dummy 3 oder 4 anklicke und dann einen Kreis("Button") wähle, dann übernimmt er die gleiche Position. Möchte aber das er Dummy 1 wählt. Muss was mit der image.style.backgroundposition zu tun haben, ka woran ich nicht denke. Bitte um Hilfe. https://codepen.io/Noobie_Chan/pen/MWwbyxV

Der hier verwendete Code

<style> html { font-size: 16px; } body { background-color: #FAEBD7; } * { box-sizing: border-box; margin:0; padding:0; } a { text-decoration: none; } .clearfix::after { content: ""; display: block; clear: both; } .headerBanner { width: 100%; height: 150px; background: url(../img/nav-hintergrund.png); border-left: 1px solid black; border-right: 1px solid black; padding: 0; } #headerNav { background-color: #b3b3b3; border: 1px solid #a3a3a3; padding: .5rem; } #headerNav > ol > li { display: inline-block; } .btnImage { background-image: url("../img/nav_button.png"); background-repeat: no-repeat; background-size: 100% 200%; color: black; font-family: Calibri; font-weight: bolder; font-variant: small-caps; margin: .5rem .6rem .5rem; padding: 1rem; box-shadow: 0px 0px 0px 1px #F8F8FF, 3px 3px 1.5px 2px #d9d9d9; } .btnActiv {background-position: 0 100%; } .btnNotActiv {background-position: 0 0; } #bgContainer { height: 60px; padding-top: .4rem; background-color: #c9c9c9; border-left: 1px solid #a3a3a3; border-right: 1px solid #a3a3a3; text-align: center; } .classImage { background: url("https://www.bilder-upload.eu/thumb/d87be6-1583362311.png") ; background-size:400px 50px; width:50px; height:50px; margin-left: .2rem; margin-right: .2rem; display: inline-block; border-radius: 50%; box-shadow: 0px 0px 0px 1px #F8F8FF; } .classActiv { box-shadow: 0px 0px 0px 1px rgb(25, 124, 238);} #knights { background-position: -50px 0; } #warriors { background-position: -100px 0; } #assassins { background-position: -150px 0; } #archers { background-position: -200px 0; } #mechanics { background-position: -250px 0; } #wizards { background-position: -300px 0; } #priests { background-position:-350px 0; } #bgHeroes { background: #ebebeb; border: 1px solid #a3a3a3; height: 200px; overflow-x: scroll; white-space: nowrap; width: 100%; padding-left: .2rem; padding-right: .2rem; } .hero_img { height: 150px; width: 150px; display: inline-block; outline: 1px solid black; box-shadow: 0px 0px 0px 6px #F8F8FF, 5px 5px 1.5px 6px #d9d9d9; margin-left: 1rem; margin-right: 1rem; margin-top: 1rem; } [class*='class_'] { background-size: 500%; background-repeat: no-repeat; } .class_knights , .class_warriors, .class_assassins, .class_archers, .class_wizards, .class_mechanics , .class_priests{ background-image: url(https://www.bilder-upload.eu/thumb/4f6c6b-1582814245.png); } .border { border-left: 1px solid #a3a3a3; border-right: 1px solid #a3a3a3; border-bottom: 1px solid #a3a3a3; background-color: beige; } #status_values { margin: .8rem; border: 1px solid #a1a1a1; } #avatarImg { background-repeat: no-repeat; background-size: 500%; outline: 1px solid black; box-shadow: 0px 0px 0px 6px #F8F8FF, 5px 5px 1.5px 6px #d9d9d9; width: 150px; height: 150px; float: left; margin: 1.5rem; } #status_top { padding: .1rem; background-color: #F5DEB3; border-bottom: 1px solid #a3a3a3; } #status_top > h1 { text-align: center; margin-top: .7rem; margin-right: .7rem; margin-bottom: 0; } #status_top > p { margin-right: .7rem; margin-bottom: 0; } .status_bottom { background: #ebebeb; } .min-row ul { list-style: none; padding: 0; margin-left: 1rem; } .start { margin-left: 2rem; } /* === GRID === */ .container { width: 80%; margin-left: auto; margin-right: auto; } /* === Clearfix-hack === */ .row::after { content: ""; /* after pseudo leer ist! */ clear: both; /* keine floats zulassen */ display: block; /* element die ganze zeile einnimmt */ } .min-row::after { content: ""; /* after pseudo leer ist! */ clear: both; /* keine floats zulassen */ display: block; /* element die ganze zeile einnimmt */ } [class*='col-'] { float: left; min-height: 1px; } [class*='min-col-'] { float: left; min-height: 1px; } .col-1 { width: 16.666%; } .col-2 { width: 33.333%; } .col-3 { width: 50%; } .col-4 { width: 66.666%; } .col-6 { width: 100%; } .min-col-1 { width: 30%; } .min-col-2 { width: 60%; } .right-col-1 { width: 25%;} .right-col-2 { width: 75%;} </style> <div class="container"> <div class="row"> <div class="col-6"> <div id="bgContainer"> <a id="all" class="classImage"></a> <a id="knights" class="classImage"></a> <a id="warriors" class="classImage"></a> <a id="assassins" class="classImage"></a> <a id="archers" class="classImage"></a> <a id="mechanics" class="classImage"></a> <a id="wizards" class="classImage"></a> <a id="priests" class="classImage"></a> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-6"> <div id="bgHeroes"> </div> </div> </div> </div> <!-- STATUS-BEREICH --> <div class="container"> <div class="row border"> <!-- LINKE-SPALTE --> <div class="col-3"> <div id="status_values"> <div id="status_top"> <div id="avatarImg"></div> <h1 id="avatarName"></h1> <p class="clearfix" id="description"></p> </div> <div id="min-container"> <div class="status_bottom"> <div class="min-row"> <div class="min-col-1 start"> <ul> <li>MAX TP</li> <li>ANG</li> <li>K.VERT</li> <li>M.VERT</li> </ul> </div> <div class="min-col-2"> <ul> <li><span>0</span> ( <span id="Hp"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="Atk"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="P_Def"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="M_Def"></span> + <span>0</span> )</li> </ul> </div> </div> <div class="min-row"> <div class="min-col-1 start"> <ul> <li>ANG Geschw.</li> <li>Krit</li> <li>Krit. Schaden</li> <li>Durchdringung</li> <li>Lebensraub</li> <li>MP Erholung/Angriff</li> <li>MP Erholung/Schaden</li> <li>MP Erholung/Sek</li> <li>PRÄZ</li> </ul> </div> <div class="min-col-1"> <ul> <li><span>0</span> ( <span id="Atk_Speed"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="Crit"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="Crit_Dmg"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="Penetration"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="Mp_Recovery_Atk"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li> <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="Acc"></span> + <span>0</span> )</li> </ul> </div> <div class="min-col-1"> <ul> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> </ul> </div> </div> <div class="min-row"> <div class="min-col-1 start"> <ul> <li>K. Block</li> <li>K. Block VERT.</li> <li>K. Ausw.</li> <li>K. Stärkung</li> <li>K. Krit Resistance</li> </ul> </div> <div class="min-col-1"> <ul> <li><span>0</span> ( <span id="P_Block"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="P_Block_Def"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="P_Dodge"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="P_Tough"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li> </ul> </div> <div class="min-col-1"> <ul> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> </ul> </div> </div> <div class="min-row"> <div class="min-col-1 start"> <ul> <li>M. Block</li> <li>M. Block VERT.</li> <li>M. Ausw.</li> <li>M. Stärkung</li> <li>M. Krit Resistance</li> </ul> </div> <div class="min-col-1"> <ul> <li><span>0</span> ( <span id="M_Block"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="M_Block_Def"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="M_Dodge"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id="M_Tough"></span> + <span>0</span> )</li> <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li> </ul> </div> <div class="min-col-1"> <ul> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> </ul> </div> </div> <div class="min-row"> <div class="min-col-1 start"> <ul> <li>Block</li> <li>VERT</li> <li>Ausw.</li> <li>Krit Resistance</li> <li>CC Resistenz</li> <li>Schwächung PRÄZ</li> </ul> </div> <div class="min-col-1"> <ul> <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li> <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li> <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li> <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li> <li><span id="Cc_Resist"></span> ( <span id=""></span> + <span>0</span> )</li> <li><span>0</span> ( <span id=""></span> + <span>0</span> )</li> </ul> </div> <div class="min-col-1"> <ul> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> <li><span>0</span>%</li> </ul> </div> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function () { // KLASSEN-NAVIGATION-BEREICH const bgHeroes = document.getElementById('bgHeroes'); const viewClass = [ document.getElementById('all'), document.getElementById('knights'), document.getElementById('warriors'), document.getElementById('assassins'), document.getElementById('archers'), document.getElementById('mechanics'), document.getElementById('wizards'), document.getElementById('priests') ]; const knightsTotal = 12, warriorsTotal = 12, assassinsTotal = 11, archersTotal = 9, mechanicsTotal = 11, wizardsTotal = 14, priestsTotal = 14; const knightslist = ['neraxis', 'loman', 'aselica', 'clause', 'demia', 'jane', 'morrah', 'philop', 'ricardo', 'sonia', 'glenwyn', 'dosarta'], warriorslist = ['seria', 'chase', 'kasel', 'gau', 'naila', 'priscilla', 'scarlet', 'theo', 'viska', 'bernheim', 'nicky', 'kirze'], assassinslist = ['erze', 'laudia', 'fluss', 'gladi', 'mirianne', 'reina', 'tanya', 'epis', 'ezekiel', 'roi', 'nia'], archerslist = ['selene', 'yanne', 'zafir', 'shamilla', 'arch', 'dimael', 'luna', 'requina', 'yuria',], mechanicslist = ['mitra', 'kara', 'crow', 'annette', 'lakrak', 'miruru', 'oddy', 'rodina', 'cecilia', 'chrisha', 'hanus'], wizardslist = ['lilia', 'ophelia', 'cleo', 'aisha', 'artemia', 'lewisia', 'lorraine', 'maria', 'nyx', 'pavel', 'veronica', 'cain', 'dakaris', 'esker'], priestslist = ['kaulah', 'laias', 'leo', 'juno', 'shea', 'frey', 'baudouin', 'cassandra', 'may', 'mediana', 'rephy', 'lavril', 'lucias', 'rehartna']; window.onload = function () { // Überprüfen! viewClass[0].classList.add('classActiv'); createHeroes(knightsTotal, knightslist, 'knights'); createHeroes(warriorsTotal, warriorslist, 'warriors'); createHeroes(assassinsTotal, assassinslist, 'assassins'); createHeroes(archersTotal, archerslist, 'archers'); createHeroes(mechanicsTotal, mechanicslist, 'mechanics'); createHeroes(wizardsTotal, wizardslist, 'wizards'); createHeroes(priestsTotal, priestslist, 'priests'); priestsValue(); wizardsValue(); mechanicsValue(); archersValue(); assassinsValue(); warriorsValue(); knightsValue(); statusTop('priests'); statusTop('wizards'); statusTop('mechanics'); statusTop('archers'); statusTop('assassins'); statusTop('warriors'); statusTop('knights'); } viewClass[0].addEventListener('click', e => { // Überprüfen! activRemove(); clearContent('bgHeroes'); createHeroes(knightsTotal, knightslist, 'knights'); createHeroes(warriorsTotal, warriorslist, 'warriors'); createHeroes(assassinsTotal, assassinslist, 'assassins'); createHeroes(archersTotal, archerslist, 'archers'); createHeroes(mechanicsTotal, mechanicslist, 'mechanics'); createHeroes(wizardsTotal, wizardslist, 'wizards'); createHeroes(priestsTotal, priestslist, 'priests'); priestsValue(); wizardsValue(); mechanicsValue(); archersValue(); assassinsValue(); warriorsValue(); knightsValue(); statusTop('priests'); statusTop('wizards'); statusTop('mechanics'); statusTop('archers'); statusTop('assassins'); statusTop('warriors'); statusTop('knights'); viewClass[0].classList.add('classActiv'); }); viewClass[1].addEventListener('click', e => { // 'click', knights activRemove(); clearContent('bgHeroes'); createHeroes(knightsTotal, knightslist, 'knights'); statusTop('knights'); knightsValue(); viewClass[1].classList.add('classActiv'); }); viewClass[2].addEventListener('click', e => { // 'click', warriors activRemove(); clearContent('bgHeroes'); createHeroes(warriorsTotal, warriorslist, 'warriors'); statusTop('warriors'); warriorsValue(); viewClass[2].classList.add('classActiv'); }); viewClass[3].addEventListener('click', e => { // 'click', assassins activRemove(); clearContent('bgHeroes'); createHeroes(assassinsTotal, assassinslist, 'assassins'); statusTop('assassins'); assassinsValue(); viewClass[3].classList.add('classActiv'); }); viewClass[4].addEventListener('click', e => { // 'click', archers activRemove(); clearContent('bgHeroes'); createHeroes(archersTotal, archerslist, 'archers'); statusTop('archers'); archersValue(); viewClass[4].classList.add('classActiv'); }); viewClass[5].addEventListener('click', e => { // 'click', mechanics activRemove(); clearContent('bgHeroes'); createHeroes(mechanicsTotal, mechanicslist, 'mechanics'); statusTop('mechanics'); mechanicsValue(); viewClass[5].classList.add('classActiv'); }); viewClass[6].addEventListener('click', e => { // 'click', wizards activRemove(); clearContent('bgHeroes'); createHeroes(wizardsTotal, wizardslist, 'wizards'); statusTop('wizards'); wizardsValue(); viewClass[6].classList.add('classActiv'); }); viewClass[7].addEventListener('click', e => { // 'click', priests activRemove(); clearContent('bgHeroes'); createHeroes(priestsTotal, priestslist, 'priests'); statusTop('priests'); priestsValue(); viewClass[7].classList.add('classActiv'); }); function activRemove() { // it is activ, remove for (let i = 0; i < viewClass.length; i++) { viewClass[i].classList.remove('classActiv'); } } function clearContent(elementID) { // clear, id = bgHeroes document.getElementById(elementID).innerHTML = ""; } function statusTop(name, x, y) { // Erster Held wird angezeigt! const avatar = document.getElementById('avatarImg'); document.getElementById('avatarName').innerText = 'Neraxis'; document.getElementById('description').innerText = 'The descendant of a black dragon that controlled dark lightning. He fights to rid the world of the demons, especially the Draconics. The energy of dark lightning imbued in his Pile Bunker penetrates the enemys defense. '; clearAvater(avatar); avatar.classList.add('class_' + name); avatar.style.backgroundPosition = x + '% ' + y + '%'; } function createHeroes(heroes, heroeslist, name) { // Create, chain Img const htmlFragment = document.createDocumentFragment(); x = 0; y = 0; for (let i = 0; i < heroes; i++) { const image = document.createElement('section'); image.classList.add('hero_img', 'class_' + name); image.id = heroeslist[i]; htmlFragment.appendChild(image); image.style.backgroundPosition = x + '% ' + y + '%'; statusAvatar(image, x, y, name); console.log(image); moveAxis(x, y); } bgHeroes.appendChild(htmlFragment); } function moveAxis(axisX, axisY) { // X-Axis, Y-Axis position axisX = axisX + 25; if (axisX > 100) { axisX = 0; axisY = axisY + 25; } x = axisX; y = axisY; } function statusAvatar(image, x, y, name) { // 'click', Img image.addEventListener('click', e => { const avatar = document.getElementById('avatarImg'); clearAvater(avatar); avatar.classList.add('class_' + name); avatar.style.backgroundPosition = x + '% ' + y + '%'; console.log(avatar); }); } function clearAvater(img) { // Remove all class let avatar = img; avatar.classList.remove('class_knights', 'class_warriors', 'class_assassins', 'class_archers', 'class_mechanics', 'class_wizards', 'class_priests'); } function knightsValue() { // Knights stats Value document.getElementById('Hp').innerText = 1520472; document.getElementById('Atk').innerText = 17632; document.getElementById('P_Def').innerText = 7832; document.getElementById('M_Def').innerText = 6096; document.getElementById('Mp_Recovery_Atk').innerText = 210; document.getElementById('Crit').innerText = 150; document.getElementById('Acc').innerText = 100; document.getElementById('Cc_Resist').innerText = 150; document.getElementById('Penetration').innerText = 150; document.getElementById('P_Dodge').innerText = 250; document.getElementById('M_Dodge').innerText = 250; document.getElementById('Atk_Speed').innerText = 1000; } function warriorsValue() { // Warriors stats Value document.getElementById('Hp').innerText = 1291376; document.getElementById('Atk').innerText = 20032; document.getElementById('P_Def').innerText = 6528; document.getElementById('M_Def').innerText = 7832; document.getElementById('Mp_Recovery_Atk').innerText = 235; document.getElementById('Acc').innerText = 100; document.getElementById('Crit').innerText = 150; document.getElementById('Penetration').innerText = 150; document.getElementById('P_Dodge').innerText = 100; document.getElementById('M_Dodge').innerText = 100; document.getElementById('Atk_Speed').innerText = 1000; document.getElementById('Cc_Resist').innerText = 150; } function assassinsValue() { // Assassins stats Value document.getElementById('Hp').innerText = 123388; document.getElementById('Atk').innerText = 21992; document.getElementById('P_Def').innerText = 6968; document.getElementById('M_Def').innerText = 6096; document.getElementById('Crit').innerText = 200; document.getElementById('Crit_Dmg').innerText = 30; document.getElementById('Acc').innerText = 100; document.getElementById('Mp_Recovery_Atk').innerText = 220; document.getElementById('P_Dodge').innerText = 200; document.getElementById('M_Dodge').innerText = 200; document.getElementById('Atk_Speed').innerText = 1000; } function archersValue() { // Archers stats Value document.getElementById('Hp').innerText = 950344; document.getElementById('Atk').innerText = 24824; document.getElementById('P_Def').innerText = 4784; document.getElementById('M_Def').innerText = 3912; document.getElementById('Crit').innerText = 150; document.getElementById('Penetration').innerText = 250; document.getElementById('Acc').innerText = 100; document.getElementById('Mp_Recovery_Atk').innerText = 375; document.getElementById('Atk_Speed').innerText = 1000; } function mechanicsValue() { // Mechanics stats Value document.getElementById('Hp').innerText = 1030920; document.getElementById('Atk').innerText = 22648; document.getElementById('P_Def').innerText = 4784; document.getElementById('M_Def').innerText = 3912; document.getElementById('Crit').innerText = 150; document.getElementById('Crit_Dmg').innerText = 50; document.getElementById('Penetration').innerText = 100; document.getElementById('Acc').innerText = 200; document.getElementById('Mp_Recovery_Atk').innerText = 475; document.getElementById('Atk_Speed').innerText = 1000; } function wizardsValue() { // Wizards stats Value document.getElementById('Hp').innerText = 877832; document.getElementById('Atk').innerText = 26128; document.getElementById('P_Def').innerText = 3480; document.getElementById('M_Def').innerText = 5224; document.getElementById('Crit').innerText = 100; document.getElementById('Penetration').innerText = 150; document.getElementById('Acc').innerText = 100; document.getElementById('M_Block').innerText = 250; document.getElementById('M_Dodge').innerText = 200; document.getElementById('Mp_Recovery_Atk').innerText = 450; document.getElementById('Atk_Speed').innerText = 1000; } function priestsValue() { // Priests stats Value document.getElementById('Hp').innerText = 984320; document.getElementById('Atk').innerText = 20688; document.getElementById('P_Def').innerText = 4352; document.getElementById('M_Def').innerText = 5440; document.getElementById('Crit').innerText = 100; document.getElementById('Acc').innerText = 100; document.getElementById('M_Block').innerText = 500; document.getElementById('M_Tough').innerText = 150; document.getElementById('M_Block_Def').innerText = 250; document.getElementById('Mp_Recovery_Atk').innerText = 210; document.getElementById('Atk_Speed').innerText = 1000; } }); </script>

Add Comment

* Required information
1000
Drag & drop images (max 3)
Powered by Commentics

Comments

No comments yet. Be the first!