luck-cbs
  • Home
    • Impressum
  • Dienstleistungen
    • Downloads
    • FAQs
    • IT-News >
      • Breakdown
      • Excel
      • linux >
        • actual-linux
      • Windows11
    • Links
    • Schnäppchen
    • specials >
      • Codeseite
  • PC-Tipps
    • vorschau
    • Tipp 1023
    • Tipp 0923
    • Tipp 0823
    • Tipp 0723
    • Tipp 0623
    • Tipp 0523
    • Tipp 0423
    • Tipp 0323
    • Tipp 0223
    • Tipp 0123
    • Jahr 2022 >
      • Tipp 1222
      • Tipp 1122
      • Tipp 1022
      • Tipp 0922
      • Tipp 0822
      • Tipp 0722
      • Tipp 0622
      • Tipp 0522
      • Tipp 0422
      • Tipp 0322
      • Tipp 0222
      • Tipp 0122
    • Jahr 2021 >
      • Tipp 1221
      • Tipp 1121
      • Tipp 1021
      • Tipp 0921
      • Tipp 0821
      • Tipp 0721
      • Tipp 0621
      • Tipp 0521
      • Tipp 0421
      • Tipp 0321
      • Tipp 0221
      • Tipp 0121
  • Tipps-Archiv
  • wer ist
    • Jubiläum
    • Gitarren
    • Wetter >
      • onlinetools
      • Meteocam
      • meteodiagramme
      • wettercomments
      • Wetterparameter
      • meteoarchiv
      • Sonnenuhr
    • electric
    • Kunst
  • Kontakt

tipp 0823 responsive Inhalte

Bildschirme und Displays haben ganz verschiedene Formate, Grössen und Auflösungen. Sind die Inhalte nicht responsiv (d.h. sie passen sich nicht der Grösse und Auflösung an), führt das dazu, dass die Inhalte abgeschnitten werden und man nur mittels scrollen an alle Informationen gelangt. Dies ist insbesondere bei Bildern mit Hotspot-Links alles andere als benutzerfreundlich.
Bild
Mit etwas JAVA-Script und HTML lassen sich praktisch alle Inhalte responsiv oder dynamisch gestalten. Wir schauen uns in diesem Workshop folgendes an:
  • responsives Bild (mit oder ohne Link)
  • responsiver iFrame
  • responsives Bild mit Hotspot-Links
  • Textlink, Schaltfläche, Bildlink -> neues Fenster bestimmter Grösse (skalierbar)
Responsives Bild
Gleich vorweg: bei gewöhnlichen Bildern, die Sie mit HTML oder per Bild-URL einfügen, genügt es in der Regel, neben dem Pfad, die folgenden Bildattribute zu verwenden.

<img src="https://luck-cbs.ch/images/vogel_orig.png" alt="Vogel" style="width:auto;max-width:100%">

Das Bild wird somit an die Auflösung und Displaygrösse angepasst.
Sie können relativ einfach ein responsives Bild einfügen, indem Sie folgenden Grundcode verwenden. Dabei wird mit dem Befehl content="width=device-width, initial-scale=1" definiert, dass das Bild an das jeweilige Device angepasst werden soll. Zudem definieren Sie mit height= und width= die Originalgrösse des Bildes mit bester Auflösung. Max-width: 100% sagt, dass die maximal zur Verfügung stehende Displayfläche bis zur angegebenen Grösse height und width ausgenutzt wird. Ist das Display kleiner, wird auch das Bild verkleinert, ohne jedoch abgeschnitten zu werden. Dies zeigt sich besonders deutlich auf Ihrem Tablet oder Smartphone.
Bild
Im Beispiel verwende ich die Bilddatei Vogel.png mit der Auflösung 3555 x 1880px. Daraus ergibt sich dann folgendes Script:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
.responsive {
  max-width: 100%;
  height: auto;
}
</style>
  </head>
  <body>
    <img src="https://luck-cbs.ch/uploads/1/3/7/6/137608123/vogel_orig.png"
 
      alt="Black-Bird" class="responsive" height="1880" width="3555"> 
  </body>
</html>

Im skalierbaren Fenster können Sie das Verhalten des Bildes gut ausprobieren.
Responsiver iFrame
Bei einem iFrame kann es besonders wichtig sein, dass der eingebettete Inhalt nicht abgeschnitten wird. Standardmässig wird einfach die Grösse des iFrames angegeben, und – es werden dann nötigenfalls Scroll-Leisten eingeblendet. Das kann zwar für Details nützlich sein, doch erschwert es den Überblick. Sie können den superFrame ausprobieren, indem Sie eine andere Seite Ihrer Homepage einbinden.
Hinweis: Leider funktioniert das nicht mit einer Excel-Tabelle aus onedrive.live.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>iFrame</title>
    <meta name="author" content="Peter Luck">
  </head>
  <body> <iframe id="superFrameTA" src="https://luck-cbs.ch/tipps-archiv"
 
      style="width: 100%; border: none;" scrolling="no" height="1200"></iframe>
    <script type="text/javascript">
         window.addEventListener('message', function(e) {
           var iframe = document.getElementById('superFrameTA');
           var eventName = e.data[0];
           var height = e.data[1];
           switch(eventName) {
             case 'setIframeHeight':
               iframe.height = height;
               break;
           }
         }, false);
       </script>
  </body>
