Question

当用户点击图片时，我想要替换＆＃39;输入类型：image＆＃39;用iframe＆＃39;在相同的位置和相同的高度。 iv尝试添加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>

任何人都知道如何解决这个问题？感谢

Answer 1

给你的div提供id，（这里是myDiv），并定义height＆amp;它的宽度。在里面使用你的形象。
当用户单击按钮时，更改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>

图像点击用iframe替换图像

1 个答案: