2017-05-16 13 views
1

の画像をクリックしました。ロード非特異的には、私がここで検索するとGoogleを経由して、私は私が探してるものに完全なソリューションを見つけることができませんでしたから、新しいページ

概要:

私はいくつかのイメージを持つdiv要素を持っている1ページを持っています。それはうまくロードされ、私はそれをクリック/タップするときに、新しいページ/タブを開くように設定しました。

<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> 

ご協力いただければ幸いです。この

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

よう

+0

ようscreenshots.htmlページは、あなたの書かれた任意のJSをお持ちですか? –

+0

私は個人的にそうではありませんでした。 – ChrisOSX

+0

悩み者には、より良い(親指で)。私は答えを書こうとしますが、誰かが私にそれを打つかもしれません。 –

答えて

2
URL

でハッシュタグを介してのIMG SRC this.Passなど、あなたの最初のページを変更

更新。あなたのフォルダパス私はあなたのためのプロジェクトを作成していますコードcheck this .it新しいウィンドウを開き、クリックした画像を表示します。

<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> 

そして

変更この

<!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> 
+0

これは私のための正しい道にあるかもしれないが、それは新しいページを開かない。今立つように、それは壊れたイメージを開きます。 * .pngが必要な正しいフォーマットであるかどうかわかりません。私はそれを非特定のイメージとして置いただけです。 – ChrisOSX

+0

@ChrisOSXは私の更新answer.Checkそのリンクを参照してください.AND [OK]を、今、私たちは正しい道にいること – prasanth

+0

など、あなたのコードを変更します。新しいページを開いても問題ありませんが、そのページを開くと何も読み込まれません。私はそれが画像リンクだったかもしれないと思ったので、私は画像の完全なアドレスを得ました。何もない。私はあなたが提供した答えを見てきました。彼らは同じです。何か案は? – ChrisOSX

関連する問題

 関連する問題