• Countdown (Geburtstag)
x
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Countdown</title>
    <meta name="Pedro" content="luck-cbs">
  </head>
<body>
    <div style="text-align: center; background-image: url('https://luck-cbs.ch/uploads/1/3/7/6/137608123/torte-tfe_orig.png'); background-repeat: no-repeat; background-position: center; width:auto;max-width:100%;">
      <span id="c3"> <br><br><br><br><br>
        <h3>bis zu deinem Geburtstag<br>sind es noch...</h3>
        <span id="c1" style="font: bold 24px arial; color: #8A0808
;"></span><br>
        <span style="font: bold 18px arial; color: #B40404
;" id="c2">;</span><br><br><br><br>
      </span>
    </div>
    <br>
    <script type="text/javascript">
var end = new Date('November 23, 2023 18:30:00');
function toSt2(n) {
  var s = '';
  if (n < 10) {
   s += '0';
  }
  return (s + n).toString();
}
function toSt3(n) {
var s = '';
if (n < 10) {
  s += '00';
}
else if (n < 100) {
  s += '0';
}
return (s + n).toString();
}
function countdown() {
var d = new Date();
var count = Math.floor(end.getTime() - d.getTime());
if (count > 0) {
  var miliseconds = toSt3(count%1000); count = Math.floor(count/1000);
  var seconds = toSt2(count%60); count = Math.floor(count/60);
  var minutes = toSt2(count%60); count = Math.floor(count/60);
  var hours = toSt2(count%24); count = Math.floor(count/24);
  var days = count;
  document.getElementById('c1').innerHTML = days + ' TAGE';
  document.getElementById('c2').innerHTML = hours + ':' + minutes + ':' + seconds
  setTimeout('countdown()', 100);
}
else {  document.getElementById('c3').innerHTML = 'ABGELAUFEN';
}
}
countdown();
</script>
  </body>
</html>
Viele Anbieter offerieren Online-Countdowns aller Art, die Sie etwas personalisieren und dann auf Ihrer Homepage einbetten können. Countdowns werden meist spielerisch verwendet, oder auch gerne für befristete Angebote oder geplante Ereignisse. Sie können aber ebenso gut als Erinnerungshilfe für ein bedeutendes Event eingerichtet werden. Lernen Sie hier eine spielerische Variante kennen, die Sie jedoch beliebig abändern können. Im Codebeispiel sind die anzupassenden Stellen rot dargestellt. Mit ein bisschen HTML-Kenntnissen, passen Sie natürlich auch Schriftart, -stil, -grösse, -farbe und -ausrichtung Ihren Vorstellungen an.
Sie brauchen lediglich:
  • eine Thematik (hier: jemand hat am 23.11. um 18:30 Uhr Geburtstag)
  • ein geeignetes Hintergrundbild (nicht zwingend)
  • einen exakten Termin
  • Zugriff auf Ihren Webserver
Wenn das Ereignis vorbei ist, wird ABGELAUFEN angezeigt!

  • drei responsive Linkarten
Soll der Besucher, die Besucherin beim Anklicken eines Links die momentane Seite nicht ganz aus den Augen verlieren, ist es sinnvoll, wenn sich die Seite in einem neuen Fenster öffnet. Standardmässig tut sich aber ein neuer Tab auf und die Ausgangsseite tritt ganz in den Hintergrund. Sie können das verhindern, indem sich der verlinkte Inhalt nicht im Vollbildmodus öffnet.
Ich zeige das hier mit den drei am häufigsten verwendeten Linkformen.
x
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
  </head>
  <body>
    <h3>der Textlink</h3>
    <a href="https://luck-cbs.ch/uploads/1/3/7/6/137608123/alle-sm-mit_orig.png"
      onclick="window.open(this.href,'_blank','width=1024,height=768','noopener,resizeable'); return false"><u>welche
        Suchmaschinen</u>?</a><br>
    <br>
    <h3>die Schaltflaeche</h3>
    <a href="https://luck-cbs.ch/uploads/1/3/7/6/137608123/alle-sm-mit_orig.png"
      onclick="window.open(this.href,'_blank','width=1024,height=768','noopener,resizeable'); return false">
      <input class="button" value="welche Suchmaschinen?" type="button"></a><br>
    <br>
    <h3>der Bildlink</h3>
    <a href="https://stationsweb.awekas.at/index.php?&amp;id=25043" target="popup"
      onclick="window.open(this.href,'_blank','width=1400,height=790','noopener,resizeable'); return false"><img src="https://luck-cbs.ch/uploads/1/3/7/6/137608123/ol-meteo-o_orig.png"
        alt="Stationsweb" onmouseover="src='https://luck-cbs.ch/uploads/1/3/7/6/137608123/ol-meteo-mo_orig.png '"
        onmouseout="src='https://luck-cbs.ch/uploads/1/3/7/6/137608123/ol-meteo-o_orig.png'"></a>
  </body>
