Jimdo-Specials (Tools, Widgets, HTML und CSS)

Jimdo-Userforum � Jimdo User-Forum � Jimdo-Specials (Tools, Widgets, HTML und CSS) � wie HTML + Javascript

Themen-Einstellungen

Bereich wechseln

Allgemeines Regeln f�r die Benutzung des Forums HowToDo ( = so geht�s) Jimdo User-Forum Eure Jimdo-Webseiten - Vorstellungsrunde Bugs, Workarounds und Anregungen Jimdo-Elemente Allgemeines Jimdo-Shop Jimdo-Specials (Tools, Widgets, HTML und CSS) Suchmaschinenoptimierung (SEO) Sonstiges Tutorials "OffTopic"-Themen "�bernahme" von Beitr�gen aus dem offiziellen Jimdo-Forum... Nutzungsbedingungen und Haftungsausschluss Jimdo-Blog

#1 | wie HTML + Javascript datum

09.06.2023 09:09

edissport

Informationen anzeigen

Beitr�ge:	3
Registriert seit:	30.10.2022

Guten Morgen Zusammen,
ich hoffe ich werde nicht gleich gesteinigt.

Ich möchte auf meiner Seite ein kleines Tool integrieren welches eine Bilddatei überprüft ob die Auflösung für den von mir gewünschten Zweck geht.
Ein lieber Mensch hat mir hier mal kurz was gebastelt was dem was ich möchte sehr nahe kommt.

(Leider darf ich erst nach 5 Beiträgen auf eine externe Seite verweisen )

HTML Code klappt ja!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
<html>
<head>
  <title>Bilddatei-Überprüfungstool</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
      background-color: #f3f3f3;
    }
 
    h1, h2 {
      color: #333;
    }
 
    form {
      margin-bottom: 20px;
    }
 
    label {
      display: block;
      margin-bottom: 10px;
      color: #666;
    }
 
    #size {
      display: block;
      margin: 0 auto;
    }
 
    button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #4CAF50;
      color: #fff;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
 
    button:hover {
      background-color: #45a049;
    }
 
    #preview {
      max-width: 100%;
      max-height: 400px;
      margin: 0 auto;
      border: 1px solid #ddd;
      padding: 10px;
      box-sizing: border-box;
      background-color: #fff;
    }
  </style>
</head>
<body>
  <h1>Bilddatei-Überprüfungstool</h1>
  <form>
    <label for="file">Bilddatei auswählen:</label>
    <input type="file" id="file" accept="image/*">
    <br>
    <label for="size">Druckgröße:</label>
    <select id="size">
      <option value="small">Klein (Brustlogo)</option>
      <option value="large">Groß (Rückenlogo)</option>
    </select>
    <br>
    <button type="button" onclick="checkImage()">Bild überprüfen</button>
  </form>
 
  <div id="preview"></div>
  <script src="script.js"></script>
</body>
</html>
 
 

Javascript scheitere ich am einbau - da ich nicht weiß wie und wo ich diesen einbauen soll

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
function checkImage() {
  var fileInput = document.getElementById('file');
  var preview = document.getElementById('preview');
  var selectedSize = document.getElementById('size').value;
  
  if (fileInput.files && fileInput.files[0]) {
    var reader = new FileReader();
    
    reader.onload = function(e) {
      var image = new Image();
      image.src = e.target.result;
      
      image.onload = function() {
        var width = this.width;
        var height = this.height;
        
        if (selectedSize === 'small' && (width < 500 || height < 500)) {
          preview.innerHTML = 'Das Bild ist zu klein für ein Brustlogo.';
        } else if (selectedSize === 'large' && (width < 1000 || height < 1000)) {
          preview.innerHTML = 'Das Bild ist zu klein für ein Rückenlogo.';
        } else {
          preview.innerHTML = 'Das Bild ist geeignet.';
        }
        
       // preview.appendChild(image);
      }
    };
    
    reader.readAsDataURL(fileInput.files[0]);
  }
}
 

Kann mir jemand für einen kleinen Dummi dies erklären bzw. helfen?

Dankeschön

Antworten

#2 | RE: wie HTML + Javascript datum

10.06.2023 14:33

Kann mir wirklich niemand helfen hier???

Antworten

#3 | RE: wie HTML + Javascript datum

03.07.2023 18:56

Generell musst du Skripte in dem Heftbereich eine Jindo Seite immer einbinden. Das funktioniert ähnlich wie beim HTML mit klammern.
Ein Stylesheet zum Beispiel wird immer mit <style type="text/css"> � </style>

Ein Java Skript wird immer mit folgenden Klammern eingebunden:

mit <script type="text/javascript"> � </script>

Achtung: Code im Forum bitte immer mit der Schaltfläche für "Code" einkapseln!!! (=

)

Bitte sendet mir keine privaten Nachrichten über dieses Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

...hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de

...NEU!!! - hier könnt Ihr unser Userforum finanziell unterstützen: https://redesign-berlin.xobor.de/donations.html

Antworten

Menüleiste fixieren und in Mobilansicht sichtbar machen � � Mobile Ansicht: Menü verdeckt Logo

�hnliche Themen

Antworten

Letzter Beitrag

HTML Code einfügen bei Jimdo Kostenlos testen 0 � pro Monat
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Thori 1 09.11.2023 02:42
az_ • Zugriffe: 121
Link auf externe html-Galerie
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von repro 3 09.04.2022 21:51
az_ • Zugriffe: 554
javascript:void(0)
Erstellt im Forum Bugs, Workarounds und Anregungen von 450scr 3 21.01.2022 17:15
az_ • Zugriffe: 1221
Widget / HTML Element «verloren»
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von sgrafik 1 24.07.2021 09:39
az_ • Zugriffe: 443
HTML Element verlinken
Erstellt im Forum Jimdo-Elemente von twoparts 3 26.08.2019 11:18
twoparts • Zugriffe: 986
JImdo Mobilewebsite mit eigenem HTML bearbeiten
Erstellt im Forum Eure Jimdo-Webseiten - Vorstellungsrunde von Florian Heitkamp 2 15.12.2018 12:47
az_ • Zugriffe: 1269
HTML Map responsive + falsche Links
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von AnnaEQ 2 27.01.2018 23:53
az_ • Zugriffe: 1233
Laufband HTML mit Hintergrund
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Sven Mittelbach 0 27.02.2017 13:27
Sven Mittelbach • Zugriffe: 1103
HTML-Datei fest einbinden auf Unterseite
Erstellt im Forum Jimdo-Specials (Tools, Widgets, HTML und CSS) von Henner 1 12.02.2017 10:26
az_ • Zugriffe: 1025

Xobor-Forum f�r Jimdo-Creator User

Bitte geben Sie einen Grund f�r die Verwarnung an