</html>

Responsives Bild 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.
Nachtrag: damit sich die Hotspot-Links nicht nur in einem neuen Tab, sondern in einem neuen Fenster fester Grösse öffnen, habe ich den Code jetzt noch etwas optimiert.

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

Bild
Statt eines Links können Sie auch einen Alert auf die Hotspots legen. Das sehen Sie beim letzten Eintrag, der ?? unbekannten Suchmaschine.
Schaltfläche -> neues, skalierbares Fenster fester Anfangsgrösse
Wenn Sie jetzt in diesem Tipp auf die Schaltfläche 'ausprobieren' geklickt haben, dann haben Sie jeweils genau diese Prozedur ausgelöst. Besonders effektvoll ist dies auf grossen Displays, auf dem Mobile öffnet sich einfach ein neuer Tab. Gemacht wird's so:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1252">
  </head>
  <body> <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','resizeable=yes'); return false">
      <input class="button" value="ausprobieren" type="button"> </a>
  </body>
</html>

Unter <a href="…" kommt dann einfach der entsprechende Inhalt rein.
Textlink, Schaltfläche, Bildlink -> neues Fenster fester Grösse
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.
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.
Item: Ich zeige das hier mit den drei am häufigsten verwendeten Linkformen.

Textlink
Den Textlink sieht man am häufigsten. Er ist meist eindeutig, gewohnt und leicht verständlich. Er ist mit HTML auch sehr einfach zu erstellen. Speziell an unserem Beispiel ist, dass sich das Linkziel in einem neuen, skalierbaren Fenster öffnet. Der Textlink öffnet in diesem Fall ein Bild.
Dazu schreiben wir folgendes HTML:

<!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','resizeable=yes'); return false">welche Suchmaschinen?</a>  
  </body>
</html>

Schaltfläche
Es kann noch ganz schick wirken, wenn wir statt des Textlinks eine Schaltfläche (Button) verwenden. Am HTML-Code ändert sich nicht viel!

<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','resizeable=yes'); return false">
      <input class="button" value="welche Suchmaschinen?" type="button"></a>

Bildlink
Zuguterletzt noch die Variante mit einem Bild. Besonders reizvoll ist, wenn beim Draufzeigen ein Hover-Effekt ausgeführt wird. Sie können das Mouseover aber auch weglassen.

<a href="https://stationsweb.awekas.at/index.php?&id=25043" target="popup" onclick="window.open(this.href,'_blank','width=1400,height=790','resizeable=yes'); 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>

Sie können hier oder auf der HTML-Seite alle drei Varianten ausprobieren.

der Textlink

welche Suchmaschinen?

die Schaltfläche



der Bildlink

Stationsweb

top
Ihre Kommentare, Fragen und Kritik zu diesem Beitrag >> hier deponieren.
​luck-cbs | computer - beratung - support | 7203 trimmis | graubünden
  • Home
    • Impressum
  • Dienstleistungen
    • Downloads
    • FAQs
    • IT-News >
      • Breakdown
      • Excel
      • linux >
        • actual-linux
      • Windows11
    • Links
    • Schnäppchen
    • specials >
      • Codeseite
  • PC-Tipps
    • vorschau
    • Tipp 1023
    • Tipp 0923
    • Tipp 0823
    • Tipp 0723
    • Tipp 0623
    • Tipp 0523
    • Tipp 0423
    • Tipp 0323
    • Tipp 0223
    • Tipp 0123
    • Jahr 2022 >
      • Tipp 1222
      • Tipp 1122
      • Tipp 1022
      • Tipp 0922
      • Tipp 0822
      • Tipp 0722
      • Tipp 0622
      • Tipp 0522
      • Tipp 0422
      • Tipp 0322
      • Tipp 0222
      • Tipp 0122
    • Jahr 2021 >
      • Tipp 1221
      • Tipp 1121
      • Tipp 1021
      • Tipp 0921
      • Tipp 0821
      • Tipp 0721
      • Tipp 0621
      • Tipp 0521
      • Tipp 0421
      • Tipp 0321
      • Tipp 0221
      • Tipp 0121
  • Tipps-Archiv
  • wer ist
    • Jubiläum
    • Gitarren
    • Wetter >
      • onlinetools
      • Meteocam
      • meteodiagramme
      • wettercomments
      • Wetterparameter
      • meteoarchiv
      • Sonnenuhr
    • electric
    • Kunst
  • Kontakt