根據URL中的變量/鍵顯示不同的圖像

我目前在我的URL中使用查詢字符串來指示產品選擇。我用這個功能可以讓產品的選擇出現在將提交到我們的網站隱藏的文本框：根據URL中的變量/鍵顯示不同的圖像

function getQueryVariable(key) { 
    var query = window.location.search.substring(1); 
    var vars = query.split('&'); 
    for (var i = 0; i < vars.length; i++) { 
     var pair = vars[i].split("="); 
     if (decodeURIComponent(pair[0])== key) { 
      return decodeURIComponent(pair[1]); 
     } 
    } 
} 

var product = getQueryVariable('product'); 
document.getElementById("00NK0000000Yqv2").value = product;

我還需要證明這取決於在URL查詢字符串表示什麼商品的標題圖片。我有四種產品（製造，建築，專業和一般）。

我該如何做到這一點，如果網址是這樣的：www.foo.com?product=Construction，它顯示的結構標題或如果它是www.foo.com?product=Manufacturing，它顯示製造，而不是。

來源

2012-11-21 elky

你可以改變圖像的來源，像這樣：

document.getElementById("headerImg").src = 'header' + product + '.jpg';

當圖像將具有相同的ID如下：

<img id="headerImg" src="images/headerImg.jpg">

來源

2012-11-21 21:10:51 Josh

我不明白這可以如何處理多個圖像。我必須爲每張圖片分配一個唯一的ID，所以我不知道你寫的腳本會如何工作。 – elky

在我的例子中，只有一個img標籤被改變（通過src屬性）到URL變量「product」的任何圖像結果。當你改變「src」屬性時，瀏覽器開始動態加載新圖像。 – Josh

尚未能通過這種方式得到它的工作。將繼續嘗試。謝謝。 – elky

你可以改變一個元素的CSS類到您的產品名稱並換出CSS中的背景圖片。例如，如果你的頭文件元素有一個id =頭文件，它看起來像這樣使用jquery。

$（'＃header'）。addClass（product）; //若產品是你的變量

然後在你的CSS，你可以風格它像這樣：

的#header {背景圖像：網址（pathToDefaultImage）}

＃header.Manufacturing {背景 - 圖像：url（pathToManufacturingImage）}

來源

2012-11-21 21:11:22 Justine

是的，你可以像你設置value一樣 - 根據你的查詢變量設置圖像的src屬性。

喜歡的東西：

var image; 
if (product === 'Construction') image = 'your_construction_image.png'; 
// more cases 

document.getElementById('yourimageID').src = image;

一種更好的方法這一點，但是，這是使用服務器端語言來呈現你想要的，而不是用JavaScript後設置的HTML。

來源

2012-11-21 21:12:39 freejosh

根據URL中的變量/鍵顯示不同的圖像

回答

相關問題