How can I make this 'click-gallery' jQuery code better?
<p>Following is crude way that I could think of to implement a click-gallery. I know there are better ways to do so that doesn't require binding <code>click</code> with every button. </p>

<p>What I am looking for: Anyway through which I can guess which button (span in this case) was clicked. And bind it automatically.</p>

<p>Thanks. Here's code:</p>

<pre><code>    &lt;script type="text/javascript"&gt;
    $(document).ready(function () {

        $('#gallery-button-1').click(function () {
            $('#Image').css("background-image", "url(Content/images/koala.png)");
        });
        $('#gallery-button-2').click(function () {
            $('#Image').css("background-image", "url(Content/images/lighthouse.png)");
        });
        $('#gallery-button-3').click(function () {
            $('#Image').css("background-image", "url(Content/images/penguins.png)");
        });
        $('#gallery-button-4').click(function () {
            $('#Image').css("background-image", "url(Content/images/tulips.png)");
        });
        $('#gallery-button-5').click(function () {
            $('#Image').css("background-image", "url(Content/images/5.png)");
        });
        $('#gallery-button-6').click(function () {
            $('#Image').css("background-image", "url(Content/images/6.png)");
        });
        $('#gallery-button-7').click(function () {
            $('#Image').css("background-image", "url(Content/images/7.png)");
        });
        $('#gallery-button-8').click(function () {
            $('#Image').css("background-image", "url(Content/images/8.png)");
        });
    });
&lt;/script&gt;

&lt;div id="Gallery"&gt;

    &lt;div id="ButtonBox"&gt;
        &lt;span id="gallery-button-1"&gt;1&lt;/span&gt;
        &lt;span id="gallery-button-2"&gt;2&lt;/span&gt;
        &lt;span id="gallery-button-3"&gt;3&lt;/span&gt;
        &lt;span id="gallery-button-4"&gt;4&lt;/span&gt;
        &lt;span id="gallery-button-5"&gt;5&lt;/span&gt;
        &lt;span id="gallery-button-6"&gt;6&lt;/span&gt;
        &lt;span id="gallery-button-7"&gt;7&lt;/span&gt;
        &lt;span id="gallery-button-8"&gt;8&lt;/span&gt;
    &lt;/div&gt;
    &lt;div id="Image"&gt;&lt;/div&gt;

&lt;/div&gt;
</code></pre>
