Javascript 将图像放置在另一个图像之上

Question

我有以下源代码，我想要做的是如果输入特定代码则显示图像。诀窍是我需要将图像放在另一个图像之上。有办法做到这一点吗？

var roomCode = prompt("Please enter the room code", "Enter room code here");
        if(roomCode==='102')
        {
            /*I want the image to appear at certain coordinates (on top of another image).*/
        }

Answer 1

只需将先前图像的 src 属性替换为新图像的路径即可。

示例:

HTML

<img id="replacable-img" src="http://www.wallpaperfunda.com/wp-content/uploads/2014/03/images-2.jpg" width="400px" alt="Original image">
<button id="change">Next Image</button> // Just example trigger

Javascript

var img = document.getElementById('replacable-img');
var button = document.getElementById('change');

change.onclick = function(e) {
  img.setAttribute('src', 'http://www.wired.com/images_blogs/wiredscience/2012/10/kitten-kisses-dog.jpg')
}

只需在每个 if block 中使用 element.setAttribute('src', 'PATH') :)

这是一个示例:http://jsbin.com/cefutaqo/1/