Bordcomputer Menü

Mazsau · 22. Jan. 2015

hey ho leute,

folgendes problem ich wollte einen kleinen bordcomputer wie man es vom auto kennt programmieren.
ich benötige diesen für einen kleinen test.
aber ich bin leider nicht weit gekommen aufgrund meiner eher bescheidenen kenntnissen -.-

was ich wollte ist das in dem mittleren div das menü angezeigt wird, das ich mit der rechten pfeiltaste durchblättern kann und wenn ich dann auf enter drücke in dem selben fenster eine mit dem bild verlinkte liste erscheint.

ich dachte mir es würde funktionieren wie eine art diashow, deshalb habe ich in diese richtung schon etwas geschrieben aber ich bin leider kein informatiker:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Bildershow</title>
    <script type="text/javascript">
        // Bilder hier angeben (ein Bild pro Zeile, das erste Bild auch im Img-Tag als src angeben!)
        var images = new Array(
                'vfb.jpg',
                'fcb.png',
                's04.png'
        );

        // Aktueller Bildindex (beim Start 0)
        var current_index = 0;

        // Bilderwechsel durchführen
        function switch_image(direction) {
            var count = images.length;
            current_index += (direction ? 1 : -1);
            if (current_index == count) {
                current_index = 0;
            } else if (current_index < 0) {
                current_index = count - 1;
            }
            document.getElementById('image_switch').src = images[current_index];
        }
    </script>
</head>
<body>

<div id="video" style="background-color: black; width: 100%; height: 400px">

</div>

<div id="tachoarmatur" style="background-color: red; width: 100%; height: 400px">

    <div id="tacholinks" style="background-color: darkgoldenrod; width: 20%; height: 400px; float: left">

    </div>

    <div id="tachometer1" style="background-color: aqua; width: 20%; height: 400px; float: left">

        <img src="test.jpg" style="width: 100%; height: 100%";s>

    </div>

    <div id="tachomenue" style="text-align:center; background-color: aquamarine; width: 20%; height: 400px; float: left">

        <!-- Das erste Bild hier als src mit angeben! -->
        <img src="hallo.jpg" id="image_switch" alt="" style="height: 75%; width:100%" />

        <br />

        <!-- Pfeil nach links -->
        <img src="Pfeil_links.png" style="cursor:pointer" onclick="switch_image(0)" alt="" width="60" height="60" />

        <!-- Pfeil nach rechts -->
        <img src="Pfeil_rechts.png" style="cursor:pointer" onclick="switch_image(1)" alt="" width="60" height="60" />

    </div>

    <div id="tachometer2" style="background-color: blue; width: 20%; height: 400px; float: left">

        <img src="test.jpg" style="width: 100%; height: 100%";>

    </div>

    <div id="tachorechts" style="background-color: deeppink; width: 20%; height: 400px; float: left">

    </div>

</div>

<div style="text-align:center">



</div>

</body>

- - - Aktualisiert - - -

habe meine fragen ganz vergessen

1. wie programmiere ich es so das es auf die pfeiltasten hört?
2. wie programmiere ich es so das die bilder mit einer liste verlinkt sind und dann auch bei auswahl in das aktuelle div geladen werden? Dachte da an dropdown menü da geht es ja ähnlich

rico2009 · 23. Jan. 2015

Hi,

zu deinen Fragen:
1. Du musst die Events abfangen für die Pfeiltasten Javascript KeyCodes ? Tastatureingaben | mediaevent.de und anschließend deine Funktion "switch_image" aufrufen.
2. Hier müsttest du ebenfalls mit Eventhandlern arbeiten, z.B. onclick (SELFHTML: JavaScript / Sprachelemente / Event-Handler). Sodass bei Auswahl des Bilder irgendwas weiteres geladen wird.

Mazsau · 23. Jan. 2015

also das mit den tasten habe ich verstanden aber wie bekommen ich das mit dem bilder und der liste hin?

Sempervivum · 23. Jan. 2015

in dem selben fenster eine mit dem bild verlinkte liste erscheint.

Das lässt sich sicher relativ einfach machen. Was meinst Du mit "Liste"? Eine Liste von Texten? Was meinst Du mit dem selben Fenster? Das Fenster wo vorher das Bild war? Oder soll das ganze Browserfenster geändert werden, also auf eine neue Seite weiter geleitet?
Übrigens: Crossposting https://www.html.de/threads/bordcomputer-menue.53755/
PS: Wenn ich mir dein HTML ansehe, scheint mir, dass Du mit den Pfeiltasten mit den Bildern blättern willst und nicht mit den Pfeiltasten auf der Tastatur? Dann hast Du die Lösung doch schon fertig. Bei mir funktioniert das Blättern jedenfalls.

