dropdown mit download

PeterPlus · 27. November 2023

Hallo aus Wien!

Möchte zu unserer OpenSource "selbstgebastelte Modell-Anlage vom 3D-Drucker" eine download-Seite für alle Interessierten machen, ohne Passwort und sonstigem SchnickSchnack, vielleicht gelegentlich ein Info-Textfenster dazu, aber das kann ich später auch noch..
Soweit bin ich und stecke nun: https://3d.peterplus.eu/MF23/download/Download-----+++--.html
(jede Version kriegt bei mir hinten ein Zeichen mehr, bis es gelöst ist...)

Das Hauptproblem für mich: das download funktioniert endlich, aber das Anfangsbild ändert sich nicht, wenn man eine andere Unterversion anklickt - das wäre aber wichtig. (habe nur Halbwissen und finde den Fehler nicht)

Hier das ganze html:
(sind vielleicht auch paar Sachen zu viel drin, da meist versuche, Bestehendes von anderen Menüs einzubinden)

<!DOCTYPE html>
<html>
<head>

<style>
.roundedCorners {border-radius: 3em; border-color:#2A0A12; border-style:solid;}

#image-dropdown1 {
appearance: none;
border: none;
background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade+flach-glatt-128Norm.png');
background-repeat: no-repeat;
background-position: center top;
background-color: #FFF8DC;
padding-top: 240px;
padding-bottom: 10px;
font-size: 35px;
color: blue;
}

#image-dropdown2 {
appearance: none;
border: none;
background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade+flach-glatt-128Norm.png');
background-repeat: no-repeat;
background-position: center top;
background-color: #FFF8DC;
padding-top: 240px;
padding-bottom: 10px;
font-size: 35px;
color: blue;
}

#image-dropdown3 {
appearance: none;
border: none;
background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade+flach-glatt-128Norm.png');
background-repeat: no-repeat;
background-position: center top;
background-color: #FFF8DC;
padding-top: 240px;
padding-bottom: 10px;
font-size: 35px;
color: blue;
}

#image-dropdown4 {
appearance: none;
border: none;
background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade+flach-glatt-128Norm.png');
background-repeat: no-repeat;
background-position: center top;
background-color: #FFF8DC;
padding-top: 240px;
padding-bottom: 10px;
font-size: 35px;
color: blue;
}

#image-dropdown5 {
appearance: none;
border: none;
background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade+flach-glatt-128Norm.png');
background-repeat: no-repeat;
background-position: center top;
background-color: #FFF8DC;
padding-top: 240px;
padding-bottom: 10px;
font-size: 35px;
color: blue;
}

#image-dropdown6 {
appearance: none;
border: none;
background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade+flach-glatt-128Norm.png');
background-repeat: no-repeat;
background-position: center top;
background-color: #FFF8DC;
padding-top: 240px;
padding-bottom: 10px;
font-size: 35px;
color: blue;
}
</style>

</head>

<body id="bodyID"; style="background-image:url(https://3d.peterplus.eu/MF23/Koff-Hintgr-1.png)"; align="center";>

<table width=70% colspan=7 border=0 align=center>

<tr>
<td width="70%" rowspan=5 align="center" border="1" bgcolor="FFF8DC" class="roundedCorners">
<font color="00008B"><center>
<br>
<br>
<br><big><big><big><big><big>MF23 - DOWNLOADS:</big></big></big></big></big>
<br><small>Stand: 17.11.23</small><br><br><br>
</td>
</tr>
</table><br><br>



<table width=70% colspan=7 border=0 align=center>
<tr>

<td width="70%" rowspan=5 align="center" border="1" bgcolor="FFF8DC" class="roundedCorners">
<font color=blue><center>
<br>
<br><big><big><big><big><big>Gleise gerade</big></big>
<br>(Geriffelte für Steigungen)</big></big></big><br>
<br>