</html>
Hinweis: Neue Fenster (Popups) sind nicht überall beliebt und werden von manchen Browsern standardmässig blockiert oder lösen einen Hinweis aus. Das kommt daher, dass der Effekt zu oft für lästige Werbung, die sich unangeklickt öffnet, genutzt wird.

  • responsive ImageMap mit Hotspot-Links
Spätestens dann, wenn ein Bild Hotspots enthält, kommen Sie um die Responsibiltät nicht mehr herum. Denn ohne, verschieben sich, selbst bei Skalierbarkeit des Bildes, die Koordinaten der Hotspots ins Unbrauchbare. Das können Sie an diesem Beispiel der Suchmaschinen-Map sehr gut nachvollziehen.
x
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <title>responsive Imagemapsm</title>
  </head>
  <body>
    <figure id="imagemapsm">
      <svg viewBox="0 0 1820 1180">
        <defs>
          <style> circle:hover { fill: yellow; opacity:0.5; } </style> </defs>
        <image width="1820" height="1180" href="https://luck-cbs.ch/uploads/1/3/7/6/137608123/alle-sm-mit_orig.png" alt="Suchmaschinen"> </image>
   <a onclick="window.open(href='https://duckduckgo.com/','_blank','width=1024,height=768','noopener,resizeable'); return false">
        <circle cx="400" cy="250" opacity="0" r="120"></circle> </a>
   <a onclick="window.open(href='https://www.lycos.de/','_blank','width=1024,height=768','noopener,resizeable'); return false">
         <circle cx="680" cy="580" opacity="0" r="120"></circle> </a>
   <a onclick="window.open(href='https://swisscows.com/','_blank','width=1024,height=768','noopener,resizeable'); return false">
         <circle cx="1150" cy="380" opacity="0" r="120"></circle> </a>
   <a onclick="window.open(href='https://www.google.de/','_blank','width=1024,height=768','noopener,resizeable'); return false">
         <circle cx="380" cy="830" opacity="0" r="120"></circle> </a>
   <a onclick="window.open(href='https://de.search.yahoo.com/','_blank','width=1024,height=768','noopener,resizeable'); return false">
         <circle cx="1100" cy="830" opacity="0" r="120"></circle> </a>
        <a onclick="alert('oder kennen Sie eine Suchmaschine, die alle Vorteile der anderen in sich vereint? Das wäre wunderbar!')">
          <circle cx="1540" cy="600" opacity="0" r="120"></circle> </a> </svg>
    </figure>   
  </body>
</html>
Es gibt grundsätzlich folgende Arten von Hotspots:
  • Viereck (rect)
Es hat 4 Koordinatenwerte: x1, y1, x2, y2
x1 - Abstand der linken Ecke oben in Pixel von links
y1 - Abstand der linken Ecke oben in Pixel von oben
x2 - Abstand der rechten Ecke unteren in Pixel von links
y2 - Abstand der rechten Ecke unteren in Pixel von oben
  • Kreis (circle)
Er hat 3 Koordinatenwerte: x1, y1, rad
x1 - Abstand des Kreis-Mittelpunkts in Pixel von links
y1 - Abstand des Kreis-Mittelpunkts in Pixel von oben
rad - Radius des Kreises in Pixel
  • Polygon (poly)
Es hat jeweils 2 Koordinatenwerte für jeden Punkt x(n) und y(n)
x[n] - Abstand eines Punktes in Pixel von links
y[n] - Abstand eines Punktes in Pixel von oben
Wie findet man nun diese Koordinaten eines Bildbereichs heraus? Praktisch in jedem Grafikprogramm können diese Angaben unter Infos herausgelesen werden. Selbst in Windows Paint sehen Sie diese Angaben in der Statusleiste, wenn Sie mit der Maus auf eine bestimmte Stelle im Bild zeigen.

  • Arbeitszeit berechnen
Es ist bei Berechnungen nötig, die Arbeitszeiten in Dezimalstunden, statt in Stunden und Minuten auszudrücken. Ebenfalls wichtig ist, dass die Pausendauer von der Beschäftigungszeit abgezogen wird. Das kann von Hand doch einige Rechnerei mit Fehlerquellen geben. Dieses Tool erleichtert die Erfassung und übernimmt die Berechnung und Umwandlung.
​Sie können es hier ausprobieren. Das Script lernen Sie im Workshop tipp0623.
Wenn Sie jetzt den Workshop fleissig gemacht haben, brauchen Sie den Code wahrscheinlich gar nicht mehr. Nachsehen oder downloaden ist immer erlaubt :)
x
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Kurs AZDS</title>
    <meta name="luck-cba" content="Peter Luck">
  </head>
  <body>
    <script>
