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
Kommentar abgeben zu diesen Beitrag/Code ?Dann hier klicken
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(/image/backgrnd_505.jpg);
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("/image/backgrnd_505.jpg");
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("/image/backgrnd_505.jpg") ;
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(/image/backgrnd_505.jpg); }
.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>