<select id="image-dropdown1">
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-128.stl">Gleis-grade+flach-glatt-128 (Norm)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-192.stl">Gleis-grade+flach-glatt-192 (150%)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-112.stl">Gleis-grade+flach-glatt-112 (7 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-96.stl">Gleis-grade+flach-glatt-96 (&frac34

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-80.stl">Gleis-grade+flach-glatt-80 (5 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-64.stl">Gleis-grade+flach-glatt-64 (&frac12

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-48.stl">Gleis-grade+flach-glatt-48 (3 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-32.stl">Gleis-grade+flach-glatt-32 (&frac14

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-128.stl">Gleis-grade+flach-Riffel-128 (Norm)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-192.stl">Gleis-grade+flach-Riffel-192 (150%)</option>
</select>

<br><br>

</div>
</div>
<br>
<br>
</td>

<tr>

<tr>

<td width="70%" rowspan=5 align="center" border="1" bgcolor="FFF8DC" class="roundedCorners">
<font color=blue><center>
<br>
<br><big><big><big><big><big>Gleise gerade</big></big>
<br>(Geriffelte für Steigungen)</big></big></big><br>
<br>


<select id="image-dropdown2">
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-128.stl">Gleis-grade+flach-glatt-128 (Norm)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-192.stl">Gleis-grade+flach-glatt-192 (150%)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-112.stl">Gleis-grade+flach-glatt-112 (7 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-96.stl">Gleis-grade+flach-glatt-96 (&frac34

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-80.stl">Gleis-grade+flach-glatt-80 (5 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-64.stl">Gleis-grade+flach-glatt-64 (&frac12

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-48.stl">Gleis-grade+flach-glatt-48 (3 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-32.stl">Gleis-grade+flach-glatt-32 (&frac14

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-128.stl">Gleis-grade+flach-Riffel-128 (Norm)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-192.stl">Gleis-grade+flach-Riffel-192 (150%)</option>
</select>

<br><br>

</div>
</div>
<br>
<br>
</td>

<tr>
</table><br><br>


<table width=70% colspan=7 border=0 align=center>
<tr>

<td width="70%" rowspan=5 align="center" border="1" bgcolor="FFF8DC" class="roundedCorners">
<font color=blue><center>
<br>
<br><big><big><big><big><big>Gleise gerade</big></big>
<br>(Geriffelte für Steigungen)</big></big></big><br>
<br>

<select id="image-dropdown3">
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-128.stl">Gleis-grade+flach-glatt-128 (Norm)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-192.stl">Gleis-grade+flach-glatt-192 (150%)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-112.stl">Gleis-grade+flach-glatt-112 (7 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-96.stl">Gleis-grade+flach-glatt-96 (&frac34

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-80.stl">Gleis-grade+flach-glatt-80 (5 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-64.stl">Gleis-grade+flach-glatt-64 (&frac12

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-48.stl">Gleis-grade+flach-glatt-48 (3 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-32.stl">Gleis-grade+flach-glatt-32 (&frac14

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-128.stl">Gleis-grade+flach-Riffel-128 (Norm)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-192.stl">Gleis-grade+flach-Riffel-192 (150%)</option>
</select>

<br><br>

</div>
</div>
<br>
<br>
</td>

<tr>
</table><br><br>

<table width=70% colspan=7 border=0 align=center>
<tr>

<td width="70%" rowspan=5 align="center" border="1" bgcolor="FFF8DC" class="roundedCorners">
<font color=blue><center>
<br>
<br><big><big><big><big><big>Gleise gerade</big></big>
<br>(Geriffelte für Steigungen)</big></big></big><br>
<br>


<select id="image-dropdown4">
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-128.stl">Gleis-grade+flach-glatt-128 (Norm)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-192.stl">Gleis-grade+flach-glatt-192 (150%)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-112.stl">Gleis-grade+flach-glatt-112 (7 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-96.stl">Gleis-grade+flach-glatt-96 (&frac34

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-80.stl">Gleis-grade+flach-glatt-80 (5 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-64.stl">Gleis-grade+flach-glatt-64 (&frac12

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-48.stl">Gleis-grade+flach-glatt-48 (3 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-32.stl">Gleis-grade+flach-glatt-32 (&frac14

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-128.stl">Gleis-grade+flach-Riffel-128 (Norm)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-192.stl">Gleis-grade+flach-Riffel-192 (150%)</option>
</select>

<br><br>

</div>
</div>
<br>
<br>
</td>

<tr>
</table><br><br>



<table width=70% colspan=7 border=0 align=center>
<tr>

<td width="70%" rowspan=5 align="center" border="1" bgcolor="FFF8DC" class="roundedCorners">
<font color=blue><center>
<br>
<br><big><big><big><big><big>Gleise gerade</big></big>
<br>(Geriffelte für Steigungen)</big></big></big><br>
<br>

<select id="image-dropdown5">
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-128.stl">Gleis-grade+flach-glatt-128 (Norm)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-192.stl">Gleis-grade+flach-glatt-192 (150%)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-112.stl">Gleis-grade+flach-glatt-112 (7 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-96.stl">Gleis-grade+flach-glatt-96 (&frac34

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-80.stl">Gleis-grade+flach-glatt-80 (5 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-64.stl">Gleis-grade+flach-glatt-64 (&frac12

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-48.stl">Gleis-grade+flach-glatt-48 (3 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-32.stl">Gleis-grade+flach-glatt-32 (&frac14

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-128.stl">Gleis-grade+flach-Riffel-128 (Norm)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-192.stl">Gleis-grade+flach-Riffel-192 (150%)</option>
</select>

<br><br>

</div>
</div>
<br>
<br>



<br><big><big><big><big><big>Gleise gerade</big></big>
<br>(Geriffelte für Steigungen)</big></big></big><br>
<br>

<select id="image-dropdown6">
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-128.stl">Gleis-grade+flach-glatt-128 (Norm)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-192.stl">Gleis-grade+flach-glatt-192 (150%)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-112.stl">Gleis-grade+flach-glatt-112 (7 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-96.stl">Gleis-grade+flach-glatt-96 (&frac34

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-80.stl">Gleis-grade+flach-glatt-80 (5 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-64.stl">Gleis-grade+flach-glatt-64 (&frac12

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-48.stl">Gleis-grade+flach-glatt-48 (3 8el)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-32.stl">Gleis-grade+flach-glatt-32 (&frac14

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-128.stl">Gleis-grade+flach-Riffel-128 (Norm)</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-192.stl">Gleis-grade+flach-Riffel-192 (150%)</option>
</select>

<br><br>

</div>
</div>
<br>
<br>
</td>

<tr>
</table><br><br>


</body>

<script>
const dropdown1 = document.getElementById('image-dropdown1');
dropdown1.addEventListener('change', (event) => {
const link = event.target.value;
const img = event.target.selectedOptions[0].getAttribute('data-img');
const filename = link.split('/').pop();
const a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
});

const dropdown2 = document.getElementById('image-dropdown2');
dropdown2.addEventListener('change', (event) => {
const link = event.target.value;
const img = event.target.selectedOptions[0].getAttribute('data-img');
const filename = link.split('/').pop();
const a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
});

const dropdown3 = document.getElementById('image-dropdown3');
dropdown3.addEventListener('change', (event) => {
const link = event.target.value;
const img = event.target.selectedOptions[0].getAttribute('data-img');
const filename = link.split('/').pop();
const a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
});

const dropdown4 = document.getElementById('image-dropdown4');
dropdown4.addEventListener('change', (event) => {
const link = event.target.value;
const img = event.target.selectedOptions[0].getAttribute('data-img');
const filename = link.split('/').pop();
const a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
});

const dropdown5 = document.getElementById('image-dropdown5');
dropdown5.addEventListener('change', (event) => {
const link = event.target.value;
const img = event.target.selectedOptions[0].getAttribute('data-img');
const filename = link.split('/').pop();
const a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
});

const dropdown6 = document.getElementById('image-dropdown6');
dropdown6.addEventListener('change', (event) => {
const link = event.target.value;
const img = event.target.selectedOptions[0].getAttribute('data-img');
const filename = link.split('/').pop();
const a = document.createElement('a');
a.href = link;
a.download = filename;
a.click();
});

</script>

</html>

Vielen Dank für jede Hilfe!
Peter

bdt600 · 27. November 2023

Das könnte u.a. an den 148 Fehlern liegen, siehe https://validator.w3.org/nu/?doc=https://3d.peterplus.eu/MF23/download/Download-----+++--.html

Auch wenn du das eigentlich nicht hören möchtest, aber das Design der Seite ist, sorry, fürchterlich. Macht so den Eindruck, als wenn die Seite in den 80ern entstanden wäre. Außerdem setzt du HTML-Tabellen ein, ohne dass du tabellarische Daten darstellen willst. Das entspricht auch einer völlig veralteten Technik. Daher ein Tipp: warum nimmst du nicht ein CMS w.z.B. WordPress, damit kommst du leichter zu einem ansprechendem Design. Außerdem ist es sehr ungewöhnlich, dass ein Drop-Down kommt, wenn man auf ein Bild klickt, zumal man nur versehentlich darauf klickt, wenn man es nicht weiß.

Und zu guter Letzt, warum postest du das in die Rubrik PHP? Du hast doch keinen PHP-Code.

PS: Quellcode bitte immer mit den Formatierungsmöglichkeiten des Forums posten:

Sempervivum · 27. November 2023

Du verwendest im Javascript Kommentare in HTML-Syntax:

Code:

<!----------------------------------------->

Da wundert es mich, dass das Skript überhaupt funktioniert.

Das Hauptproblem für mich: das download funktioniert endlich, aber das Anfangsbild ändert sich nicht, wenn man eine andere Unterversion anklickt - das wäre aber wichtig. (habe nur Halbwissen und finde den Fehler nicht)

Das verstehe ich so, dass sich das Hintergrundbild des Select ändern soll, abhängig davon, welche Option gewählt wurde.
Einen Ansatz dafür sehe ich schon in deinem Code:

Code:

const img = event.target.selectedOptions[0].getAttribute('data-img');

Du holst die URL des Bildes aus einem data-Attribut, das ist schon Mal eine gute Idee. Allerdings darfst Du dann nicht selectedOptions[0] nehmen sondern die ausgewählte und musst das Bild auch als Hintergrundbild einstellen.
Und dann kann man das Javascript wesentlich schlanker machen, indem man den Code nicht für jedes Select vervielfacht. Würde dann so aussehen:

Code:

    <script>
        window.addEventListener('change', event => {
            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>

Und das HTML musst Du nach diesem Muster umgestalten:

Code:

    <select class="image-dropdown" id="image-dropdown1">
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-128.stl"
            data-img-url="images/dia0.jpg">
            Gleis-grade+flach-glatt-128 (Norm);
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-192.stl"
            data-img-url="images/dia1.jpg">
            Gleis-grade+flach-glatt-192 (150%)
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-112.stl"
            data-img-url="images/dia2.jpg">
            Gleis-grade+flach-glatt-112 (7 8el)
        </option>
    </select>
    <select class="image-dropdown" id="image-dropdown2">
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-128.stl"
            data-img-url="images/dia3.jpg">
            Gleis-grade+flach-glatt-128 (Norm);
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-192.stl"
            data-img-url="images/dia4.jpg">
            Gleis-grade+flach-glatt-192 (150%)
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-112.stl"
            data-img-url="images/dia5.jpg">
            Gleis-grade+flach-glatt-112 (7 8el)
        </option>
    </select>

D. h. die Klasse "image-dropdown" jedem Select zuweisen und im data-Attribut für jede Option das Bild zuweisen.

Sempervivum · 27. November 2023

PS, vorhin vergessen: Auch das CSS brauchst Du nicht vervielfachen, wenn Du Klassen verwendest:

Code:

        .image-dropdown {
            appearance: none;
            border: none;
            background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade+flach-glatt-128Norm.png');
            background-repeat: no-repeat;
            background-position: center top;
            background-color: #FFF8DC;
            padding-top: 240px;
            padding-bottom: 10px;
            font-size: 35px;
            color: blue;
            background-size: cover;
        }

Das dann nur ein Mal.

Sempervivum · 27. November 2023

Warum machst Du denn woanders einen Thread auf, wo ich doch hier deine Frage beantwortet habe?
Ich hätte darauf hin weisen sollen: Bei den Bildern in data-img-url habe ich meine eigenen zum Testen verwendet, das kann bei dir natürlich nicht funktionieren. Du musst die Werte durch die URLs deiner eigenen Bilder ersetzen. Hopping von einem Forum zum nächsten ist in den wenigsten Fällen zielführend.

bdt600 · 27. November 2023

Sempervivum hat gesagt.:
Hopping von einem Forum zum nächsten ist in den wenigsten Fällen zielführend.

Permanent fertige Lösungen posten auch nicht.

PeterPlus · 27. November 2023

Hallo,

danke mal für ie flotte Reaktion auf meine Frage.
Hab das jetzt soweit eingearbeitet, funzt aber immer noch nicht mit dem wechselnden Bild.

<!DOCTYPE html>
<html>
<head>

<style>
.roundedCorners {border-radius: 3em; border-color:#2A0A12; border-style:solid;}

.image-dropdown {
appearance: none;
border: none;
background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade+flach-glatt-128Norm.png');
background-repeat: no-repeat;
background-position: center top;
background-color: #FFF8DC;
padding-top: 240px;
padding-bottom: 10px;
font-size: 35px;
color: blue;
background-size: cover;
}

</style>

</head>

<body id="bodyID" style="background-image:url(https://3d.peterplus.eu/MF23/Koff-Hintgr-1.png)" align="center">

<table width=70% colspan=7 border=0 align=center>

<tr>
<td width="70%" rowspan=5 align="center" border="1" bgcolor="FFF8DC" class="roundedCorners">
<font color="00008B"><center>
<br>
<br>
<br><big><big><big><big><big>MF23 - DOWNLOADS:</big></big></big></big></big>
<br><small>Stand: 17.11.23</small><br><br><br>
</td>
</tr>
</table><br><br>



<table width=70% colspan=7 border=0 align=center>
<tr>

<td width="70%" rowspan=5 align="center" border="1" bgcolor="FFF8DC" class="roundedCorners">
<font color=blue><center>
<br>
<br><big><big><big><big><big>Gleise gerade</big></big>
<br>(Geriffelte für Steigungen)</big></big></big><br>
<br>

<select class="image-dropdown" id="image-dropdown1">
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-128.stl"
data-img-url="images/dia0.jpg">
Gleis-grade+flach-glatt-128 (Norm)
</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-192.stl"
data-img-url="images/dia1.jpg">
Gleis-grade+flach-glatt-192 (150%)
</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-112.stl"
data-img-url="images/dia2.jpg">
Gleis-grade+flach-glatt-112 (7 8el)
</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-96.stl"
data-img-url="images/dia3.jpg">
Gleis-grade+flach-glatt-96 (&frac34

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-192.stl"
data-img-url="images/dia4.jpg">
Gleis-grade+flach-glatt-80 (5 8el)
</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-64.stl"
data-img-url="images/dia5.jpg">
Gleis-grade+flach-glatt-64 (&frac12

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-48.stl"
data-img-url="images/dia6.jpg">
Gleis-grade+flach-glatt-48 (3 8el)
</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-glatt-32.stl"
data-img-url="images/dia7.jpg">
Gleis-grade+flach-glatt-32 (&frac14

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-128.stl"
data-img-url="images/dia8.jpg">
Gleis-grade+flach-Riffel-128 (Norm

</option>
<option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade+flach-Riffel-192.stl"
data-img-url="images/dia9.jpg">
Gleis-grade+flach-Riffel-192 (150%)
</option>
</select>

<br><br>

</div>
</div>
<br>
<br>
</td>

</table><br><br>


</body>
<script>
window.addEventListener('change', event => {
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>

</html>

Sempervivum hat gesagt.:
Warum machst Du denn woanders einen Thread auf, wo ich doch hier deine Frage beantwortet habe?
Ich hätte darauf hin weisen sollen: Bei den Bildern in data-img-url habe ich meine eigenen zum Testen verwendet, das kann bei dir natürlich nicht funktionieren. Du musst die Werte durch die URLs deiner eigenen Bilder ersetzen. Hopping von einem Forum zum nächsten ist in den wenigsten Fällen zielführend.

HABS GESCHAFFT!!!
VIELEN DANK!
Damit habe ich schon gar nicht mehr gerechnet nach 10 Tagen der Verzweiflung.
Das Forum soeben als wichtiges Lesezeichen gespeichert.
Wo sitzt mein Erlöser?

Mit Grüßen aus Wien,
Peter

PeterPlus · 27. November 2023

bdt600 hat gesagt.:
Permanent fertige Lösungen posten auch nicht.

Sorry, ich kenne die Regeln hier noch nicht, bin sonst nie in Foren.

bdt600 · 27. November 2023

PeterPlus hat gesagt.:
Sorry, ich kenne die Regeln hier noch nicht, bin sonst nie in Foren.

Du warst auch nicht gemeint.

Sempervivum · 27. November 2023

Wo sitzt mein Erlöser?

Falls Du mich meinst und es geografisch gemeint ist: Ich bin Ulrich, Südniedersachsen am Rande des Elm.

dropdown mit download

PeterPlus

Mitglied

bdt600

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

bdt600

Erfahrenes Mitglied

PeterPlus

Mitglied

PeterPlus

Mitglied

bdt600

Erfahrenes Mitglied

Sempervivum

Erfahrenes Mitglied

Neue Beiträge