dropdown mit download

[PeterPlus]

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

 

[PeterPlus]

Habe da noch eine Frage: der Download-Text ist immer unter den Abbildungen dazu, aber nur, weil alle png genau gleich groß sind und weil ich die "cover" Zeile unten weglasse:
.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;
}

Mit der Zeile wird die Größe zwar angepaßt, aber ich habe den Text drinnen und krieg ihn mit diesen padding-Einstellungen auch nicht drunter. Gibt es da bessere Lösungen?

Danke

 

[bdt600]

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ß.

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

Schön, dass du das komplett ignorierst.

 

[Sempervivum]

Eine sehr einfache Möglichkeit, das zu lösen, besteht darin, einfach die Höhe des Hintergrundbildes so festzulegen, dass es nicht mehr hinter dem Text liegt. Würde dann so aussehen:

Nachteil: Geht das Bild sehr in die Breite, würde es seitlich abgeschnitten. Um das zu vermeiden, müsste man Höhe und Breite mit Javascript so berechnen, dass es immer vollständig sichtbar ist, nach dem Prinzip "contain". Wäre auch kein großes Ding.

 

[PeterPlus]

Schön, dass du das komplett ignorierst.

Also:
die Formatierungsmöglichkeiten verstehe ich nicht, soll man auf das Bild klicken und wofür? Ich will nix formatieren...? Hab es auch erst jetzt gelesen, da ausschließlich bei notepad und CAD sitze, Bilder und STL´s erzeuge und jetzt sicher einige Wochen dafür brauche, da es mittlerweile ein- bis zweitausend Teile sind und ständig neue konstruiert werden und dazu kommen.
Das Aussehen paßt schon, denn die Anfänge liegen in den Legosteinen und Schienen der 60er-Jahre. Wichtig ist eher die Funktionalität für Interessierte, die sich anschließen und eigene Modelle für die nächste Maker Faire oder Modellbau-Ausstellung drucken und dazu beitragen, daß die Sache rasant wächst.
Bitte um Verständnis für meine Unkenntnis bezüglich Foren, wollte auch Niemanden verärgern oder kränken und ist für mich üblicherweise eine fremde Welt.

 

[Sempervivum]

Was die Formatierung betrifft:

Klicke erst auf die 3 Punkte oben, dann öffnet sich die Leiste darunter. Dort auf das rot markierte Symbol drücken.

So sieht Code unformatiert aus:
<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>

Und so formatiert:

    <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>

 

[Sempervivum]

Das Aussehen paßt schon, denn die Anfänge liegen in den Legosteinen und Schienen der 60er-Jahre. Wichtig ist eher die Funktionalität für Interessierte, die sich anschließen und eigene Modelle für die nächste Maker Faire oder Modellbau-Ausstellung drucken und dazu beitragen, daß die Sache rasant wächst.

Da stimme ich zu, zunächst Mal ist die Funktionalität wichtig und wir sollten das als erstes fertig stellen.

 

[PeterPlus]

Da stimme ich zu, zunächst Mal ist die Funktionalität wichtig und wir sollten das als erstes fertig stellen.

 

[PeterPlus]

Danke für die Erklärung mit dem Formatieren.
Habe nun begonnen, Daten einzuarbeiten und habe nun eine weitere Frage:
Beim Anklicken der Optionen werden die einzeln sofort heruntergeladen. Kann man auch ein Kästchen zum Ankreuzen hinzufügen, damit man am Ende der Seite die Ausgesuchten per Link zusammengefasst runterholen kann, oder wäre das dann zu komplex?

(Also hab jetzt alles versucht mit dem Formatieren- krieg das nicht anders hin als hier zu sehen.
[Und das rausschmeißen der Fehler mit dem validieren ist nur mit Wörterbuch daneben möglich, da alle Erklärungen in englisch sind]):

<!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;
            text-align: center;
            font-size: 35px;
            color: blue;
            background-size auto: 230px;
                    }
                    
  .image-dropdown2 {
            appearance: none;
            border: none;
            background-image: url('https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-Norm.png');
            background-repeat: no-repeat;
            background-position: center top;
            background-color: #FFF8DC;
            padding-top: 240px;
            padding-bottom: 10px;
            text-align: center;
            font-size: 35px;
            color: blue;
            background-size auto: 230px;
                    }