Mazsau · 23. Jan. 2015

also ich meine mit den pfeiltasten auf der tastatur blättern. aber um erstmal etwas näher an die lösung zu kommen habe ich erstmal so angefangen,
weil wie bereits erwähnt habe ich null erfahrung bis auf ein zwei tutorials.

also mit liste meine ich eine <ul> liste.
ich meine mit fenster das fenster wo vorher das bild drin war

ok und was ist mit crossposting gemeint? ist es nicht erlaubt auf mehreren foren nach einer lösung zu suchen?
ist eher ein zeichen von verzweiflung

- - - Aktualisiert - - -

ok das mit den pfeiltasten klappt jetzt:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

    <title>Bildershow</title>

    <script type="text/javascript">

        // Bilder hier angeben (ein Bild pro Zeile, das erste Bild auch im Img-Tag als src angeben!)

        var images = new Array(

                'vfb.jpg',

                'fcb.png',

                's04.png'

        );




        // Aktueller Bildindex (beim Start 0)

        var current_index = 0;




        // Bilderwechsel durchführen

        function switch_image(direction) {

            var count = images.length;

            current_index += (direction ? 1 : -1);

            if (current_index == count) {

                current_index = 0;

            } else if (current_index < 0) {

                current_index = count - 1;

            }

            document.getElementById('image_switch').src = images[current_index];

        }




        document.onkeydown = function(event) {

            if (event.keyCode == 37) {

                switch_image(0);

                event.cancelBubble = true;

                event.returnValue = false;

            }

            if (event.keyCode == 39) {

                switch_image(1);

                event.cancelBubble = true;

                event.returnValue = false;

            }

            return event.returnValue;

        }




    </script>

</head>

<body>




<div id="video" style="background-color: black; width: 100%; height: 400px">




</div>




<div id="tachoarmatur" style="background-color: red; width: 100%; height: 400px">




    <div id="tacholinks" style="background-color: darkgoldenrod; width: 20%; height: 400px; float: left">




    </div>




    <div id="tachometer1" style="background-color: aqua; width: 20%; height: 400px; float: left">




        <img src="test.jpg" style="width: 100%; height: 100%";s>




    </div>




    <div id="tachomenue" style="text-align:center; background-color: aquamarine; width: 20%; height: 400px; float: left">




        <!-- Das erste Bild hier als src mit angeben! -->

        <img src="hallo.jpg" id="image_switch" alt="" style="height: 75%; width:100%" />




        <br />




        <!-- Pfeil nach links -->

        <img src="Pfeil_links.png" style="cursor:pointer" onclick="switch_image(0)" alt="" width="60" height="60" />




        <!-- Pfeil nach rechts -->

        <img src="Pfeil_rechts.png" style="cursor:pointer" onclick="switch_image(1)" alt="" width="60" height="60" />




    </div>




    <div id="tachometer2" style="background-color: blue; width: 20%; height: 400px; float: left">




        <img src="test.jpg" style="width: 100%; height: 100%";>




    </div>




    <div id="tachorechts" style="background-color: deeppink; width: 20%; height: 400px; float: left">




    </div>




</div>




<div style="text-align:center">










</div>




</body>

Sempervivum · 23. Jan. 2015

Ich würde die Listen in versteckten Containern ablegen und das innerHTML in den Zielkontainer eintragen. Etwa so:

HTML:

<div id="li0" style="display: none">
  <ul>
    <li>Listenelement 1</li>
    <li>Listenelement 2</li>
    <li>Listenelement 3</li>
 </ul>
</div>
<div id="li1" style="display: none">
  <ul>
    <li>Listenelement 1</li>
    <li>Listenelement 2</li>
    <li>Listenelement 3</li>
  </ul>
</div>

Code:

document.getElementById("tachomenue").innerHTML = document.getElementById("li" + current_index).innerHTML;

Crosspostings sind i. allg. nicht so gern gesehen. Über die Gründe lies z. B. hier:
http://www.jumper.ch/netikette_crossposting.htm

Mazsau · 23. Jan. 2015

ok, danke nochmals semper für den hinweis und die hilfestellung
zu guter letzt nur noch eins gibt es eine möglichkeit das ich, jetzt irgendwie sogar zurück zum bild schalten kann? also wieder zurückspringen
das wars dann wirklich

