Change ASP.Net Image Url on mouse over (hover) using JavasSript with getElementsByClassName

hello

How to change image url on hover with getElementsByClassName

here I use getElementById, now I want put CSS class for image and use the class name so I change code like below:

 <div id="container">
    <asp:Image ID="bulbPic" CssClass="bulbclass" runat="server" ImageUrl="~/pics/bulboff.gif" onmouseout="turnOffTheBulb()" onmouseenter="turnOnTheBulb()"/>
</div>
<script>
    var $ = document;
    var bulbPic = $.getElementsByClassName("bulbclass");
    function turnOnTheBulb() {
        bulbPic.src = "pics/bulbon.gif";
    }

    function turnOffTheBulb() {
        bulbPic.src = "pics/bulboff.gif";
    }
</script>
<style>
    #container {
        margin-top: 100px;
        margin-left: 600px;
    }
</style>

I use getElementsByClassName but it doesn't work?

can you help me?

Thanks in advanced