</style>


</head>

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

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

<tr>
        <td width="70%" rowspan=5 align="center" border="0" 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: 28.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="0" bgcolor="FFF8DC" class="roundedCorners">
        <font color=blue><center>
        <br>
<br><big><big><big><big><big>Gleise gerade</big></big>
<br>(Geriffelte f&uuml;r Steigungen)</big></big></big><br>
<br>

  <select class="image-dropdown1" id="image-dropdown">
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade-flach-glatt-128.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-128Norm.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-192.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-112.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-96.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-192.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-64.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-48.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-32.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-Riffel-128Norm.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-Riffel-192.png">
            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="0" bgcolor="FFF8DC" class="roundedCorners">
        <font color=blue><center>
        <br>
<br><big><big><big><big><big>Gleise rund</big></big>
<br>(Unterschiedliche Radien)</big></big></big><br>
<br>

  <select class="image-dropdown2" id="image-dropdown">
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-Norm.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-Norm.png">
            Gleis-rund-flach+Loch Radius Norm
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-Norm.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-Norm.png">
            Gleis-rund-flach-Radius Norm
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-1+einhalb.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-1+einhalb.png">
            Gleis-rund-flach+Loch-Radius-1+einhalb
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-1+einhalb.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-1+einhalb.png">
            Gleis-rund-flach-Radius-1+einhalb
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Viertel.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Viertel.png">
            Gleis-rund-flach-Viertel (&frac14;)
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Halb.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Halb.png">
            Gleis-rund-flach-Halb (&frac12;)
            </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-DreiViertel.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-DreiViertel.png">
            Gleis-rund-flach-DreiViertel (&frac34;)
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-2x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-2x.png">
            Gleis-rund-flach+Loch-Radius-2x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-2x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-2x.png">
            Gleis-rund-flach-Radius-2x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-3x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-3x.png">
            Gleis-rund-flach+Loch-Radius-3x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-3x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-3x.png">
            Gleis-rund-flach-Radius-3x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-4x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-4x.png">
            Gleis-rund-flach+Loch-Radius-4x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-4x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-4x.png">
            Gleis-rund-flach-Radius-4x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-5x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-5x.png">
            Gleis-rund-flach+Loch-Radius-5x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-5x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-5x.png">
            Gleis-rund-flach-Radius-5x
        </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="0" bgcolor="FFF8DC" class="roundedCorners">
        <font color=blue><center>
        <br>
<br><big><big><big><big><big>Gleise Zubeh&ouml;r</big></big>
<br>(Weichen, Kreuzungen, FixierAchsen, etc.)</big></big></big><br>
<br>

  <select class="image-dropdown2" id="image-dropdown">
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade-flach-glatt-128.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-128Norm.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-192.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-112.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-96.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-192.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-64.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-48.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-32.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-Riffel-128Norm.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-Riffel-192.png">
            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="0" bgcolor="FFF8DC" class="roundedCorners">
        <font color=blue><center>
        <br>
<br><big><big><big><big><big>Gleise rund</big></big>
<br>(Unterschiedliche Radien)</big></big></big><br>
<br>

  <select class="image-dropdown1" id="image-dropdown">
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-Norm.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-Norm.png">
            Gleis-rund-flach+Loch Radius Norm
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-Norm.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-Norm.png">
            Gleis-rund-flach-Radius Norm
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-1+einhalb.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-1+einhalb.png">
            Gleis-rund-flach+Loch-Radius-1+einhalb
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-1+einhalb.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-1+einhalb.png">
            Gleis-rund-flach-Radius-1+einhalb
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Viertel.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Viertel.png">
            Gleis-rund-flach-Viertel (&frac14;)
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Halb.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Halb.png">
            Gleis-rund-flach-Halb (&frac12;)
            </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-DreiViertel.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-DreiViertel.png">
            Gleis-rund-flach-DreiViertel (&frac34;)
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-2x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-2x.png">
            Gleis-rund-flach+Loch-Radius-2x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-2x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-2x.png">
            Gleis-rund-flach-Radius-2x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-3x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-3x.png">
            Gleis-rund-flach+Loch-Radius-3x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-3x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-3x.png">
            Gleis-rund-flach-Radius-3x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-4x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-4x.png">
            Gleis-rund-flach+Loch-Radius-4x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-4x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-4x.png">
            Gleis-rund-flach-Radius-4x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-5x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-5x.png">
            Gleis-rund-flach+Loch-Radius-5x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-5x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-5x.png">
            Gleis-rund-flach-Radius-5x
        </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="0" bgcolor="FFF8DC" class="roundedCorners">
        <font color=blue><center>
        <br>
