Измените URL фонового изображения на значение поля ввода

Question

У меня есть элемент ввода, span и div со свойством фонового изображения.

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

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

Я пытаюсь создать скрипт, в котором, если пользователь вставляет / вводит ссылку в поле ввода, а затем нажимает кнопку «Перейти», свойство фонового изображения для div изменяется на этот URL.

Answer 1

Исходя из вашей разметки, если вы дадите <span> id Btn (ради конкретности), будет работать следующее:

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

Демонстрация: jsfiddle.net / mSAsU

Answer 2

В :

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

Если у вас есть проблемы, пожалуйста, дайте мне знать:)

Answer 3

Это должно хорошо работать.Обратите внимание, что вы должны включить часть url() в вызов функции CSS.

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

Answer 4

ну в принципе вы можете:

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