다른 이미지의 다른 프레임에있는 이미지의 내용을 변경하는 방법은 무엇입니까?

저는 배우고 있으며 검색을 통해 해결책을 찾을 수 없습니다.다른 이미지의 다른 프레임에있는 이미지의 내용을 변경하는 방법은 무엇입니까?

다른 항목 (예 : 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 번째로, 하나 개의 프레임에)에있는 경우 내가 어떻게해야합니까? 그것은 다른 프레임에있는 'name = "IFRAME"값을 탐지하지 않기 때문입니다.

나는

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

실험을 시도했지만 그것을 밖으로 작동하지 않을 수 있습니다.

출처

2012-11-18 Alankrit Joshi

jQuery를 링크를 추가
추가 ID

내가 샘플 작업을했다 (아래) 스크립트 블록을 추가 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-18 19:44:54

것은이이 ID로 작동합니다. 그러나 프레임 셋의 한 프레임과 iframe의 첫 번째 이미지의 위치가 다른 프레임에 있으면 어떻게 될까요? 당신은 어떻게 그들을 서로 연관 지을 수 있습니까? <프레임 행 = 50,50> <프레임 SRC = "THISCONTAINSTHEIMAGE.html"> <프레임 SRC = "THISCONTAINSTHEIFRAME.html"> –

"마우스 오버 번째 이미지를 나타 내기 위해" –

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-18 20:16:44

문제는이 코드가 동일한 페이지에서만 ID와 작동한다는 것입니다. 그러나 프레임 셋의 한 프레임과 iframe의 첫 번째 이미지의 위치가 다른 프레임에 있으면 어떻게 될까요? 당신은 어떻게 그들을 서로 연관 지을 수 있습니까? <프레임 세트 행 = 50,50><프레임 src = "THISCONTAINSTHEIMAGE.html"><프레임 src = "THISCONTAINSTHEIFRAME.html"> –

"부모"를 사용하여 IFRAME을 참조 할 수없는 경우 IFRAME에 원하는 것을 수행하고 내부 iframe에서 호출하는 "상위"프레임에 javascript 함수를 넣을 수 있습니다. parent.changeImage ('myid');

그래서이 기능은 부모에있을 수 있습니다 :은 같은 페이지 (내 문제의 코드에서 근무로)

function changeImage(theID);(){ 
    document.getElementById(theID).src='SecondImage.jpg'; 
}

출처

2012-11-19 21:31:37 Josh

다른 이미지의 다른 프레임에있는 이미지의 내용을 변경하는 방법은 무엇입니까?

답변

관련 문제