<br><big><big><big><big><big>Gleise gerade</big></big>
<br>(Geriffelte f&uuml;r Steigungen)</big></big></big><br>
<br>

  <select class="image-dropdown1" id="image-dropdown">
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-grade-flach-glatt-128.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-128Norm.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-192.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-112.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-96.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-192.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-64.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-48.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-glatt-32.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-Riffel-128Norm.png">
            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="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-grade-flach-Riffel-192.png">
            Gleis-grade-flach-Riffel-192 (150%)
        </option>
    </select>

<br><br>

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

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



        <td width="70%" rowspan=5 align="center" border="0" bgcolor="FFF8DC" class="roundedCorners">
        <font color=blue><center>
        <br>
<br><big><big><big><big><big>Gleise rund</big></big>
<br>(Unterschiedliche Radien)</big></big></big><br>
<br>

  <select class="image-dropdown2" id="image-dropdown">
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-Norm.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-Norm.png">
            Gleis-rund-flach+Loch Radius Norm
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-Norm.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-Norm.png">
            Gleis-rund-flach-Radius Norm
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-1+einhalb.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-1+einhalb.png">
            Gleis-rund-flach+Loch-Radius-1+einhalb
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-1+einhalb.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-1+einhalb.png">
            Gleis-rund-flach-Radius-1+einhalb
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Viertel.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Viertel.png">
            Gleis-rund-flach-Viertel (&frac14;)
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Halb.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Halb.png">
            Gleis-rund-flach-Halb (&frac12;)
            </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-DreiViertel.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-DreiViertel.png">
            Gleis-rund-flach-DreiViertel (&frac34;)
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-2x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-2x.png">
            Gleis-rund-flach+Loch-Radius-2x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-2x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-2x.png">
            Gleis-rund-flach-Radius-2x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-3x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-3x.png">
            Gleis-rund-flach+Loch-Radius-3x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-3x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-3x.png">
            Gleis-rund-flach-Radius-3x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-4x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-4x.png">
            Gleis-rund-flach+Loch-Radius-4x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-4x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-4x.png">
            Gleis-rund-flach-Radius-4x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach+Loch-Radius-5x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach+Loch-Radius-5x.png">
            Gleis-rund-flach+Loch-Radius-5x
        </option>
        <option value="https://3d.peterplus.eu/MF23/download/Gleise/STL/Gleis-rund-flach-Radius-5x.stl"
            data-img-url="https://3d.peterplus.eu/MF23/download/Gleise/Gleis-rund-flach-Radius-5x.png">
            Gleis-rund-flach-Radius-5x
        </option>
  </select>

<br><br>

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



<tr>
</table><br><br>
<!----------------------------------------->


</body>
<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();
            }
        });
    </script>

<script>
        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();
            }
        });
    </script>


</html>

 

[Sempervivum]

Das Formatieren ist vollkommen in Ordnung so, sei unbesorgt.

Was das Herunterladen mehrerer Dateien auf ein Mal betrifft gilt zwar "geht nicht gibt's nicht" aber es würde schon ein wenig komplizierter: Man müsste sie in eine ZIP-Datei packen und diese herunterladen.
Aus Sicherheitsgründen fordert der Browser nämlich, dass beim Speichern im lokalen Dateisystem der Benutzer für jede Datei bestätigen muss.