將圖像ID傳遞給函數。

-1

我認爲這似乎很簡單讓我難住。我希望有一個完整的產品縮略圖圖像，這些圖像只是在我的HTML中將整個圖像縮小爲更小的尺寸。點擊它在臨時彈出窗口中查看完整大小的圖像。將圖像ID傳遞給函數。

這是有效的，但我如何將圖像名稱作爲變量傳遞，因此我不必爲每個圖像重新編寫函數。例如，點擊pic1.jpg，你會得到帶有pic1.jpg的彈出窗口。 pic2.jpg在彈出窗口中調出pic2.jpg等等。

這是我的HTML代碼。

<p> 
    <a href="javascript:productpop()"> 
     <img src="products/pic1.jpg" id="image" height="100" border=0 /> 
     <br /> 
     CLICK FOR POPUP 
    </a>. 
</p>

這是我的彈出窗口代碼。

function productpop() { 
    newproduct=window.open('','name','height=500,width=500'); 
    var tmp = newproduct.document; 
    tmp.write('<html><head><title>Product Pop-up</title>'); 
    tmp.write('<link rel="stylesheet" href="productpop.css">'); 
    tmp.write('</head><body>'); 
    tmp.write('<p align="center">'); 
    tmp.write('<img src="products/pic1.jpg"></p>'); 
    tmp.write('<p align="center"><a href="javascript:self.close()">Close</a> Window. </p>'); 
    tmp.write('</body></html>'); 
    tmp.close(); 
}

在此先感謝您的幫助。我想了解這一點，而不僅僅是購買商業代碼。

來源

2014-05-20 user3657938

現在這是一個描述性標題... –

用''替換''？ – Tyblitz

不要使用popup的ppl喜歡在窗口模式，如燈箱 – cocco

您應該創建一個var對象數組，並在寫入每個var時遍歷數組。在PIC線的名稱更改爲這樣：

tmp[i].write("<img src=\"products/pic" + (i + 1) + ".jpg\"></p>");

來源

2014-05-20 18:57:09

你所尋找的是你的函數中的參數，即：

<p><a href="javascript:productpop('products/pic1.jpg')"><img src="products/pic1.jpg" id="image" height="100" border=0 /><br />CLICK FOR POPUP</a>.</p>

，然後用它在你的函數爲：

function productpop(imagePath) { 
    newproduct=window.open('','name','height=500,width=500'); 
    var tmp = newproduct.document; 
    tmp.write('<html><head><title>Product Pop-up</title>'); 
    tmp.write('<link rel="stylesheet" href="productpop.css">'); 
    tmp.write('</head><body>'); 
    tmp.write('<p align="center">'); 
    tmp.write('<img src="' + imagePath + '"></p>'); 
    tmp.write('<p align="center"><a href="javascript:self.close()">Close</a> Window. </p>'); 
    tmp.write('</body></html>'); 
    tmp.close(); 
}

有關參數的更多信息可以參考here。

來源

2014-05-20 18:59:17 ebo

您可以通過一個參數傳遞的ID在這樣的功能：

function productpop(picID) { 
    newproduct=window.open('','name','height=500,width=500'); 
    var tmp = newproduct.document; 
    tmp.write('<html><head><title>Product Pop-up</title>'); 
    tmp.write('<link rel="stylesheet" href="productpop.css">'); 
    tmp.write('</head><body>'); 
    tmp.write('<p align="center">'); 
    tmp.write('<img src="products/pic'+picID+'.jpg"></p>'); 
    tmp.write('<p align="center"><a href="javascript:self.close()">Close</a> Window. </p>'); 
    tmp.write('</body></html>'); 
    tmp.close(); 
}

這種方式，你會通過picID：

<a href="javascript:productpop(1)"> 
    <img src="products/pic1.jpg" id="image" height="100" border=0 /> 
</a>.

以及JavaScript函數應該這樣定義您必須手動輸入元素。

來源

2014-05-20 18:59:45 Eduard

您可以更改錨點<a onclick="javascript:productpop(event)" href="#"> 然後，你將有機會獲得src屬性在你的代碼（雖然這將是整個網址）：

function productpop(event) { // Added argument 
    newproduct=window.open('','name','height=500,width=500'); 
    var tmp = newproduct.document; 
    tmp.write('<html><head><title>Product Pop-up</title>'); 
    tmp.write('<link rel="stylesheet" href="productpop.css">'); 
    tmp.write('</head><body>'); 
    tmp.write('<p align="center">'); 
    tmp.write('<img src="' + event.target.childNodes[1].src + '"></p>'); // Use argument to insert source 
    tmp.write('<p align="center"><a href="javascript:self.close()">Close</a> Window. </p>'); 
    tmp.write('</body></html>'); 
    tmp.close(); 
}

所以通過使你有一個onclick事件訪問所有的事件信息，包括它的目標，即被點擊並觸發事件的元素。然後你可以檢索這些元素屬性。

來源

2014-05-20 19:18:09 kalyan

將圖像ID傳遞給函數。

回答

相關問題