Ändern img Quelle, wenn Taste gedrückt und wieder freigegeben, wenn

Was ich erreichen will: Wenn der Benutzer die LEER drückt die Bildquelle sollte spacebar.png-spacebar_pressed.png ändern. Wenn der Benutzer den Schlüssel loslässt, sollte das Bild wieder auf den Standard zurückgesetzt werden.Ändern img Quelle, wenn Taste gedrückt und wieder freigegeben, wenn

Ich habe mich überall umgesehen und verschiedene Möglichkeiten ausprobiert, aber keine funktionierte. Bedenken Sie, dass ich mit Javascript nicht sehr gut bin.

HTML:

<!DOCTYPE html> 
<html lang="sv"> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="css/stylesheet.css"> 
    <script src="js/jquery-3.2.1.min.js"></script> 
    <script src="js/spacebar.js"></script> 
</head> 
<body> 
    <h1>Spacebar Simulator 2017</h1> 
    <img src="assets/spacebar.png" id="spacebar"> 
</body> 
</html>

Dies ist meine letzte Code, den ich versucht habe:

$("#spacebar").on("keydown", function(e){ 
    var code = e.keyCode; 
    if(code == 32){ 
    document.getElementById("spacebar").src="../assets/spacebar_pressed.png"; 
    } 
});

Quelle

2017-09-10 David

Sie scheinen die 'javascript' aus Ihrer Frage zu fehlen ... Was Sie bisher versucht haben? Dies ist kein kostenloser Schreibservice. Um Ihnen eine Lösung in Javascript zu geben, müssen Sie Javascript haben, damit die Leute damit arbeiten können. – NewToJS

Sie können keypress und attr Funktion kombinieren solche Aufgabe zu erfüllen.

Im Callback haben Sie Ihr Ereignisobjekt, sein Attribut which ist der keyCode, es repräsentiert den Schlüssel, der gedrückt wurde. Der Schlüsselcode ist 32 für die Leertaste.

Wenn ein Schlüssel im DOM freigegeben wird, ändert sich die URL erneut explizit.

$(function() { 
 
    var myRealUrl = "http://hammerjs.github.io/assets/img/stackoverflow-icon.svg"; 
 
    $("body").on("keydown", function(e) { 
 
    if (e.which == 32) { 
 
     $("#spacebar").attr("src", "https://i.stack.imgur.com/CE5lz.png"); 
 
     console.log('pressed'); 
 
    } 
 
    }); 
 

 
    $("body").keyup(function(e) { 
 
    if (e.which == 32) { 
 
     $("#spacebar").attr("src", myRealUrl); 
 
     console.log('released'); 
 
    } 
 
    }); 
 
});

/*Demo Use*/ 
 
img { 
 
    max-height: 100px; 
 
    max-width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img src="http://hammerjs.github.io/assets/img/stackoverflow-icon.svg" id="spacebar" />

Quelle

2017-09-10 22:21:43 turmuka

Und der Teil, der das Bild an seine Standard/Originalquelle zurückgibt ....? – NewToJS

gerade aktualisiert, verpasste diesen Teil @NewToJS – turmuka

Ich schätze es, dass Sie versuchen, mir zu helfen. Ich kann das immer noch nicht zur Arbeit bringen. Gibt es irgendetwas, was ich falsch gemacht habe, als ich den Code kopiert habe? 'var myRealUrl =" ../assets/spacebar.png "; $ ("body"). On ("keydown", Funktion (e) { if (e.which == 32) { $ ("# spacebar") .attr ("src", "../assets /spacebar_pressed.png ") } }); $ ("body") keyup (function (e) { $ ("# Leer") attr ("src", myRealUrl) .});. ' – David

Ändern img Quelle, wenn Taste gedrückt und wieder freigegeben, wenn

Antwort

Verwandte Themen