Fatal编程技术网
  • javascript/
  • Javascript 如何在另一个图像的上方更改位于不同帧中的图像内容？

Javascript 如何在另一个图像的上方更改位于不同帧中的图像内容？

javascript html

Javascript 如何在另一个图像的上方更改位于不同帧中的图像内容？,javascript,html,location,frame,onmouseover,Javascript,Html,Location,Frame,Onmouseover,我正在学习，无法通过搜索找到解决方案 这就是当我必须将鼠标悬停在一个项目（例如图像）上以更改为另一个项目（例如iframe）的内容时所使用的方法这起作用了 <html> <head></head> <body> <div> <img href="#" src="FirstImage.jpg" alt="Hover to reveal second Image" onmouseover="IFRAME.locatio

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

这就是当我必须将鼠标悬停在一个项目（例如图像）上以更改为另一个项目（例如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”

但没办法解决

  • 添加jQuery链接
  • 为图像和iframe添加id
  • 添加脚本块（如下所示）
    • 我制作了工作样本：

    
$（文档）.ready（函数（）{
$（'#image1'）.mouseover（函数（）{
$（'#frame1'）.attr（'src'，'SecondImage.jpg'）；
}).mouseout（函数（）{
$（'#frame1'）.attr（'src'，'text.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>

    
$（文档）.ready（函数（）{
$（'#frame1'）[0].contentDocument.write（''）；
$（'#frame1'）.contents（）.find（'img'）.mouseover（函数（）{
$（'#frame2'）.attr（'src'，'https://www.google.ru/images/srpr/logo3w.png');
}).mouseout（函数（）{
$（'#frame2'）.attr（'src'，'http://lostfilm.tv');
});
});
    您只需在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>
    如果无法使用“父级”引用IFRAME，则可以在“父级”框架中放置javascript函数，该函数将对IFRAME执行您想要的操作，并从内部IFRAME调用它： parent.changeImage（'myid'）

    因此，此函数可以位于父函数中：

    function changeImage(theID);(){
    document.getElementById(theID).src='SecondImage.jpg';
}
    问题是，这只适用于同一页面的id（正如我问题中的代码所示）。但是，如果第一个图像在框架集的一个框架中的位置和iframe在另一个框架中的位置如何？如何将它们相互关联？问题是，这适用于id（正如我问题中的代码所示）仅适用于同一页面。但是如果第一个图像位于框架集的一个框架中，而iframe位于另一个框架中，该怎么办？如何将它们相互关联？ 
    function changeImage(theID);(){
    document.getElementById(theID).src='SecondImage.jpg';
}