Question

我的HTML代码包含3张图片。我想要做的是，当选择一个图像时，要在同一个屏幕（不是弹出窗口）上显示一些文本和一个iframe。要添加一些上下文，每个图像代表一个建筑物，单击图像将显示其地址（某些文本）和其地图（谷歌地图iframe）。为了在同一个屏幕上并排显示地址和地图，我尝试使用..来做到这一点。

我不确定使用是否是正确的方法。我也尝试过使用formfields，但也无法使用它们。

我仍然是这个java编码的新手...它非常令人兴奋，但是让我一夜又一夜地保持清醒： - （

对此的任何帮助将不胜感激： - ）

这是我的代码：

＆＃13;

<div style="display:none;">  
    <div id="leftfield" style="width:250px;">  
       /* placeholder for address */  
    </div>  
    <div id="rightfield" style="width:500px;">  
       /* placeholder for iframe */  
    </div>  
</div>  


<script>  
function showaddr(i) {   /* populate leftfield */  
if (i==1) {  
    document.writeln("title A");  
    document.writeln("Address line 1"); document.writeln("address line 2");  

} else if (i==2) {  
    document.writeln("title A");  
    document.writeln("Address line 1"); document.writeln("address line 2");  
} else if (i==3) {  
    document.writeln("title A");  
    document.writeln("Address line 1"); document.writeln("address line 2");  
}  
}  
function showiframe(i) {    /* populate rightfield */  
if (i==1) {  
    document.write('<iframe src="..." </iframe>');  
} else if (i==2) {  
    document.write('<iframe src="..." </iframe>');  
} else if (i==3) {  
    document.write('<iframe src="..." </iframe>');  
}  
}  
</script>  


<img onclick="showaddr(1); showiframe(1)" src="pic1.jpg" />  
<img onclick="showaddr(2); showiframe(2)" src="pic2.jpg" />  
<img onclick="showaddr(3); showiframe(3)" src="pic3.jpg" />

＆＃13;

Answer 1

如果您使用jQuery并只更改iframe的src属性，则会更容易。

我为你创建了一个jsfiddle here

<div>
    <div class="leftContent">
        <span id="title">empty title</span>
        <span id="adress">empty adress</span>
    </div>
    <div class="rightContent">
        <iframe id="map"></iframe>
    </div>
</div>

<img onclick="show(1)" alt="pic1" src="pic1.jpg" />
<img onclick="show(2)" alt="pic2" src="pic2.jpg" />
<img onclick="show(3)" alt="pic3" src="pic3.jpg" />

function show(type){
    showAdress(type);
    showMap(type);
}

function showAdress(type){
    $('#title').text('title ' + type);
    $('#adress').text('adress ' + type);
}

function showMap(type){
    $('#map').attr('src', 'http://jsfiddle.net/KenQ/h3w5t8mj/1/');
}

如何在屏幕上的同一容器或区域中显示不同的iframe

1 个答案: