Have a li assigned to an image?

Have a li assigned to an image?

Hi, I'm rather new to JQuery, but I was wondering if there was a way to assign an li to an image -- or a way of having it so that there are menu buttons as images and when clicked they perform a get function to bring up another document?

here is what i currently have:

 <script type="text/javascript">                                         
$(#news).click(
 function() {
  $.get("news.html", function(data) {
$("#maincontent").html(data);
  });

});
</script>                                                               
 </head>                                                                 
<style>
#topmenu { list-style-type: none; }
body { 
background: url(12.png) #000000 no-repeat center fixed; 
text-align:center; color: white;
}
li news { 
display: block; 
width: 150px; 
height: 150px; 
padding: 0px 0px 0px 0px; color:#666666;
text-decoration: none; 
background:url(news2.png) no-repeat 0px 0px; 
}
#topmenu.news:hover { color:#333333; background:url(news2.png) no-repeat 0px -150px; } 
</style></head>
<ul id="topmenu">
<li id="news">News</li>
</ul>


any help would be greatly appreciated!