Need help with adding a hover effect with a clickable link to the jQuery Cycle Plugin

Need help with adding a hover effect with a clickable link to the jQuery Cycle Plugin

I am using the jQuery Cycle plugin for image galleries inside my website. The designer wants the home page to have an effect where, as the page loads, "signs" will drop down from the top of the screen. I have done this using the cycle plugin but the next part is where I am having issues. When each "sign" is hovered over, the image needs to change color (indicating hover) and be able to be clicked on to go to an inside page that has that gallery in it. Any suggestions? Is there a different plugin I should be using to achieve this effect?

Thanks in advance.

KB

OK Here is some code. I thought this would work but it's not. Suggestions?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>My Site - Home</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">


.background
{
position: fixed;
top: 50%;
left: 50%;
margin-top: -257.5px;
margin-left: -400px;
z-index:-1;
}

.print {
position: absolute;
left: 97px;
top: 0px;
height: 346px;
width: 256px;
padding: 0;
margin: auto;
overflow: hidden;
}

.print img {
height: 346px;
width: 256px;
}

.pattern {
position: absolute;
display: block;
left: 297px;
top: 0px;
height: 346px;
width: 256px;
padding: 0;
margin: auto;
overflow: hidden;
}

.pattern img {
height: 346px;
width: 256px;
}


</style>
<!-- include jQuery library -->
<script type="text/javascript" src="scripts/jquery.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="scripts/jquery.cycle.all.js"></script>


<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.print').cycle({
fx: 'scrollDown', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
autostop: '2',
});
});
</script>

<script type="text/javascript">
$(document).ready(function(){  
    $(".pattern").hover(function() {  
        $(this).attr("src","images/home/print-shingle-over.png");  
            }, function() {  
        $(this).attr("src","images/home/print-shingle.png");  
    });  
});  
</script> 

</head>


<!--This is the background image-->

<body>
<div class=background>
<img src="images/home/homebackground.png" width="800" height="515" />
<!--This is the induvidual page navigation with rollovers-->

    <div class="print">
<img src="images/home/print-shingle-blank.png" width="256" height="346"/>
<img src="images/home/print-shingle.png" width="256" height="346"/>
    </div>

</div>
</div>

</body>
</div>
</html>