Как заменить встроенный код JavaScript с привязкой событий?

Question

Это слайд-шоу изображений, и все работает нормально, но мне нужно заменить встроенную обработку события «onclick» в файле HTML на привязку события в файле javascript. Может кто-нибудь помочь мне, пожалуйста? Спасибо.

Мой HTML выглядит так ...

            <table>
            <tr>
            <td class="floatleft">
               <img src="images/thumbnails/vancouver_bc.jpg" alt="vancouver" id="vancouver" onclick="showImage('images/slideshow/vancouver_bc.jpg', 'Downtown Vancouver, BC Canada.<br><br>Package deals starting from as low as $4,999 USD.');" />
               <br>
               <img src="images/thumbnails/kauai_hawaii.jpg" alt="kauai" id="kauai" onclick="showImage('images/slideshow/kauai_hawaii.jpg', 'Beaches of Kauai, Hawaii USA.<br><br>Package deals starting from as low as $6,999 USD.');" />
               <br>
               <img src="images/thumbnails/costa_rica.jpg" alt="alajuela" id="alajuela" onclick="showImage('images/slideshow/costa_rica.jpg', 'Active Volcanoes in Alajuela Province, Costa Rica.<br><br>Package deals starting from as low as $7,999 USD.');" />
               <br>
               <img src="images/thumbnails/seoul_korea.jpg" alt="seoul" id="seoul" onclick="showImage('images/slideshow/seoul_korea.jpg', 'Sacred Temples in Seoul, South Korea.<br><br>Package deals starting from as low as $9,999 USD.');" />
            </td>

            <td>       
               <img src="images/slideshow/vancouver_bc.jpg" alt="vancouver" id="largeImg" />
               <div id="caption" class="caption">Downtown Vancouver, BC Canada.<br><br>Package deals starting from as low as $4999 USD.</div>
            </td>

            <td class="floatright">
               <img src="images/thumbnails/tokyo_japan.jpg" alt="tokyo" id="tokyo" onclick="showImage('images/slideshow/tokyo_japan.jpg', 'Cherry Blossom Season in Tokyo, Japan.<br><br>Package deals starting from as low as $11,999 USD.');" />
               <br>
               <img src="images/thumbnails/agra_india.jpg" alt="agra" id="agra" onclick="showImage('images/slideshow/agra_india.jpg', 'The Taj Mahal in Agra, India.<br><br>Package deals starting from as low as $8,999 USD.');" />
               <br>
               <img src="images/thumbnails/croatia.jpg" alt="dubrovnik" id="dubrovnik" onclick="showImage('images/slideshow/croatia.jpg', 'Stone Walls in Dubrovnik, Croatia.<br><br>Package deals starting from as low as $5,999 USD.');" />
               <br>
               <img src="images/thumbnails/morocco.jpg" alt="marrakech" id="marrakech" onclick="showImage('images/slideshow/morocco.jpg', 'Spice Market in Marrakech, Morocco.<br><br>Package deals starting from as low as $10,999 USD.');" />
            </td>

            </tr>
            </table> 

Мой Javascript выглядит так ...

    var images = new Array('images/slideshow/vancouver_bc.jpg', 'images/slideshow/kauai_hawaii.jpg', 
    'images/slideshow/costa_rica.jpg', 'images/slideshow/seoul_korea.jpg', 'images/slideshow/tokyo_japan.jpg', 
    'images/slideshow/agra_india.jpg', 'images/slideshow/croatia.jpg', 'images/slideshow/morocco.jpg', 
    'images/thumbnails/vancouver_bc.jpg', 'images/thumbnails/kauai_hawaii.jpg', 
    'images/thumbnails/costa_rica.jpg', 'images/thumbnails/seoul_korea.jpg', 'images/thumbnails/tokyo_japan.jpg', 
    'images/thumbnails/agra_india.jpg', 'images/thumbnails/croatia.jpg', 'images/thumbnails/morocco.jpg');

    for(var i = 0; i < images.length; i++) 
    {
    var img = new Image();
    img.src = images[i];
    }

    function showImage(imgSrc, imgText) 
    {
    var largeImage = document.getElementById('largeImg');
    var textDiv = document.getElementById('caption');
    largeImage.src = imgSrc;
    textDiv.innerHTML = imgText;
    }