HTML- iframe 图片问题

Question

所以这是我的问题:我的页面左下角有四张照片，我想做的是将鼠标悬停在其中一张图片上，然后在我的 iframe 中显示该图片的更大图片.我必须在没有 Javascript 的情况下执行此操作，因为它适用于我的一个类(class)，但我只是不知道如何在 html 中执行此操作。这是我的代码:

<iframe name="lrgpic" src="Pacific files/images/photo2.jpg" width="500px" height="200px"></iframe>
<a href="Pacific files/images/photo2.jpg" target="lrgpic" onmouseover="this.click()">
    <img src="Pacific files/image/photo2thumb.jpg" alt ="Pacific" height="100px"/>
</a>   
<table>
    <tr id="top">
        <td>
            <img src="Pacific files/images/photo2thumb.jpg" alt ="Pacific" height="100px"/>
        </td> 
        <td>
            <img src="Pacific files/images/photo3thumb.jpg" alt="Pacific" height="100px" />
        </td>
   </tr>
   <tr id="bottom">
        <td>
            <img src="Pacific files/images/photo4thumb.jpg" alt="Pacific" height="100px" />
        </td>
        <td>
            <img src="Pacific files/images/photo6thumb.jpg" alt="Pacific" height="100px" />
        </td>
    </tr>
</table>    

这是我的 CSS:

table {
    position: absolute;
    top: 430px;
    left: 400px;
    z-index: 1;
}

Answer 1

将表格中的所有图片作为链接。为它们定义一个单独的类。然后让每个人都出现在 iframe 中，就像您对链接图像所做的那样。您可以将光标属性设置为默认值，将它们伪装成纯图像。

table {
    position: absolute;
    top: 430px;
    left: 400px;
    z-index: 1;
}

.hello{
    cursor:default;
}

<iframe name="lrgpic" src="http://goo.gl/iVNwxy" width="500px" height="200px"></iframe>

<a href="http://goo.gl/bKfNtp" target="lrgpic"  onmouseover="this.click()">
    <img src="http://goo.gl/bKfNtp" alt ="Pacific" height="100px"/>
</a>  

<table>
    <tr id="top">
        <td>
            <a href="http://goo.gl/fo9jcw" class="hello" target="lrgpic" onmouseover="this.click()">
                <img src="http://goo.gl/fo9jcw" alt ="Pacific" height="100px"/>
                </a>
        </td> 
        <td>
            <a href="http://goo.gl/wlVZBm" class="hello" target="lrgpic" onmouseover="this.click()">
                <img src="http://goo.gl/wlVZBm" alt ="Pacific" height="100px"/>
                </a>
        </td>
   </tr>
   <tr id="bottom">
        <td>
            <a href="http://goo.gl/FnYGrM" class="hello" target="lrgpic" onmouseover="this.click()">
                <img src="http://goo.gl/FnYGrM" alt ="Pacific" height="100px"/>
                </a>
        </td>
        <td>
            <a href="http://goo.gl/8UaNCE" class="hello" target="lrgpic" onmouseover="this.click()">
                <img src="http://goo.gl/8UaNCE" alt ="Pacific" height="100px"/>
                </a>
        </td>
    </tr>
</table>