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>

しかし、2 番目のアイテムが別のフレームにある場合 (つまり、1 番目のアイテムが 1 つのフレームにあり、2 番目のアイテムが別のフレームにある場合)、どうすればよいですか? 別のフレームにある 'name="IFRAME"' 値を検出しないためです。

で実験してみました

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

しかし、うまくいきませんでした。

4

3 に答える 3

0

「親」を使用して IFRAME を参照できない場合。次に、「親」フレームに JavaScript 関数を配置して、IFRAME に対して必要な処理を実行し、内部 iframe から呼び出します。parent.changeImage('myid');

したがって、この関数は親にある可能性があります:

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

ID を IFRAME に追加し、「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
  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>

および 2 つのフレームの場合:

<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 に答える