图片点击用iframe替换图片

当用户点击图片时，我想用'iframe'替换'input type：image'在相同位置和高度。 iv尝试添加iframe并将显示设置为不可见，然后单击时可见，但这会导致对齐问题图片点击用iframe替换图片

也尝试将iframe的显示设置为无，这看起来不错，但是如何让它显示在哪里以前的地图是？

<script> 
     function showIframeMapOnClick() { 
      alert("this is a test"); 
      $("#Image1").css('visibility', 'hidden'); 
      $("#iFrameMap").css('visibility', 'visible'); 
///   $("#iFrameMap").css('visibility', 'block'); 
     } 
</script> 

<div id="Contact Us" class="backimage2" style="width:100%;"> 
     <div id="Fullcontent"> 
     <div id="thirdPageDiv" class="wrapper whitediv"> 
     <div> 
      <input type="image" ID="Image1" onclick="showIframeMapOnClick();return false" src="/images/mapImage.png" style="float:right; position:relative; width:550px" /> 
      <iframe id="iFrameMap" src='https:' width='50%' height='400px' style="float:right; position:relative; width:550px; visibility:hidden"/*also tried display:none*/></iframe> 
     </div> 
     <div class="black-header">Contact Us</div><br /> 
      This House,<br /> 
      This Street,<br /> 
      This Door,<br /> 
      This LetterB,<br /> 
      Please,<br /> 
      Come Again,<br /> 
      <br /> 
     </div> 
     </div> 
     </div>

有人知道如何解决这个问题吗？感谢

来源

2015-07-02 John

码我敢打赌，你用'能见度：hidden'和'知名度：visible' ...尝试用'显示：none'和'显示：block'（或'inline'，达你） – ben

给ID到你的DIV，（这里的myDiv），并定义高度和宽度它。里面使用你的形象。
当用户点击按钮时，更改div的内容，从而iframe将显示在相同的位置。如下图所示

 

    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <script> 
     function showIframeMapOnClick() { 
      $("#myDiv").html("<iframe id='iFrameMap' src='https:' width='50%' height='400px' style=''></iframe>"); 
     } 
    </script> 

    <div id="Contact Us" class="backimage2" style="width:100%;"> 
     <div id="Fullcontent"> 
      <div id="thirdPageDiv" class="wrapper whitediv"> 
       <div id="myDiv" style="float:right; position:relative; width:550px"> 
        <input type="image" ID="Image1" onclick="showIframeMapOnClick();return false" src="/images/mapImage.png" /> 
       </div> 
       <div class="black-header">Contact Us</div><br /> 
       This House,<br /> 
       This Street,<br /> 
       This Door,<br /> 
       This LetterB,<br /> 
       Please,<br /> 
       Come Again,<br /> 
       <br /> 
      </div> 
     </div> 
    </div>

来源

2015-07-02 11:28:28

谢谢你 – John

图片点击用iframe替换图片

回答

相关问题