如何在 Jupyter Notebook 中以交互方式在图像之间切换

Question

如果我在我的 Jupyter Notebook Markdown 单元格中写入以下内容，我会看到保存在我的“Images”文件夹中的图像

<img src="Images/T1.png">

但是，我想通过在 markdown 中放置一些代码行，以交互方式在我的 Images 文件夹中保存的 T1.png、T2.png 和 T3.png 3 张图像之间切换细胞。任何人都可以使用 Jupyter Notebook 降价单元帮助我做到这一点吗？我正在尝试这个（我在 Whosebug 上找到的）

<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>

但是我将所有图像像这样一个接一个地堆叠起来（我希望一次一张显示在屏幕上）：

提前致谢！

Answer 1

您需要一些 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))

如何在 Jupyter Notebook 中以交互方式在图像之间切换

How to switch between images in interactive way in Jupyter Notebook

html

image

jupyter-notebook

markdown

python-interactive