window.addEventListener("DOMContentLoaded", function() {
 document.getElementById("bZeit").addEventListener("change", SumHours);
 document.getElementById("eZeit").addEventListener("change", SumHours);
 document.getElementById("pZeit").addEventListener("change", SumHours); 
});
function SumHours() {
  var bzeit = document.getElementById('bZeit').value;
  var ezeit = document.getElementById('eZeit').value;
  var pzeit = document.getElementById('pZeit').value;
  var diff = 0;
 if (bzeit && ezeit && pzeit) {
  bzeit = ConvertToSeconds(bzeit);
  ezeit = ConvertToSeconds(ezeit);
  pzeit = ConvertToSeconds(pzeit); 
  diff = Math.abs(ezeit - bzeit - pzeit);
  document.getElementById('outdez').value = (diff/3600).toFixed(2);
  document.getElementById('out').value = secondsToHHmmSS(diff)
 }
 function ConvertToSeconds(time) {
  var splitTime = time.split(":");
  return splitTime[0] * 3600 + splitTime[1] * 60;
 }
 function secondsToHHmmSS(secs) {
  var hours = parseInt(secs / 3600);
  var seconds = parseInt(secs % 3600);
  var minutes = parseInt(seconds / 60);
  if (minutes < 10){
    minutes = '0' + minutes;
   }
   return hours + ":" + minutes;
 }
}
</script> <h2>Arbeitszeitberechnung</h2>
    <br>
    <p><label>Beginn: <input id="bZeit" type="time"></label></p>
    <p><label>Ende: <input id="eZeit" type="time"></label></p>
    <p><label>Pausendauer: <input id="pZeit" value="00:00" type="time"></label></p>
    <p><b>Arbeitszeit: </b> <input id="out" readonly="readonly" type="text"></p>
    <p><b>Dezimalstunden: </b> <input id="outdez" readonly="readonly" type="text"></p>
  </body>
</html>
  • einfaches Dropdown
Eine Dropdownliste eignet sich bestens für die Navigation auf Ihrer Website, besonders um gewisse Unterbereiche auf einer bestimmten Seite aufzurufen. Der Grundcode dafür ist einfach und hat den grossen Vorteil, dass Sie die Einträge im Dropdown bei wachsender Seite stets im HTML-Editor erweitern und anpassen können.
x
<html>
    <body>
    <h4>Dropdownbeispiel</h4>
    <br>
    <select onchange="window.location.href=this.value">
      <option value="">Ihr Auswahltitel</option>
      <option value="https://google.ch">zu Google</option>
    </select>
  </body>
</html>
Wenn Sie möchten, dass sich das Ziel im Dropdown in einem neuen Fenster (Tab) öffnet, müssen Sie die Zeile am Anfang <select onchange="window.location.href=this.value">
so schreiben: 
<select onchange="window.open(this.value,'_blank')"> 
Anwendung:
Auf der sich laufend entwickelnden Excel-Seite ist das so gelöst. Dazu sind auf der Seite Sprungmarken in Form von IDs definiert:
<p id="boxplot"> und im Dropdown wird dann so darauf verwiesen:
<option value="https://luck-cbs.ch/excel/#boxplot">01 Boxplot</option>
=> zur Excel-Seite

  • Dropdowninhalt in neuem Fenster, fester Grösse
Ob nun ein neues Fenster fester Grösse sinnvoll ist oder nicht, darüber wird oft debattiert und Sie müssen das selbst entscheiden. Ich schätze daran, dass man die Ausgangsseite weniger aus den Augen verliert. Machbar ist es auf jeden Fall, hier mit dem Bildaufruf aus einem Dropdown ansatzsweise demonstriert. 
x
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title></title>
    <meta name="author" content="Peter Luck">
  </head>
  <body>
    <h4>Dropdown -> neues Fenster</h4>
    <br>
    <select onchange="window.open(this.value,'_blank','width:auto;max-width:80%,resizeable=yes')">
      <option value="">welches Diagramm?</option>
      <option value="https://luck-cbs.ch/uploads/1/3/7/6/137608123/w0422-4_orig.png">Niederschläge</option>
      <option value="https://luck-cbs.ch/uploads/1/3/7/6/137608123/w0422-5_orig.png">Feuchtigkeit</option>
    </select>
  </body>
</html>

  • ein Detail "poppen"
x
<img usemap="#map3" src="https://luck-cbs.ch/uploads/1/3/7/6/137608123/strat1-pop_orig.png" alt="" border="0" width="" height="">
<map name="map3">
<area title="edle Truss Rod - Abdeckung" href="https://luck-cbs.ch/uploads/1/3/7/6/137608123/detail-2-1024_orig.png" target="_blank"
coords="112,114,30" shape="circle">
</map>

  • Datei einbinden
