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-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)">
<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-dropdown">
<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 (¾)
</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 (½)
</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 (¼)
</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>
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-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)">
<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-dropdown">
<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 (¾)
</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 (½)
</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 (¼)
</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>
