gpt4 book ai didi

html - 如何在 iframe 中定位

转载 作者:行者123 更新时间:2023-11-28 04:32:12 26 4
gpt4 key购买 nike

我有一个主要的网页index.html和另一个 projects_imgs.html这将是 index.html 中的 iframe src

projects_imgs.html里面会有图像。我想做的是,

index.html我想添加 <a>链接到内部图像的标签 projects_imgs.html ,因此每当用户单击这些链接时,iframe 都会加载针对特定图像的已单击链接

明白了吗?

至此index.html的代码如下:

    <!-- Projects section -->
<div class="section projects-section" id="section4">
<div class="container-fluid">
<div class="row">
<div class="col-lg-9">
<iframe class="pull-right" width="85%" height="700px" src="projects_imgs.html" name="projects_gallery"></iframe>
</div>
</div>
<p><a href="projects_imgs.html" target="projects_gallery">Images</a></p>
</div>
</div>

和 projects_imgs.html:

<!DOCTYPE html>
<html>
<head>
<title>MH-Shukri Projects Gallery</title>
<!--- Bootstrap CSS --->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--- Bootstrap Theme --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
</head>
<body>
<style>
body {
background-color: #34312C;
}

img {
position: fixed;
width: 100%;
height: 100%;
}
</style>

<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="imgs/projects/Faf/1.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/2.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/3.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/4.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/5.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/6.jpg"/>
</div>
</div>



</body>
</html>

最佳答案

我认为仅在 html 中实现这样的逻辑是不可能的。我建议你使用 PHP 来实现这个逻辑。这是一个小例子:

index.html

<html>
<body>
Images: <br>
<a href="images.html?image=1"> Image 1 </a> <br>
<a href="images.html?image=2"> Image 2 </a>
</body>
</html>

这些链接使用参数“image”调用 images.html。如您所见,我们将“图像”设置为 1 或 2,具体取决于用户点击的内容。

图片.html

<html>
<body>
<?php
if($_GET["image"] == 1)
{
echo "<img src='Image1'/>";
}
if($_GET["image"] == 2)
{
echo "<img src='Image2'/>";
}
?>
</body>
</html>

在 images.html 中,您使用 IF 语句来决定。如果它是 1,那么你只需调用图像 1。如果 2....

您可以使用它通过您的 iFrame 实现它。但请记住,您需要一个了解 PHP 的网络服务器才能运行它!

祝你有美好的一天!

关于html - 如何在 iframe 中定位 <img>?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41676275/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com