html - img 和 iframe

Question

这是我的代码片段

<img src="images/home.jpg" height="40" width="150" />
<img src="images/contact.jpg" height="40" width="150" />

和

<iframe src="aboutseels.php" scrolling="auto" width="100%" height="360" ></iframe>

现在，我想知道是否有一种方法，当客户端单击其中一个图像时，iframe 的 src 会改变？

例如，如果我点击第二张图片，iframe 的 src 将是 src="contactus.php"

Answer 1

我认为您在 上设置了一个name属性，iframe并将图像包装在一个a标签中，该target属性具有相同的名称。

<iframe name="foo" ...></iframe>
<a href="newlink" target="foo">...</a>

Answer 2

您可以使用 javascript 库jQuery，然后使用click事件来捕获对图像的点击，它可能看起来像这样

$(function(){
 $('img').click(function(){
   iframeSrc = this.attr('title');
   $('iframe').attr('src',iframeSrc);
});
});

然后html可能看起来像这样

  <img src="images/home.jpg" height="40" width="150" title="http://google.com" />
    <img src="images/contact.jpg" height="40" width="150" title="http://facebook.com"/>
    <iframe src="aboutseels.php" id="iframe" scrolling="auto" width="100%" height="360" ></iframe>

或使用常规 html 并使用 target

<a target="iframe" href="http://facebook.com"><img src="images/home.jpg" height="40" width="150" title="http://google.com" /></a>
<a target="iframe" href="http://google.com"><img src="images/contact.jpg" height="40" width="150" title="http://facebook.com"/></a>
<iframe src="aboutseels.php" id="iframe" scrolling="auto" width="100%" height="360" ></iframe>