der aktuelle stand, pfeiltasten+enter funktioniert und liste wird angezeigt:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Bildershow</title>
    <script type="text/javascript">
        // Bilder hier angeben (ein Bild pro Zeile, das erste Bild auch im Img-Tag als src angeben!)
        var images = new Array(
                'vfb.jpg',
                'fcb.png',
                's04.png'

        );

        // Aktueller Bildindex (beim Start 0)
        var current_index = 0;

        // Bilderwechsel durchführen
        function switch_image(direction) {
            var count = images.length;
            current_index += (direction ? 1 : -1);
            if (current_index == count) {
                current_index = 0;
            } else if (current_index < 0) {
                current_index = count - 1;
            }
            document.getElementById('image_switch').src = images[current_index];

        }

        document.onkeydown = function(event) {
            if (event.keyCode == 37) {
                switch_image(0);
                event.cancelBubble = true;
                event.returnValue = false;

            }
            if (event.keyCode == 39) {
                switch_image(1);
                event.cancelBubble = true;
                event.returnValue = false;

            }
            if (event.keyCode == 13) {
                document.getElementById("tachomenue").innerHTML = document.getElementById("li" + current_index).innerHTML;
                event.cancelBubble = true;
                event.returnValue = false;

            }
            return event.returnValue;
        }

    </script>
</head>
<body>

<div id="video" style="background-color: black; width: 100%; height: 400px">

</div>

<div id="tachoarmatur" style="background-color: red; width: 100%; height: 400px">

    <div id="tacholinks" style="background-color: darkgoldenrod; width: 20%; height: 400px; float: left">

    </div>

    <div id="tachometer1" style="background-color: aqua; width: 20%; height: 400px; float: left">

        <img src="test.jpg" style="width: 100%; height: 100%";s>

    </div>

    <div id="tachomenue" style="text-align:center; background-color: aquamarine; width: 20%; height: 400px; float: left">

        <!-- Das erste Bild hier als src mit angeben! -->
        <img src="hallo.jpg" id="image_switch" alt="" style="height: 75%; width:100%" />

        <div id="li0" style="display: none">
            <ul>
                <li>Listenelement 1</li>
                <li>Listenelement 2</li>
                <li>Listenelement 3</li>
            </ul>
        </div>
        <div id="li1" style="display: none">
            <ul>
                <li>Listenelement 4</li>
                <li>Listenelement 5</li>
                <li>Listenelement 6</li>
            </ul>
        </div>
        <div id="li2" style="display: none">
            <ul>
                <li>Listenelement 7</li>
                <li>Listenelement 8</li>
                <li>Listenelement 9</li>
            </ul>
        </div>


        <br />

        <!-- Pfeil nach links -->
        <img src="Pfeil_links.png" style="cursor:pointer" onclick="switch_image(0)" alt="" width="60" height="60" />

        <!-- Pfeil nach rechts -->
        <img src="Pfeil_rechts.png" style="cursor:pointer" onclick="switch_image(1)" alt="" width="60" height="60" />

    </div>

    <div id="tachometer2" style="background-color: blue; width: 20%; height: 400px; float: left">

        <img src="test.jpg" style="width: 100%; height: 100%";>

    </div>

    <div id="tachorechts" style="background-color: deeppink; width: 20%; height: 400px; float: left">

    </div>

</div>

<div style="text-align:center">



</div>

</body>

Sempervivum · 23. Jan. 2015

das ich, jetzt irgendwie sogar zurück zum bild schalten kann?

Natürlich. Das einfachste wäre wahrscheinlich, wenn Du vor dem Eintragen der Liste das HTML des "tachomenue"-Divs in einem unsichtbaren Hilfs-Div (oder auch einfach in einer Variablen) sicherst. Dann kannst Du z. B. die Escape-Taste benutzen und den Inhalt des Hilfs-Divs in das "tachomenue"-Div zurück übertragen.

Mazsau · 24. Jan. 2015

sorry aber irgendwie klappt es nicht wo ist der fehler?
backspace ist die rücksprungtaste

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Bildershow</title>
    <script type="text/javascript">
        // Bilder hier angeben (ein Bild pro Zeile, das erste Bild auch im Img-Tag als src angeben!)
        var images = new Array(
                'vfb.jpg',
                'fcb.png',
                's04.png'

        );

        // Aktueller Bildindex (beim Start 0)
        var current_index = 0;

        // Bilderwechsel durchführen
        function switch_image(direction) {
            var count = images.length;
            current_index += (direction ? 1 : -1);
            if (current_index == count) {
                current_index = 0;
            } else if (current_index < 0) {
                current_index = count - 1;
            }
            document.getElementById('image_switch').src = images[current_index];

        }

        document.onkeydown = function(event) {
            if (event.keyCode == 8) {
                document.getElementById("tachomenue").innerHTML = document.getElementById("asd").innerHTML;
                event.cancelBubble = true;
                event.returnValue = false;

            }
            if (event.keyCode == 39) {
                switch_image(1);
                event.cancelBubble = true;
                event.returnValue = false;

            }
            if (event.keyCode == 13) {
                document.getElementById("asd").innerHTML = document.getElementById(current_index).innerHTML;
                document.getElementById("tachomenue").innerHTML = document.getElementById("li" + current_index).innerHTML;
                event.cancelBubble = true;
                event.returnValue = false;

            }
            if (event.keyCode == 37) {
                switch_image(0);
                event.cancelBubble = true;
                event.returnValue = false;

            }
            return event.returnValue;
        }

    </script>
