如何在 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))