javascript - 图片点击用 iframe 替换图片

Question

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

还尝试将 iframe 的显示设置为无，一开始看起来不错，但我如何让它显示在 map 之前所在的位置？

<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>

有人知道怎么解决吗？谢谢

Answer 1

Give id to your div,(here its myDiv), and define height & width for it. Inside that use your image.
When user clicks button, change the content of div, thus the iframe will be shown in same position. Code shown below

    <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>