如何在默認圖片的頂部顯示/彈出圖片？ （JavaScript的）

Question

我試圖在按下某個鍵盤鍵的同時，將圖像顯示在默認圖像（“ images / giphy.gif”）的頂部。 例如，當按A鍵時，我希望圖像出現。

但是，在文本框上輸入鍵時，我能夠在默認圖像下顯示一個圖像（“ images / giphy1.gif”），這不是重點，因為我希望它位於/或覆蓋默認圖像

* PS Im仍然是初學者，沒有編碼經驗。 我也在Dreamweaver 8中這樣做

這是我的函數代碼：

<img src="images/giphy.gif" width="800" height="400" alt=""/>
<input type="text" onkeypress="myFunction()">

JS：

window.addEventListener("keypress", checkKeyPressed, false);

function myFunction() {
    var x = document.createElement("IMG");

    x.setAttribute("src", "images/giphy1.gif")
    x.setAttribute("width", "705");
    x.setAttribute("width", "591");
    x.setAttribute("alt", "The Pulpit Rock");

    document.body.appendChild(x);
}

編輯：

<img src="images/giphy.gif" id="default-img" width="800" height="400" alt=""/>
<input type="text" onkeypress="myFunction()">

<script>

window.addEventListener("keypress", checkKeyPressed, false);


function myFunction() {
var x = document.createElement("IMG");
x.setAttribute("src", "images/giphy1.gif")
x.setAttribute("width", "800");
x.setAttribute("height", "400");
x.setAttribute("alt", "The Pulpit Rock");
document.body.appendChild(x);
}
</script>

Answer 1

您可以使用以下命令將新的img插入您的身體頂部：

document.body.insertBefore(x,document.body.firstElementChild);

希望這可以幫助。

 function myFunction() { var x = document.createElement("IMG"); x.setAttribute("src", "https://www.stib-mivb.be/irj/go/km/docs/horaires/2/images/20150629/2.gif") x.setAttribute("width", "30"); x.setAttribute("width", "30"); x.setAttribute("alt", "The Pulpit Rock"); document.body.insertBefore(x,document.body.firstElementChild); } 

 <br> <img src="https://www.stib-mivb.be/irj/go/km/docs/horaires/1/images/20150629/1.gif" alt=""/> <br> <input type="text" onkeypress="myFunction()"> 

不使用輸入進行編輯：

 <br> <img src="https://www.stib-mivb.be/irj/go/km/docs/horaires/1/images/20150629/1.gif" alt=""/> <script> document.addEventListener("keydown", keyDownBody, false); function keyDownBody(e) { var keyCode = e.keyCode; if(keyCode==65) { myFunction(); } } function myFunction() { var x = document.createElement("IMG"); x.setAttribute("src", "https://www.stib-mivb.be/irj/go/km/docs/horaires/2/images/20150629/2.gif") x.setAttribute("width", "30"); x.setAttribute("width", "30"); x.setAttribute("alt", "The Pulpit Rock"); document.body.insertBefore(x,document.body.firstElementChild); } </script> 

Answer 2

僅添加一個事件監聽器

<input type="text" onkeypress="myFunction()">

和

不需要window.addEventListener("keypress", checkKeyPressed, false);

Answer 3

appendChild始終將內容添加到末尾。 VanillaJS中沒有prepend方法。 因此，您應該使用insertBefore方法。 例如，像這樣：

document.body.insertBefore(x, document.body.firstChild);

但是在現實生活中，您必須包裝默認圖像並將其插入到容器中。