Question

从我在这里搜索到谷歌，我找不到我正在搜索的完整解决方案。

概述：

我有一个页面有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>

非常感谢任何帮助。

Answer 1

像这样更改你的第一页。通过带有url

的哈希标签来传递img src

更新。你这样的文件夹路径

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

我为你创建了一个代码check this的项目。打开新窗口。显示你点击了哪个图像。

<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>  <img src="" width="60%"> <script> window.onload=function(){ $('img').attr('src',decodeURIComponent(window.location.hash).replace(/#|\.\//g,"").trim()) } </script> </panel> </body> </html>

在新页

1 个答案: