hy,
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.
Ich habe kein Plan was du genau meinst.
Aber wenn ich deine CSS der Punkte sehe , und dem Sprite versuch , sollte man das so machen
https://basti1012.bplaced.net/…rdner=html-seminar&id=422
So wird das Spritebild nur einmal geladen und trotzdem auf allen Kreisen verteilt.
Besser wäre, aber wenn du das nur mit CSS machst und ohne Bild , da das einfarbige Buttons sind, kannst du dir das Bild auch sparen.
Das andere, was du meinst, verstehe ich nicht ganz.
Du hast da auch viel zu viel Code drinnen den man gar nicht brauchen würde
hy,
danke für deine schnelle antwort.
Danke das du mir das umgeschrieben hast mit dem 1x laden (wollte bei mir nicht, deswegen alle bilder seperat, die bilder die hier verwendet werden sind nicht die originalen, *ersatzbilder, format usw. sind 1zu1). Habe den code übernommen und meine werte beibehalten.
Zum eigentlichen problem:
______________________________________________________________________________________
Beim erstmaligen aufrufen der seite macht sie es richtig!
Drücke ich auf einen Kreis ladet er mir die gewünschten Bilder.
Dummy 1 wird angezeigt - richtig! (immer Dummy 1 Anzeigen, beim kreis drücken)
Drücke ich Dummy 5 zeigt er mir Dummy 5 - richtig!
Drücke ich jetzt einen Kreis, ladet er mir die gewünschten Bilder,
Dummy 5 wird angezeigt - flasch! (Dummy 1 soll angezeigt werden)
________________________________________________________________________________________
Hoffe das es jetzt verständlicher erklärt worden ist.
PS. ich weis das ich viel code drinen stehen habe, ich reduziere den code dann später, so tue ich mir am anfang leichter und lerne effizienter code zu schreiben.
Mal sehen, ob ich das richtig verstehe: Drückt man oben einen kreisförmigen Kreis, wird ein Satz von Bildern in die Zeile in der Mitte geladen.
Im Moment erkennt man das nicht, weil bei allen Knöpfen die selben Bilder geladen werden. Dass sich etwas ändert, erkennt man aber daran, dass sich die Anzahl ändert.
Drückt man auf ein Bild in der mittleren Zeile, soll es in dem unteren Fenster mit der Beschreibung angezeigt werden.
Funktioniert soweit alles.
Das Problem ist jetzt: Du möchtest, dass jedes Mal, wenn man einen runden Knopf oben drückt, wieder das erste Bild in dem Fenster mit der Beschreibung angezeigt wird?
Genau!
ps. Wollte bei den bilder nicht extra noch andere anfertigen.
Das kannst Du relativ leicht erreichen, indem Du nach dem Erzeugen der neuen Bilderreihe einen Klick auf das erste Bild simulierst durch Aufruf der Funktion click():
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);
}
htmlFragment.querySelector('.hero_img').click();
bgHeroes.appendChild(htmlFragment);
}BTW: Als ich den Code in meinen Editor übertragen habe, hat dieser beanstandet, dass am Ende des HTML zwei schließende </div> fehlen.
Danke,
es funktioniert genau so wie es soll. Ka was querySelector ist, muss ich mir mal durchlesen.
Ps. Bei mir treten überhaupt keine Probleme auf. Ich benutze: Brackets & Visual studio code
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
HTML-Seminar.de - mit Videos zum schnellen Lernen, wie man eine Website selbst erstellt.