What is the correct method of adding a link to this javascript slideshow group?
<p>The following code works until I add a link around the images. It works with the links removed and the 'a' between 'slideshow img' in the js and css removed.</p>

<h1>In Head:</h1>

<pre><code>&lt;script type="text/javascript"&gt;

function slideSwitch() {
var $active = $('#slideshow a img.active');

if ( $active.length == 0 ) $active = $('#slideshow a img:last');

// use this to pull the images in the order they appear in the markup
var $next =  $active.next().length ? $active.next()
    : $('#slideshow a img:first');

$active.addClass('last-active');
$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
var $first = $('#slideshow a img:first');
    $first.addClass('active');    
setInterval( "slideSwitch()", 4500 );
});

&lt;/script&gt;
</code></pre>

<h1>In Body:</h1>

<pre><code>&lt;div id="slideshow"&gt;
   &lt;a href="/samplehome"&gt;&lt;img src="/img/slide_three.jpg" width="948px" height="432px" border="0" alt="Three"/&gt;&lt;/a&gt;
   &lt;a href="/samplehome"&gt;&lt;img src="/img/slide_two.jpg" width="948px" height="432px" border="0" alt="Two"/&gt;&lt;/a&gt;
   &lt;a href="/samplehome"&gt;&lt;img src="/img/slide_one.jpg" width="948px" height="432px" border="0" alt="Ease In Motion"/&gt;&lt;/a&gt;
&lt;/div&gt;  
</code></pre>

<h1>In CSS:</h1>

<pre><code>#slideshow, #sub_slideshow {
position:relative;
height:432px;
width: 948px;
display: block;
margin: 0;
padding: 0;
float: right;
}

#slideshow a img, #sub_slideshow a img {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#slideshow a img.active, #sub_slideshow a img.active {
z-index:10;
opacity:1.0;
}

#slideshow a img.last-active , #sub_slideshow a img.last-active {
z-index:9;
}
</code></pre>
