outdoor I

[inka]

Nein! Du hast den Kurzen aus dem Veranschaulichungsbeispiel genommen!

Du musst den langen String aus der Textdatei nehmen, nur der ist vollständig.

jaja, hau nur drauf...

das sieht aber schon besser aus jetzt:

den zweck musst Du mir aber bei passender gelegenheit erklären...

[Moppi]

Ich habe aber gerade nochmal nachgesehen, statt Tabelle können wir wohl auch eine Image Map in HTML benutzen. Dafür sind diese Dinger da. Das würde die Sache erleichtern.

Also nehmen wir dann dieses Bild und erzeugen damit in HTML eine Map, also Karte, mit den Koordinaten, wo was angeklickt werden kann.

Wofür das oben gut ist? Du siehst, dass man diesen 9KByte langen String als Text kopieren kann und sich darin Dein Bild befindet.



MfG

- - - Aktualisiert - - -

Nächster Schritt



Ich habe schon mal eine Tabelle, als Rahmen, erstellt und das ganz einfach als HTM-Datei gespeichert.
Zuerst muss die Tabelle definiert werde, dann in der Tabelle drei Zeilen und jede Zeile enthält drei Zellen.
Die mittlere Zelle bekommt später als Inhalt die Image Map, also das Bild der Fernbedienung.
Die Tabelle dient als Rahmen um das Bild, damit die Fernbedienung dem Original nahe kommt.
Ich habe bei dem Bild zunächst alle Ränder abgeschnitten, damit wir Speicherplatz sparen.
Die Ränder sind mit der Tabelle wieder hinzugefügt. Belegen damit 928Byte, also knapp 1KByte, zusätzlich zum Bild.

Hier erstmal die Datei mit den Rohdaten: ir_fernbedienung_htm.txt
Die Datei ist als *.TXT gespeichert. Die Endung kann umbenannt werden von ".txt" in ".htm", um sie im Browser zu laden und anzuschauen.

Fragen so weit? Wir machen weiter, wenn nicht.



MfG

- - - Aktualisiert - - -

Zur Erläuterung des HTML-Codes


Die Tabelle ist so aufgebaut:

TABELLE
.......TABELLENZEILE
...................TABELLENZELLE|TABELLENZELLE|TABELLENZELLE
.......TABELLENZEILE
...................TABELLENZELLE|TABELLENZELLE|TABELLENZELLE
.......TABELLENZEILE
...................TABELLENZELLE|TABELLENZELLE|TABELLENZELLE

Die Tabelle hat also sechs Zellen, in drei Zeilen.


------------------------------------------------------------------


Die Tabelle ist definiert mit:

<div style='display:table;background:#000000;border-radius:2em'>

display:table ... DIV-Container als Tabelle
background ... #000000 = hexadezimale Notation für RGB (Rot/Grün/Blau) ergibt hier schwarz
border-radius ... damit die Ecken der Tabelle rund werden, die Zahl gibt den Durchmesser an


Maßeinheit: ich verwende immer "em", diese Maßeinheit ist skalierbar. 1em sind normalerweise 16 Pixel, aber nicht in jedem Browser, hängt mit der Basis-Schriftgröße zusammen; Pixel "px" wäre eine absolute Größe und ist unpraktisch, wir wollen später sehen, dass sich unsere HTML-Fernbedienung an die Größe Deines Smartphone-Bildschirms anpasst


------------------------------------------------------------------


Eine Tabellenzeile ist definiert mit:

<div style='display:table-row'>

display:table-row ... DIV-Container als Tabellenzeile


------------------------------------------------------------------


Eine Tabellenzelle ist definiert mit:

<div style='display:table-cell;width:3em;height:3em'>

display:table-cell ... DIV-Container als Tabellenzelle
width ... Breite einer Zelle
height ... Höhe einer Zelle