gpt4 book ai didi

javascript - 在新页面中加载非特定点击图像

转载 作者:行者123 更新时间:2023-11-30 15:19:14 25 4
gpt4 key购买 nike

从我在这里和通过谷歌搜索,我无法找到我正在搜索的内容的完整解决方案。

概述:

我有一个页面有一个带有一些图像的 div。加载正常,我将其设置为在单击/点击它们时打开一个新页面/选项卡。

<div class="wrapper">
<div class="scrollmenu">
<a href="./screenshots.html" target="_blank">
<img src="./screenshots/1.png" width="60%" target="_new"/>&nbsp;
</a>
<a href="./screenshots.html" target="_blank">
<img src="./screenshots/2.png" width="60%" target="_new"/>&nbsp;
</a>
<a href="./screenshots.html" target="_blank">
<img src="./screenshots/3.png" width="60%" target="_new"/>&nbsp;
</a>
</div>
</div>

问题:

虽然这甚至会打开 screenshots.html,但图像不会加载。

现在我知道我需要在 screenshots.html 文件中做一些事情来接收点击的图像,我只是不知道是什么。

这是我目前在该文件中设置的内容。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport">
<link rel="stylesheet" type="text/css" href="../resources/css/style.css"/>
<title>Screenshots</title>
</head>

<body class="no-pinstripe">
<panel>

<!--This is where is needs to be loaded up -->
<img src="./screenshots/*.png" width="60%">

</panel>
</body>
</html>

我需要做什么才能在其中接收和加载点击的图像?

我遇到过的建议的 javascript。只是不知道如何将它们联系起来。

<script language="JavaScript" type="text/javascript">
if (location.search)
{
var image_filename = location.search.substring(1)
document.write('<IMG SRC="' + image_filename + '">')
//document.write('<IMG "STYLE="width:60%" SRC="' + image_filename + '">')
}
</script>

如有任何帮助,我们将不胜感激。

最佳答案

像这样更改您的第一个页面。通过带有 url 的散列标签传递 img src

更新 .你的文件夹路径是这样的

main_folder          => firsthtmlpage//image call => "./screenshots/images.png"screenshots         => images.pngscreenshot.html(secondhtmlpage)) //the image "screenshots/images.png"

I have create one project for you code check this .it open new window.and show the which image are you clicked.

<div class="wrapper">
<div class="scrollmenu">
<a href="javascript:void(0)">
<img src="./screenshots/1.png" width="60%" target="_new" />&nbsp;
</a>
<a href="javascript:void(0)">
<img src="./screenshots/2.png" width="60%" target="_new" />&nbsp;
</a>
<a href="javascript:void(0)">
<img src="./screenshots/3.png" width="60%" target="_new" />&nbsp;
</a>
</div>
</div>
<script>
$('.scrollmenu a').click(function() {
window.open("screenshots.html#" + encodeURIComponent($(this).children('img').attr('src')))
})
</script>

像这样更改 screenshots.html 页面

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport">
<link rel="stylesheet" type="text/css" href="../resources/css/style.css"/>
<title>Screenshots</title>
</head>
<body class="no-pinstripe">
<panel>

<!--This is where is needs to be loaded up -->
<img src="" width="60%">
<script>
window.onload=function(){
$('img').attr('src',decodeURIComponent(window.location.hash).replace(/#|\.\//g,"").trim())
}

</script>
</panel>
</body>
</html>

关于javascript - 在新页面中加载非特定点击图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44001460/

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