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并使用目标

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

img和iframes

2 个答案: