Beiträge: 10
Themen: 3
Registriert seit: Mar 2024
Bewertung:
0
Hallo, ich habe 2 separate Bildauswahl-Elemente. Ich möchte beide, wenn ich auf den Button Reset drücke, jeweils auf das 1. Bild zurücksetzten. Einzeln kann ich ansprechen, weiß aber nicht, wie ich beide gleichzeitig zurücksetzten kann?
<button class="tablinks" onclick="changeImage('01.jpg', '#bannerImage_( all???)')">reset</button>
Viele Grüße
</head> <body> <div class="tab"> <button class="tablinks" onclick="openCity(event, 'left')">left</button> <button class="tablinks" onclick="openCity(event, 'right')">right</button>
Code: </div>
<div id="left" class="tabcontent">
<img id="bannerImage_left" src="01.jpg">
<img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_left')" style="cursor:pointer; margin-left:40px; margin-right:40px">
<img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px">
<img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_left')" style="cursor:pointer; margin-right:40px">
</div>
<div id="right" class="tabcontent">
<img id="bannerImage_right" src="01.jpg" "">
<img src="01_thumb.jpg" onclick="changeImage('01.jpg', '#bannerImage_right')" style="cursor:pointer; margin-left:40px; margin-right:40px">
<img src="02_thumb.jpg" onclick="changeImage('02.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px">
<img src="03_thumb.jpg" onclick="changeImage('03.jpg', '#bannerImage_right')" style="cursor:pointer; margin-right:40px">
</div>
<div>
<button class="tablinks" onclick="changeImage('01.jpg', '#bannerImage_(**all???**)')">reset</button>
</div>
<script>
Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung:
10
Hallo Envoy und willkommen im Forum!
Was Du brauchst, lässt sich sicher ganz leicht machen, aber der Code, den Du gepostet hast, ist nicht ausreichend. Poste doch bitte noch das Javascript für das Rücksetzen. d. h. die Funktion changeImage.
Edit: Ich denke, man kann die Frage doch beantworten ohne die Innereien dieser Funktion zu kennen. Definiere eine weitere Funktion:
Code: function clearThem() {
changeImage('01.jpg', '#bannerImage_left');
changeImage('01.jpg', '#bannerImage_right');
}
und rufe sie beim Klick auf den Reset-Button auf:
Code: <button class="tablinks" onclick="clearThem();">reset</button>
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Beiträge: 10
Themen: 3
Registriert seit: Mar 2024
Bewertung:
0
Hallo, entschuldige, habe ich vergessen mit dranzuhängen.
<script>
// image_selection
function changeImage(fileName, element) {let img = document.querySelector(element);img.setAttribute("src", fileName);}
</script>
Danke für die Reset-Funktion, funktioniert gut.
Beiträge: 10
Themen: 3
Registriert seit: Mar 2024
Bewertung:
0
Ich würde noch gerne einen passenden Text <p> zu jedem Bild anzeigen lassen. Kann ich das mit in das Bildwechsel Script mit reinschreiben
oder muss ich besser eine komplett neue Funktion schreiben?
Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung:
10
Das wird jetzt ein wenig komplizierter. Für die Kombination aus Bild und Text empfiehlt sich das figure-Element, siehe z. B. hier:
https://wiki.selfhtml.org/wiki/Bilder_im...schreibung
Jedem Thumbnail musst Du ein figure-Element zuordnen.
Du musst dann nicht nur das figure-Element, das zu dem Thumbnail gehört, sichtbar machen sondern auch das bisher angezeigt wieder unsichtbar. letzteres aber nur in der Gruppe (links oder rechts), die dazu gehört.
Das leistet dieses HTML und Javascript:
Zitat:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Thumbnails Gallery</title>
<style>
/* Alle figure-Elemente, die nicht die Klasse "visi"
haben, unsichtbar machen: */
figure:not(.visi) {
display: none;
}
</style>
</head>
<body>
<!-- Die Thumbnails der linken Galerie: -->
<section id="thumbs-left" data-dest-wrapper="#banners-left" class="tabcontent thumbs-gallery">
<img src="images/dia0_th.jpg" data-dest="#banner-left-0">
<img src="images/dia1_th.jpg" data-dest="#banner-left-1">
<img src="images/dia2_th.jpg" data-dest="#banner-left-2">
</section>
<!-- Die Banner der linken Galerie: -->
<section id="banners-left" class="banners">
<figure id="banner-left-0">
<img src="images/dia0.jpg">
<figcaption>
Der Text für das erste Bild in der linken Galerie
</figcaption>
</figure>
<figure id="banner-left-1">
<img src="images/dia1.jpg">
<figcaption>
Der Text für das zweite Bild in der linken Galerie
</figcaption>
</figure>
<figure id="banner-left-2">
<img src="images/dia2.jpg">
<figcaption>
Der Text für das dritte Bild in der linken Galerie
</figcaption>
</figure>
</section>
<!-- Die Thumbnails der rechten Galerie: -->
<section id="thumbs-right" data-dest-wrapper="#banners-right" class="tabcontent thumbs-gallery">
<img src="images/dia3_th.jpg" data-dest="#banner-left-2">
<!-- Hier die weiteren Thumbnails für die rechte Galerie -->
</section>
<!-- Die Banner der rechten Galerie: -->
<section id="banners-right" class="banners">
<figure id="banner-right-0">
<img src="images/dia3.jpg">
<figcaption>
Der Text für das erste Bild in der rechten Galerie
</figcaption>
</figure>
<!-- Hier die weiteren figure-Elemente für die rechte Galerie-->
</section>
<button id="reset">Reset</button>
<script>
// Eventlistener für Klick irgend wo auf der Seite registrieren:
window.addEventListener('click', event => {
// Wurde ein Thumbnail geklickt?
if (event.target.matches('[data-dest]')) {
const
// Der Wrapper für die Thumbnails:
wrapper = event.target.closest('.thumbs-gallery'),
// Der Selektor für den Wrapper der Banner:
selBanners = wrapper.dataset.destWrapper,
// Der Wrapper für die Banner:
wrBanners = document.querySelector(selBanners),
// Das Ziel bzw. das Banner, das angezeigt werden soll:
dest = wrBanners.querySelector(event.target.dataset.dest),
// Das Banner, dass zzt. angezeigt wird:
activeFigure = wrBanners.querySelector('figure.visi');
// Das aktuell angezeigte Banner unsichtbar machen:
if (activeFigure) activeFigure.classList.remove('visi');
// Das neue Bannen sichtbar machen:
dest.classList.add('visi');
}
// Wurde der Reset-Button gedrückt?
if (event.target.id == 'reset') {
// Über alle Wrapper mit Bannern:
document.querySelectorAll('.banners').forEach(wrBanners => {
const
// Das erste Banner:
first = wrBanners.firstElementChild,
// Das Banner, das zzt. angezeigt wird:
activeFigure = wrBanners.querySelector('figure.visi');
// Das aktuell angezeigte Banner unsichtbar machen:
if (activeFigure) activeFigure.classList.remove('visi');
// Das erste Banner sichtbar machen:
first.classList.add('visi');
});
}
});
</script>
</body>
</html>
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
Beiträge: 1
Themen: 0
Registriert seit: Mar 2024
Bewertung:
0
In diesem Beispiel wird beim Klicken auf den Reset-Button die selectedIndex-Eigenschaft beider Bildauswahl-Elemente auf 0 gesetzt, was dazu führt, dass die erste Option (das erste Bild) in beiden Auswahllisten ausgewählt wird.
Beiträge: 130
Themen: 0
Registriert seit: Jul 2023
Bewertung:
10
Zitat:In diesem Beispiel wird beim Klicken auf den Reset-Button die selectedIndex-Eigenschaft beider Bildauswahl-Elemente auf 0 gesetzt, was dazu führt, dass die erste Option (das erste Bild) in beiden Auswahllisten ausgewählt wird.
... was genau das ist, was der Fragesteller wünscht:
Zitat:Einzeln kann ich ansprechen, weiß aber nicht, wie ich beide gleichzeitig zurücksetzten kann?
Glaube denen, die die Wahrheit suchen, und zweifle an denen, die sie gefunden haben.
(Andrι Gide (1869-1951), frz. Schriftst., 1947 Nobelpreis)
|
