Question

所以这是我的问题：我的页面左下方有四张照片，我要做的是将鼠标悬停在其中一张图片上，并在我的iframe中显示该图片的大图。我必须在没有Javascript的情况下这样做，因为它是我的一个类，但我无法弄清楚如何在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中。您可以将默认的cursor属性设置为纯图像。

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>

HTML-iframe照片问题

1 个答案: