单击图像Javascript时显示图像答案

【问题标题】：Showing Image when click on image Javascript单击图像Javascript时显示图像
【发布时间】：2017-06-11 12:27:13
【问题描述】：

当我单击此人的图像时，我试图让语音气泡出现。我该怎么做？

<div>
<p style="float: left;"><img src="person.png" border="1px"></p>
</div>

<script>

function bubblespeech()
    {
        document.getElementById("img").src = "../speech.png";
    }
</script>

<img src = "" id = "img"/> 
<onclick="bubble()"/>

【问题讨论】：

标签： javascript html image button click

【解决方案1】：

您的代码似乎有点奇怪：你的语音 img 是空的，当有人点击图片时你设置了来源：我认为更好的方法是使用带有 src 等的图像，但是当用户单击显示气泡的人物图像时，它不会显示。

“onklick”也应该在人的 img-tag 中

<img src="person.png" border="1px" onclick="bubble()">

小例子here:

【讨论】：

那个例子正是我想要的，但它对我的不起作用。我复制了编码并更改了文件名，但是当我运行它时，两个图像都会在我单击此人之前出现
<script> function displayBubble() { document.getElementById("bubble").style.display = "block"; } </script> <img id="wiener" src="person.jpeg" onclick="displayBubble()"> <div id="bubble"> <img style="width: 150px" src="bubble.png"> </div>
您是否添加了我的示例中的 css 样式，并为您的代码添加了正确的 id？重要的是 id 为“bubble”的 div 的“不显示”
能否请您对“不显示”部分进行编码？我不确定如何将其插入<div id="bubble">
我明白了！但是，我使用的是没有 CSS 的 Jupyter 笔记本。有没有办法让气泡显示在人旁边？沿线 float="middle"