• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bordcomputer Menü

M

Masau

Neues Mitglied
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:

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

Anhänge

  • fcb.png
    fcb.png
    38,5 KB · Aufrufe: 3
  • hallo.jpg
    hallo.jpg
    6,1 KB · Aufrufe: 3
  • Pfeil_links.png
    Pfeil_links.png
    8,3 KB · Aufrufe: 3
  • Pfeil_rechts.png
    Pfeil_rechts.png
    9 KB · Aufrufe: 3
  • S04.png
    S04.png
    32 KB · Aufrufe: 3
  • test.jpg
    test.jpg
    10,6 KB · Aufrufe: 5
  • vfb.jpg
    vfb.jpg
    30,9 KB · Aufrufe: 3
habe meine fragen ganz vergessen :D
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
 
Dir fehlen bei den Inline-Styles und beim Funktionsaufruf die abschliessenden Semikolons.

2) Da gibt es je nach Möglichkeiten und Kenntnissen deinerseits, einige Wege.

Wenn die Listen noch überschaubar klein sind , könntest du den array assoziativ anlegen und link und liste als key für die Werte verwenden.

Falls die Listen allerdings größer werden und PHP verfügbar ist, würde ich im Array nur die Pfade zu den externen HTML-Seiten, die die Links enthalten speichern und diese dann so einbinden :-)
 
also ich verstehe im moment nur bahnhof xD
ich glaube du meinst das ich ein 2 dimensionales array anlege die erste reihe mit bilder und darunter die liste ?!
aber wie mach ich das kannst du mir dafür ein beispiel geben?
 
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>
 
Gut,

ich fasse jetzt mal zusammen , was du noch alles benötigst:

- Keylogger-Event um auf Enter zu regieren
- Funktion, die jeweils eine andren Link anzeigt

Zu zweiterem:

Ich würde dort so vorgehen:

- Formular mit einem Hidden-Input Feld dessen Value sich beim pfeilklick mitändert
- automatischer Submit bei Enterklick
-- Validierung und Prüfung auf Korrektheit der Übermittlung per PHP
- einbinden der betreffenden Liste ins Div

mfg

Edit meint:

Ich hab wohl den Wald vor lauter Bäumen nicht gesehen, dass ganze lässt sich auch viel einfacher realisieren:

- schreibe einfach alle Listen bereits ins HTML und setzt sie standardgemäß auf unsichtbar
- beim Enterklick/Pfeilklick dann einfach das entsprechende Element(5tes ul etc.)
suchen und sichtbar setzen :)
 
Zuletzt bearbeitet:
also danke meinem crossposting: http://forum.jswelt.de/javascript/60564-bordcomputer-men.html

bin ich nun soweit gekommen das alles funktioniert bis auf den rücksprung,
weil nach dem rücksprung kann ich mit den pfeiltasten nicht mehr das bild ändern

pfeiltaten links rechts bild wechseln, enter auswählen, backspace rücksprung

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ührenfunction 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%" />

<b>Hallo Welt</b>

<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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben