using Image as an event trigger with jquery, html and css

i im developing a proyect web site with css, jquery and html. what happens is that in the html, i have a table with only 3 columns and i'm placing images to use as buttoms to toggle the content below the buttom. Here's the code:

<table id='buttom-service'>
            <tr>
                <td class="selectors">
                    <img src="images/icon1.png" id='ser_bt1'alt="Radiocomunicacion" />
                </td>
                <td class="selectors">
                    <img src="images/icon2.png" id='ser_bt2' alt="Arquitectura" />
                </td>
                <td class="selectors">
                    <img src="images/icon3.png" id='ser_bt3' alt="Radiocomunicacion"/>
                </td>
            </tr>
        </table>

Now, I make the images to work as buttoms with jquery:

$(document).ready(function(){
   //default load
   $('#buttom-service').addClass('hover');

   //action buttoms
   $('#ser_bt1').click(function(){
    do stuff;

   });
   $('#ser_bt2').click(function(){
    do stuff;

   });
   $('#ser_bt3').click(function(){
    do stuff

   });});

The problem with this is that the clicable area in the first 2 images is reduced to the lower part of the image and not the whole thing, while the third element works fine. (they toggle the content fine btw) I need some advice on how to make the three images work as buttoms properly. (the clicable area)

thank you