如何解决如何在 Jupyter Notebook 中以交互方式在图像之间切换
如果我在 Jupyter Notebook Markdown 单元格中写入以下内容,我将看到保存在“Images
”文件夹中的图像
<img src="Images/T1.png">
但是,我想通过在 Markdown 单元格中放置一些代码行以交互方式在保存在我的 T1.png
文件夹中的 3 个图像 T2.png
、T3.png
和 Images
之间切换。任何人都可以使用 Jupyter Notebook 降价单元帮助我做到这一点吗?我正在尝试这个(我在 stackoverflow 上找到的)
<input type="radio" name="T1" class="radio1" checked/>
<input type="radio" name="T2" class="radio2" />
<input type="radio" name="T3" class="radio3" />
<div class="image1">
<img src="Images/T1.png">
</div>
<div class="image2">
<img src="Images/T2.png">
</div>
<div class="image3">
<img src="Images/T3.png">
</div>
但是我把所有的图像都像这样一个接一个地堆叠起来(我希望在屏幕上一次一个):
提前致谢!
解决方法
您需要一些 javascript/css,Markdown
单元格不支持。而只是在 python 中显示一个 HTML 文档。给你:
from IPython.core.display import display,HTML
html = """
Select an Image:
<input type="radio" name="images" onclick="show1();" checked>Image 1</input>
<input type="radio" name="images" onclick="show2();">Image 2</input>
<input type="radio" name="images" onclick="show3();">Image 3</input>
<div id="image1">
<img src="Images/T1.png">
</div>
<div id="image2">
<img src="Images/T2.png">
</div>
<div id="image3">
<img src="Images/T3.png">
</div>
<script>
function show1(){
document.getElementById('image1').style.display ='block';
document.getElementById('image2').style.display ='none';
document.getElementById('image3').style.display ='none';
}
function show2(){
document.getElementById('image2').style.display ='block';
document.getElementById('image1').style.display ='none';
document.getElementById('image3').style.display ='none';
}
function show3(){
document.getElementById('image3').style.display ='block';
document.getElementById('image1').style.display ='none';
document.getElementById('image2').style.display ='none';
}
show1()
</script>
"""
display(HTML(html))
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。