</head>
<body>

<div id="video" style="background-color: black; width: 100%; height: 400px">

    <video width="100%" height="400" controls autoplay>
        <source src="movie.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

</div>

<div id="tachoarmatur" style="background-color: red; width: 100%; height: 400px">

    <div id="tacholinks" style="background-color: darkgoldenrod; width: 20%; height: 400px; float: left">

    </div>

    <div id="tachometer1" style="background-color: aqua; width: 20%; height: 400px; float: left">

        <img src="test.jpg" style="width: 100%; height: 100%";s>

    </div>

    <div id="tachomenue" style="text-align:center; background-color: aquamarine; width: 20%; height: 400px; float: left">

        <!-- Das erste Bild hier als src mit angeben! -->
        <img src="hallo.jpg" id="image_switch" alt="" style="height: 75%; width:100%" />

        <div id="asd" style="display: none">

        </div>

        <div id="li0" style="display: none">
            <ul>
                <li>Listenelement 1</li>
                <li>Listenelement 2</li>
                <li>Listenelement 3</li>
            </ul>
        </div>
        <div id="li1" style="display: none">
            <ul>
                <li>Listenelement 4</li>
                <li>Listenelement 5</li>
                <li>Listenelement 6</li>
            </ul>
        </div>
        <div id="li2" style="display: none">
            <ul>
                <li>Listenelement 7</li>
                <li>Listenelement 8</li>
                <li>Listenelement 9</li>
            </ul>
        </div>


        <br />

        <!-- Pfeil nach links -->
        <img src="Pfeil_links.png" style="cursor:pointer" onclick="switch_image(0)" alt="" width="60" height="60" />

        <!-- Pfeil nach rechts -->
        <img src="Pfeil_rechts.png" style="cursor:pointer" onclick="switch_image(1)" alt="" width="60" height="60" />

    </div>

    <div id="tachometer2" style="background-color: blue; width: 20%; height: 400px; float: left">

        <img src="test.jpg" style="width: 100%; height: 100%";>

    </div>

    <div id="tachorechts" style="background-color: deeppink; width: 20%; height: 400px; float: left">

    </div>

</div>

<div style="text-align:center">



</div>

</body>

Sempervivum · 24. Jan. 2015

Der Fehler liegt hier:

