<html>
<head>
<title>streetfightingserieswithbuttons</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (streetfightingserieswithbuttons.psd) -->
<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
streetfightingserieswithbuttons_Layer_2_click = newImage("images/streetfightingserieswith-05.jpg");
streetfightingserieswithbuttons_Layer_2_copy_click = newImage("images/streetfightingserieswith-08.jpg");
streetfightingserieswithbuttons_Layer_2_copy_3_click = newImage("images/streetfightingserieswith-11.jpg");
streetfightingserieswithbuttons_Layer_2_copy_2_click = newImage("images/streetfightingserieswith-15.jpg");
preloadFlag = true;
}
}

// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (streetfightingserieswithbuttons.psd) -->
<table id="Table_01" width="541" height="216" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="9">
<img src="images/streetfightingserieswithbut.gif" width="540" height="134" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="134" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/streetfightingserieswith-03.gif" width="30" height="82" alt=""></td>
<td rowspan="2">
<a href="#"
onmouseover="changeImages('streetfightingserieswithbuttons_Layer_2', 'images/streetfightingserieswithbut.jpg', 'streetfightingserieswithbuttons_Layer_2_copy', 'images/streetfightingserieswith-07.jpg', 'streetfightingserieswithbuttons_Layer_2_copy_3', 'images/streetfightingserieswith-10.jpg',
'streetfightingserieswithbuttons_Layer_2_copy_2',
'images/streetfightingserieswith-14.jpg'); return true;"
onclick="changeImages('streetfightingserieswithbuttons_Layer_2', 'images/streetfightingserieswith-05.jpg');">
<img name="streetfightingserieswithbuttons_Layer_2" src="images/streetfightingserieswithbut.jpg" width="119" height="50" border="0" alt=""></a></td>
<td rowspan="4">
<img src="images/streetfightingserieswith-06.gif" width="1" height="82" alt=""></td>
<td rowspan="2">
<a href="#"
onmouseover="changeImages('streetfightingserieswithbuttons_Layer_2', 'images/streetfightingserieswithbut.jpg', 'streetfightingserieswithbuttons_Layer_2_copy', 'images/streetfightingserieswith-07.jpg', 'streetfightingserieswithbuttons_Layer_2_copy_3', 'images/streetfightingserieswith-10.jpg',
'streetfightingserieswithbuttons_Layer_2_copy_2',
'images/streetfightingserieswith-14.jpg'); return true;"
onclick="changeImages('streetfightingserieswithbuttons_Layer_2_copy', 'images/streetfightingserieswith-08.jpg');">
<img name="streetfightingserieswithbuttons_Layer_2_copy" src="images/streetfightingserieswith-07.jpg" width="119" height="50" border="0" alt=""></a></td>
<td colspan="3">
<img src="images/streetfightingserieswith-09.gif" width="139" height="1" alt=""></td>
<td rowspan="2">
<a href="#"
onmouseover="changeImages('streetfightingserieswithbuttons_Layer_2', 'images/streetfightingserieswithbut.jpg', 'streetfightingserieswithbuttons_Layer_2_copy', 'images/streetfightingserieswith-07.jpg', 'streetfightingserieswithbuttons_Layer_2_copy_3', 'images/streetfightingserieswith-10.jpg',
'streetfightingserieswithbuttons_Layer_2_copy_2',
'images/streetfightingserieswith-14.jpg'); return true;"
onclick="changeImages('streetfightingserieswithbuttons_Layer_2_copy_3', 'images/streetfightingserieswith-11.jpg');">
<img name="streetfightingserieswithbuttons_Layer_2_copy_3" src="images/streetfightingserieswith-10.jpg" width="119" height="50" border="0" alt=""></a></td>
<td rowspan="4">
<img src="images/streetfightingserieswith-12.gif" width="13" height="82" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/streetfightingserieswith-13.gif" width="17" height="81" alt=""></td>
<td rowspan="2">
<a href="#"
onmouseover="changeImages('streetfightingserieswithbuttons_Layer_2', 'images/streetfightingserieswithbut.jpg', 'streetfightingserieswithbuttons_Layer_2_copy', 'images/streetfightingserieswith-07.jpg', 'streetfightingserieswithbuttons_Layer_2_copy_3', 'images/streetfightingserieswith-10.jpg',
'streetfightingserieswithbuttons_Layer_2_copy_2',
'images/streetfightingserieswith-14.jpg'); return true;"
onclick="changeImages('streetfightingserieswithbuttons_Layer_2_copy_2', 'images/streetfightingserieswith-15.jpg');">
<img name="streetfightingserieswithbuttons_Layer_2_copy_2" src="images/streetfightingserieswith-14.jpg" width="119" height="50" border="0" alt=""></a></td>
<td rowspan="3">
<img src="images/streetfightingserieswith-16.gif" width="3" height="81" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="49" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/streetfightingserieswith-17.gif" width="119" height="32" alt=""></td>
<td rowspan="2">
<img src="images/streetfightingserieswith-18.gif" width="119" height="32" alt=""></td>
<td rowspan="2">
<img src="images/streetfightingserieswith-19.gif" width="119" height="32" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td>
<img src="images/streetfightingserieswith-20.gif" width="119" height="31" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="31" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>
I have taken the script out of my page to paste here. When the <a href> tag is "#" as in this the rollover effect is great however when I add an actual link to the code instead of the # symbol then it no longer rolls over. It merely clicks and goes with the button changing in the slightest. What can I do to fix this problem