Embedding
Manchmal ist es sinnvoll, praktisch und sieht erst noch etwas interaktiv aus, wenn Sie Inhalte (beispielsweise eine PDF-Datei) direkt auf der Seite einbinden. Der einfachste Weg ist das Einbetten über den Befehl embed. Die Breite und Höhe des eingebetteten Fensters wird mit widht="px" und height="px" angegeben. Wir betten am Beispiel eine PDF-Datei ein, die erklärt, wie ein Dropdown mit HTML erstellt wird.
So sieht dann das Ergebnis aus:
x
​<h4>ein Beispiel</h4><br>
<embed width="600" height="350" src="https://luck-cbs.ch/uploads/1/3/7/6/137608123/html-dropdown.pdf">

  • Primzahl-Checker
​Bei diesem HTML-Experiment brauchen Sie bereits ein bisschen mehr als reinen HTML-Code, nämlich ein kleines Function-Script mit Java. In diesem steht die eigentliche Anweisung, was und wie gerechnet werden soll. Es geht darum zu überprüfen, ob eine beliebige Zahl eine Primzahl ist. Die mathematische Überprüfung besteht darin, zu schauen, ob die Zahl durch irgendeine andere als durch sich selbst und/oder durch 1 teilbar ist. Wobei 1 keine Primzahl ist. 44 ist keine Primzahl weil: teilbar durch 2 = 22 und teilbar durch 4 = 11. Damit die Aufzählung nicht ellenlang wird, werden reverse Teiler, also 22 und 11 nicht mehr aufgeführt. Ist also eine Zahl durch 2, oder durch irgendeine andere Zahl ≠ 1, oder die Zahl selber teilbar, so ist es keine Primzahl.
x
​  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
  </head>
  <body>
    <h2>Primzahl-Checker V 2.3</h2>
    <script language="JavaScript">
<!--
function PrimzahlCheck(Zahl)
{
  if (Zahl <= 1) {
    alert(Zahl + " ist keine Primzahl, math. Abmachung!");
  }
  else {
    for (i = 2; i * i <= Zahl; i++) {
      if (Zahl % i === 0) {
        alert(Zahl + " ist keine Primzahl, weil teilbar durch " + i);
        return;
      }
    }
    alert (Zahl + " ist eine Primzahl!");
  }
}
//-->
</script> <form name="PrimzahlFormular"> Ist diese Zahl eine Primzahl?<br>
      <br>
      <input name="Eingabezahl" type="text"> <input value="auf Primzahl checken"
 
onclick="PrimzahlCheck(document.PrimzahlFormular.Eingabezahl.value)" type="button">
    </form>
  </body>
</html>

  • Alert Bildbeschreibung
Die einfachste Art der Bildbeschreibung ist aber ein Alert auf das Bild mit einer kleinen Funktion.
Ergebnis:
x
<html>
  <head>
  </head>
  <body>
    <h2>JavaScript Alert</h2>
    <img src="https://luck-cbs.ch/uploads/1/3/7/6/137608123/strat1_orig.png"; onclick="myFunction()">
<script>
function myFunction() {
  alert("Das ist meine allererste selbstgebaute Strat, entstanden 2018 in Andeer!");
}
</script>
  </body>
</html>
PDF aller Beschreibungsmethoden  herunterladen...

  • unter die Lupe nehmen

ja, das ist schon gut, wenn man gewisse Sachen etwas genauer anschaut.
Fahren Sie mit der Maus über das Bild - und Sie können Details anschauen. Auf dem Smartphone tippen Sie einfach auf den Bereich, den Sie vergrössern möchten und die Lupe springt dorthin.
​Der Code ist hier etwas komplexer:
x
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
* {box-sizing: border-box;}

.img-magnifier-container {
  position:relative;
}

.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  width: 125px;
  height: 125px;
}
</style> <script>
function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  img.parentElement.insertBefore(glass, img);
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;

  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  function moveMagnifier(e) {
    var pos, x, y;
    e.preventDefault();
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;

    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
    if (y < h / zoom) {y = h / zoom;}

    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    a = img.getBoundingClientRect();
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}
</script> </head>
  <body>
    <h3>unter die Lupe nehmen</h3>
    <div class="img-magnifier-container"> <img id="myimage" src="https://luck-cbs.ch/uploads/1/3/7/6/137608123/e-bass_orig.png"

        height="500" width="200"> </div>
    <script>
magnify("myimage", 3);
</script>
  </body>
</html>
​luck-cbs | computer - beratung - support | 7203 trimmis | graubünden