更改背景圖像Url到輸入字段的值

我有一個輸入元素，跨度和div與背景圖像屬性。更改背景圖像Url到輸入字段的值

<span>Go</span><input id="ImageUrl"/> 

<div id="Image"></div>

我試圖創建一個腳本，如果用戶貼/類型鏈接到輸入字段，然後點擊Go按鈕時，對於DIV更改該URL背景圖像屬性。

來源

2011-05-13 C_K

＃你得到了答案，請爲此做出迴應。你可以在他們的回答中做出接受，贊成或只是評論:) – bungdito 2011-05-13 05:25:45

@bungdito - 如果你指的是我的前一個線索提出同樣的問題，事情就會改變，並且在那個問題上有明確的問題。我不想重新編輯整個問題。抱歉。 – 2011-05-13 15:32:11

在<他廣告>：

<script type="text/javascript"> 
    function show() { 
     $('#Image').css('background-image', 'url("' + $('#ImageUrl').val() + '")'); 
    } 
</script>

在<體>：

<span>Go</span><input id="ImageUrl" /> <!-- the textbox can get the user input Url of Image--> 
<div id="Image" style="width:200px; height:200px;"></div> <!-- the div which show Image --> 
<input type="button" value="Go" onclick="show()" /> <!-- the GO button -->

如果您有問題，請讓我知道:)

來源

2011-05-13 04:42:04 Maidot

我改變它爲一個點擊功能，因爲這更適合我，感謝您的幫助！ – 2011-05-13 15:30:44

歡迎您:) – Maidot 2011-05-14 03:32:22

以及basicly您可以：

$('input[type=submit]').click(function(){ 
    // for example changing it by appending "a" 
    $("#ImageUrl").val($("#ImageUrl").val() + 'a'; 
});

來源

2011-05-13 04:33:17 Teneff

根據您的標記，如果你給<span>的Btn的id（用於特異性的緣故），下面的工作：

$("#Btn").click(function(){ 
    $("#Image").css("backgroundImage", "url('"+$("#ImageUrl").val()+"')"); 
});

演示：jsfiddle.net/mSAsU

來源

2011-05-13 04:36:44 Marcel

這應該很好地工作。請注意，您必須將url()部分包含在CSS函數調用中。

$("#ImageUrl").blur(function(){ 
    $("#Image").css("background-image", "url("+$(this).val()+")"); 
});

來源

2011-05-13 04:42:36

更改背景圖像Url到輸入字段的值

回答

相關問題