Question

I want to write html where one section is like this:

<div id="...." style="background-image:url(---.jpg);">
    <p>...</p>
</div>

I am thinking of creating an image folder in the host-directory and give user option to select an appropriate image which can act as a background for the above . Can somebody suggest me, how this can be accomplished?

Answer 1

What you want is not as simple as you think

If you do not want to care about which images are available in the folder, you will need a server process that can return the content of that folder as a list, for example given

<div id="someDiv">Some content to make sure the div is not collapsed</div>

you need to generate something like this (inline is not recommended, using jQuery or similar would simplify your code)

<a href="someimage.jpg" 
onclick="document.getElementById('someDiv').style.backgroundImage=this.href;
return false"><img src="someimage.jpg" height="100" /></a>

---

To use autocomplete you could do

$(document).ready(function() {
  $("input#autocomplete").keypress(function(e) {
    if (e.which == 13 ) {
      $('#someDiv').("background-image", "url("+$(this).val()+")");
      event.preventDefault();
    }
  });
  $("input#autocomplete").autocomplete({
      source: ["apple.jpg", "banana.jpg","orange"]
  });
});