Change background color of image using JS and CSS only

This was created as an answer to this question: http://stackoverflow.com/questions/10590720/how-to-use-hexadecimal-to-color-an-image/

HTML

<div style="background: url('http://farm5.static.flickr.com/4056/4325573581_8b87a699ac.jpg');width: 100%; height: 300px;">
<div id="constructedPin">
<div style="width:8px" class="line"></div>
<div style="width:14px" class="line"></div>
<div style="width:16px" class="line"></div>
<div style="width:20px" class="line"></div>
<div style="width:22px" class="line"></div>
<div style="width:24px" class="line"></div>
<div style="width:24px" class="line"></div>
<div style="width:26px" class="line"></div>
<div style="width:26px" class="line"></div>
<div style="width:28px" class="line"></div>
<div style="width:28px" class="line"></div>
<div style="width:28px" class="line"></div>
<div style="width:28px" class="line"></div>
<div style="width:28px" class="line"></div>
<div style="width:28px" class="line"></div>
<div style="width:28px" class="line"></div>
<div style="width:28px" class="line"></div>
<div style="width:28px" class="line"></div>
<div style="width:26px" class="line"></div>
<div style="width:25px" class="line"></div>
<div style="width:24px" class="line"></div>
<div style="width:22px" class="line"></div>
<div style="width:22px" class="line"></div>
<div style="width:20px" class="line"></div>
<div style="width:18px" class="line"></div>
<div style="width:18px" class="line"></div>
<div style="width:16px" class="line"></div>
<div style="width:15px" class="line"></div>
<div style="width:13px" class="line"></div>
<div style="width:12px" class="line"></div>
<div style="width:11px" class="line"></div>
<div style="width:9px" class="line"></div>
<div style="width:6px" class="line"></div>
<div style="width:4px" class="line"></div>
<div style="width:2px" class="line"></div>
<img src="http://www.brentonstrine.com/temp/transparent.png">
</div>
</div>
Click the pin and enter any hex color!

CSS

#constructedPin {
    width: 30px;
    position: relative;
    top: 80px;
    left: 130px;
}
.line { 
    height: 1px; 
    background-color:red; 
    margin: auto;
    width:0px;
}
img {
    position: absolute;
    top: 0px;
    left: 0px;
}

JavaScript

var userColor;
$(document).ready(function() {
    $('#constructedPin').click(function() {
        userColor = prompt("what color:", "#00F");
        $('.line').css({
            "backgroundColor": userColor
        });
    });
});