导致通过javascript链接显示不同的图像

Question

当我点击三个单独的链接时，试图找出如何制作它，它会为点击的每个链接生成不同的图像。

javascript代码是：

<script type="text/javascript" src="js/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('img').click (function() { 
        var image = ('<img src="images/deal_men.fw.png" width="700px" height="500px" alt="Deals" />')
        $('.deal_content').html(image).hide().fadeToggle('slow');   
    });
$('img').click (function() { 
        var image = ('<img src="images/deal_teen.fw.png" width="700px" height="500px" alt="Deals" />')
        $('.deal_content').html(image).hide().fadeToggle('slow');   
    });
    $('img').click (function() { 
        var image = ('<img src="images/deal_couples.fw.png" width="700px" height="500px" alt="Deals" />')
        $('.deal_content').html(image).hide().fadeToggle('slow');   
    });
});
</script> 

受影响的HTML是：

<div id="imagelink"> 
        <div align="left"> <a href="#"><img src="images/for_men_btn.fw.png" alt="For Men" /></a>
          <a href="#">
            <img src="images/for_couples_btn.fw.png" alt="For Couples" /> 
          </a>    
          <a href="#">
            <img src="images/for_teens_btn.fw.png" alt="For Teens" />
          </a>
          </p>
          </div>
<div class="deal_content">
<p id="clickstructions">&nbsp;</p></div>