Aber leider ungenügend die Änderungen von Sempervivum beachtet!
Sempervivum:
Du:CSS:#image-dropdown1 { background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-128Norm.png'); }
Sempervivum:CSS:.image-dropdown1 { background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-128Norm.png'); }
Du:HTML:<select id="image-dropdown1" class="image-dropdown">
HTML:<select id="image-dropdown" class="image-dropdown1">
Du solltest deutlich genauer die Antworten lesen.
dropdown mit download
- Themenstarter PeterPlus
- Beginndatum
Habs gerade eingearbeitet, Resultat leider nicht zufriedenstellend.
Sempervivum
Erfahrenes Mitglied
Wenn ich im Seiteninspektor class und id vertausche, wie in Posting #67 vorgeschlagen, sieht es gleich viel besser aus:
Sempervivum
Erfahrenes Mitglied
Das zieht jetzt noch weitere Kreise weil auch das Javascript nicht funktioniert. Du hast das vervielfacht, was aber nicht nötig ist. So sollte es funktionieren:
Ungetestet, ich hoffe, ich habe nichts übersehen.
Code:
window.addEventListener('change', event => {
// if (event.target.classList.contains('image-dropdown3')) {
// Die 3 weg lassen:
if (event.target.classList.contains('image-dropdown')) {
const
selectedOption = event.target.querySelector('option:checked'),
imgUrl = selectedOption.dataset.imgUrl;
event.target.style.backgroundImage = `url(${imgUrl})`;
const
link = event.target.value,
filename = link.split('/').pop(),
a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
}
});Frohe Weihnachten!
Bis zum letzten Punkt eingearbeitet, vielleicht an falscher Stelle eingesetzt (im style?)- denn es verändert sich zwar der angegebene Name, nicht aber das Bild und das automatische download passiert auch nicht mehr...
Sempervivum
Erfahrenes Mitglied
Danke, ich wünsche ebenfalls frohe Weihnachten!
Immerhin passt ja jetzt die Optik.
Damit auch das Javascript funktioniert, musst Du das Anhängsel weg lassen wie in #75 vorgeschlagen. Die Klasse, die wir im HTML fest legen, heißt ja
Und das Javascript aus #75 nur ein Mal, alles andere mit Anhängsel ist überflüssig.
Immerhin passt ja jetzt die Optik.
Damit auch das Javascript funktioniert, musst Du das Anhängsel weg lassen wie in #75 vorgeschlagen. Die Klasse, die wir im HTML fest legen, heißt ja
image-dropdown ohne 1 2 3 ... als Anhängsel.Und das Javascript aus #75 nur ein Mal, alles andere mit Anhängsel ist überflüssig.
hmmm... das habe ich leider nicht ganz verstanden: #75 ist ja nur 1x drin, aber welches Anhängsel weg soll, ist mir nicht ganz klar. Denn jedes Teil ist anders. Soll was weg von den <select>?
Sempervivum
Erfahrenes Mitglied
Ich bin von diesem ausgegangen:
MF23-DOWNLOAD
Dort sehe ich dieses Javascript:
wo fast der selbe Code acht Mal auftritt.
Das musst Du alles weg lassen und statt dessen das Javascript aus #75 verwenden:
So habe ich es jetzt in der Console getestet und es funktioniert. Damit es besser verständlich wird, habe ich einige Kommentare hinein geschrieben.
MF23-DOWNLOAD
Dort sehe ich dieses Javascript:
Code:
<script>
window.addEventListener('change', event => {
if (event.target.classList.contains('image-dropdown1')) {
const
selectedOption = event.target.querySelector('option:checked'),
imgUrl = selectedOption.dataset.imgUrl;
event.target.style.backgroundImage = `url(${imgUrl})`;
const
link = event.target.value,
filename = link.split('/').pop(),
a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
}
});
window.addEventListener('change', event => {
if (event.target.classList.contains('image-dropdown2')) {
const
selectedOption = event.target.querySelector('option:checked'),
imgUrl = selectedOption.dataset.imgUrl;
event.target.style.backgroundImage = `url(${imgUrl})`;
const
link = event.target.value,
filename = link.split('/').pop(),
a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
}
});
window.addEventListener('change', event => {
if (event.target.classList.contains('image-dropdown3')) {
const
selectedOption = event.target.querySelector('option:checked'),
imgUrl = selectedOption.dataset.imgUrl;
event.target.style.backgroundImage = `url(${imgUrl})`;
const
link = event.target.value,
filename = link.split('/').pop(),
a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
}
});
window.addEventListener('change', event => {
if (event.target.classList.contains('image-dropdown4')) {
const
selectedOption = event.target.querySelector('option:checked'),
imgUrl = selectedOption.dataset.imgUrl;
event.target.style.backgroundImage = `url(${imgUrl})`;
const
link = event.target.value,
filename = link.split('/').pop(),
a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
}
});
window.addEventListener('change', event => {
if (event.target.classList.contains('image-dropdown5')) {
const
selectedOption = event.target.querySelector('option:checked'),
imgUrl = selectedOption.dataset.imgUrl;
event.target.style.backgroundImage = `url(${imgUrl})`;
const
link = event.target.value,
filename = link.split('/').pop(),
a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
}
});
window.addEventListener('change', event => {
if (event.target.classList.contains('image-dropdown6')) {
const
selectedOption = event.target.querySelector('option:checked'),
imgUrl = selectedOption.dataset.imgUrl;
event.target.style.backgroundImage = `url(${imgUrl})`;
const
link = event.target.value,
filename = link.split('/').pop(),
a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
}
});
window.addEventListener('change', event => {
if (event.target.classList.contains('image-dropdown7')) {
const
selectedOption = event.target.querySelector('option:checked'),
imgUrl = selectedOption.dataset.imgUrl;
event.target.style.backgroundImage = `url(${imgUrl})`;
const
link = event.target.value,
filename = link.split('/').pop(),
a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
}
});
window.addEventListener('change', event => {
if (event.target.classList.contains('link-dropdown1')) {
const
selectedOption = event.target.querySelector('option:checked'),
imgUrl = selectedOption.dataset.imgUrl;
event.target.style.backgroundImage = `url(${imgUrl})`;
const
link = event.target.value,
filename = link.split('/').pop(),
a = document.createElement('a');
a.href = link;
a.click();
}
});
</script>Das musst Du alles weg lassen und statt dessen das Javascript aus #75 verwenden:
Code:
<script>
// Wir registrieren einen Eventlistener für window,
// der feuert jedes Mal, wenn in irgend einem Element
// auf der Seite das "change"-Event auftritt.
window.addEventListener('change', event => {
// Jetzt prüfen wir ob die Änderung eines unserer select-Elemente
// betrifft. Das veränderte Element finden wir unter event.target.
// Wir prüfen ob dieses die Klasse "image-dropdown" hat.
if (event.target.classList.contains('image-dropdown')) {
const
selectedOption = event.target.querySelector('option:checked'),
imgUrl = selectedOption.dataset.imgUrl;
event.target.style.backgroundImage = `url(${imgUrl})`;
const
link = event.target.value,
filename = link.split('/').pop(),
a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
}
});
</script>Ich danke Dir für die viele Zeit, die Du investierst. Habe mittlerweile schon mehrere Versionen mit den verschiedensten End-Namen. Die Aktuelle, auf die ich mich momentan beziehe ist die hier: MF23-DOWNLOAD
Und da kommt das nur 1x vor, funktioniert aber trotzdem nicht.
Muß jetzt für uns kochen, Mutter hat Schulterbruch und ist total lahmgelegt...
