0

我正在学习，无法通过搜索找到解决方案。

当我必须将鼠标悬停在一个项目（例如，图像）上以更改另一个项目（例如，iframe）的内容时，这是我使用的。这有效...

<html>
<head></head>
<body>
<div>
  <img href="#" src="FirstImage.jpg" alt="Hover to reveal second Image"
      onmouseover="IFRAME.location='SecondImage.jpg'"
      onmouseout="IFRAME.location='text.html'"/>

</div>
<div>
<iframe name="IFRAME" src="text.html"></iframe>
</div>
</body>
</html>

但是，如果第二个项目在不同的框架中（即第一个项目在一个框架中，第二个在另一个框架中），我需要做什么？因为它不会检测到不同帧中的 'name="IFRAME"' 值。

我试着用

onmouseover="parent.frames[1].IFRAME.location="SecondImage.jpg"

但无法解决。

4

3 回答 3

0
  1. 添加 jQuery 链接
  2. 为图像和 iframe 添加 id
  3. 添加脚本块（下）

我制作了工作样本：http: //jsbin.com/acocil/4/

<html>
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.8.2.min.js"></script>
</head>
<body>
<div>
  <img id="image1" href="#" src="FirstImage.jpg" alt="Hover to reveal second Image"/>
</div>
<div>
<iframe id="frame1" name="IFRAME" src="text.html"></iframe>
</div>
<script>
$(document).ready(function() {
  $('#image1').mouseover(function(){
    $('#frame1').attr('src','SecondImage.jpg');
  }).mouseout(function(){
    $('#frame1').attr('src','text.html');
  });
});
</script>
</body>
</html>

对于两帧：

<iframe id="frame1" alt="Hover to reveal second Image"></iframe>  
<iframe id="frame2" src="https://www.google.ru/images/srpr/logo3w.png"></iframe> 
<script>
$(document).ready(function() {
  $('#frame1')[0].contentDocument.write('<img id="image1" src="http://l.yimg.com/a/i/us/msg/site/9/sp/ic_biggrin.gif"/>');
  $('#frame1').contents().find('img').mouseover(function(){
    $('#frame2').attr('src','https://www.google.ru/images/srpr/logo3w.png');
  }).mouseout(function(){
    $('#frame2').attr('src','http://lostfilm.tv');
  });
});
</script>
于 2012-11-18T19:44:54.123 回答
0

您只需向 IFRAME 添加一个 ID，然后使用 'document.getElementById' 在 onmouseover 事件中引用该 ID。

<html>
<head></head>
<body>
<div>
  <img href="#" src="FirstImage.jpg" alt="Hover to reveal second Image"
      onmouseover="document.getElementById('myid').src='SecondImage.jpg'"
      onmouseout="document.getElementById('myid').src='text.html'"/>

</div>
<div>
<iframe id="myid" name="IFRAME" src="text.html"></iframe>
</div>
</body>
</html>
于 2012-11-18T20:16:44.473 回答
0

如果您无法使用“父级”引用 IFRAME。然后您可以在“父”框架中放置一个 javascript 函数，该函数将对 IFRAME 执行您想要的操作并从内部 iframe 调用它： parent.changeImage('myid');

所以这个函数可能在 parent 中：

function changeImage(theID);(){
    document.getElementById(theID).src='SecondImage.jpg';
}
于 2012-11-19T21:31:37.837 回答