Question

I have an input element, a span, and a div with a background image property.

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

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

I’m trying to create a script where if a user pastes/types a link into the input field, then clicks the Go button, the background image property for the div changes to that url.

Answer 1

In < head> :

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

In < body> :

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

If you have problems please let me know 🙂