Code:

            if (event.keyCode == 13) {
                document.getElementById("asd").innerHTML = document.getElementById(current_index).innerHTML

Du musst natürlich den Inhalt von "tachomenue" sichern:

Code:

            if (event.keyCode == 13) {
                document.getElementById("asd").innerHTML = document.getElementById("tachomenue").innerHTML

Außerdem muss das Div mit der ID "asd" außerhalb von "tachomenue" liegen, weil die Definition sonst beim Eintragen der Liste überschrieben wird.

Mazsau · 24. Jan. 2015

ok danke, jetzt funktioniert der rücksprung aber nach dem rücksprung kann ich nicht mehr die pfeiltasten verwenden

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Bildershow</title>
    <script type="text/javascript">
        // Bilder hier angeben (ein Bild pro Zeile, das erste Bild auch im Img-Tag als src angeben!)
        var images = new Array(
                'vfb.jpg',
                'fcb.png',
                's04.png'

        );

        // Aktueller Bildindex (beim Start 0)
        var current_index = 0;

        // Bilderwechsel durchführen
        function switch_image(direction) {
            var count = images.length;
            current_index += (direction ? 1 : -1);
            if (current_index == count) {
                current_index = 0;
            } else if (current_index < 0) {
                current_index = count - 1;
            }
            document.getElementById('image_switch').src = images[current_index];

        }

        document.onkeydown = function(event) {
            if (event.keyCode == 8) {
                document.getElementById("tachomenue").innerHTML = document.getElementById("asd").innerHTML;
                event.cancelBubble = true;
                event.returnValue = false;

            }
            if (event.keyCode == 39) {
                switch_image(1);
                event.cancelBubble = true;
                event.returnValue = false;

            }
            if (event.keyCode == 13) {
                document.getElementById("asd").innerHTML = document.getElementById("tachomenue").innerHTML
                document.getElementById("tachomenue").innerHTML = document.getElementById("li" + current_index).innerHTML;
                event.cancelBubble = true;
                event.returnValue = false;

            }
            if (event.keyCode == 37) {
                switch_image(0);
                event.cancelBubble = true;
                event.returnValue = false;

            }
            return event.returnValue;
        }

    </script>
</head>
<body>

<div id="video" style="background-color: black; width: 100%; height: 400px">

    <video width="100%" height="400" controls autoplay>
        <source src="movie.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

</div>

<div id="tachoarmatur" style="background-color: red; width: 100%; height: 400px">

    <div id="tacholinks" style="background-color: darkgoldenrod; width: 20%; height: 400px; float: left">

    </div>

    <div id="tachometer1" style="background-color: aqua; width: 20%; height: 400px; float: left">

        <img src="test.jpg" style="width: 100%; height: 100%";s>

    </div>

    <div id="asd" style="display: none">

    </div>

    <div id="tachomenue" style="text-align:center; background-color: aquamarine; width: 20%; height: 400px; float: left">

        <!-- Das erste Bild hier als src mit angeben! -->
        <img src="hallo.jpg" id="image_switch" alt="" style="height: 75%; width:100%" />



        <div id="li0" style="display: none">
            <ul>
                <li>Listenelement 1</li>
                <li>Listenelement 2</li>
                <li>Listenelement 3</li>
            </ul>
        </div>
        <div id="li1" style="display: none">
            <ul>
                <li>Listenelement 4</li>
                <li>Listenelement 5</li>
                <li>Listenelement 6</li>
            </ul>
        </div>
        <div id="li2" style="display: none">
            <ul>
                <li>Listenelement 7</li>
                <li>Listenelement 8</li>
                <li>Listenelement 9</li>
            </ul>
        </div>


        <br />

        <!-- Pfeil nach links -->
        <img src="Pfeil_links.png" style="cursor:pointer" onclick="switch_image(0)" alt="" width="60" height="60" />

        <!-- Pfeil nach rechts -->
        <img src="Pfeil_rechts.png" style="cursor:pointer" onclick="switch_image(1)" alt="" width="60" height="60" />

    </div>

    <div id="tachometer2" style="background-color: blue; width: 20%; height: 400px; float: left">

        <img src="test.jpg" style="width: 100%; height: 100%";>

    </div>

    <div id="tachorechts" style="background-color: deeppink; width: 20%; height: 400px; float: left">

    </div>

</div>

<div style="text-align:center">



</div>

</body>

Sempervivum · 24. Jan. 2015

Das war aber eine harte Nuss! Das Problem war folgendes: Nach dem Zurückspeichern existiert das ganze HTML einschl. ID und Eventhandlern zweimal, einmal in "asd" und einmal in "tachomenue". Die Lösung ist einfach: Das HTML von "asd" nach dem Zurückspeichern löschen.

Code:

        document.onkeydown = function (event) {
            if (event.keyCode == 8) {
                document.getElementById("tachomenue").innerHTML = document.getElementById("asd").innerHTML;
                document.getElementById("asd").innerHTML = "";
                event.cancelBubble = true;
                event.returnValue = false;
}

Mazsau · 24. Jan. 2015

vielen dank semper

ich habe noch eine frage wie bist du auf das problem gekommen hast du ein spezielles programm oder wie geht man bei so einem fehler normal vor?

Sempervivum · 24. Jan. 2015

Ja, da gibt es ein Programm: Die Erweiterung Firebug für Firefox. Damit kann man den Code genau untersuchen, Haltepunkte setzen, an denen das Skript stoppen soll, Variablen und HTML-Elemente und Attribute ansehen. Wenn Du dich intensiver mit Javascript befassen willst, solltest Du dich auf jeden Fall damit vertraut machen. Gibt es, AFAIK, auch für andere Browser.
Als ersten Schritt empfehle ich dir die Fehlerkonsole. Extras - Webentwickler - Web-Konsole im Firefox.

Mazsau · 24. Jan. 2015

vielen dank semper für alles

Bordcomputer Menü

Mazsau

New member

Anhänge

rico2009

Guest

Mazsau

New member

Sempervivum

Banned

Mazsau

New member

Sempervivum

Banned

Mazsau

New member

Sempervivum

Banned

Mazsau

New member

Sempervivum

Banned

Mazsau

New member

Sempervivum

Banned

Mazsau

New member

Sempervivum

Banned

Mazsau

New member