2017-05-16 20 views
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> 

任何幫助將不勝感激。

+0

的screenshots.html頁有你寫任何的js? –

+0

我個人沒有,我已經添加了一個建議的片段,我曾經在修補之前遇到過。 – ChrisOSX

+0

不如鼓搗,不讚(豎起大拇指)。我會盡力寫一個答案,雖然有人可能會打敗我。 –

回答

2

與URL通過散列標籤更改您的第一頁像this.Pass的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> 

變化這樣

<!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查看我更新的答案。檢查鏈接。並將其更改爲 – prasanth

+0

好吧,現在我們走在了正確的道路上。在新頁面打開工作正常,但打開該頁面後,沒有任何東西被加載。我認爲這可能是圖像鏈接,所以我得到了圖像的完整地址。沒有。我查看了你提供的答案,甚至檢查了這兩個頁面上的元素。它們是相同的。有任何想法嗎? – ChrisOSX

相關問題