- Impact
- 19
Hi.
I'm making a site for photography. I made an imageready file with three thumbnails, and for each a rollover effect that when mouse rolled over one of the three thumbnail pictures, a larger version of the pictures appears by their side (remote rollover). Then, I saved the document as Optimized (Save Optimized As) and saved the html file. I then opened the html file in frontpage, tested it, and everything worked. What I want to do is to put this small "album" into a larger website, a template I already have.
So, I put all the html (including the script) from the plain album html and placed it in the proper (hopefully) place in my template. Everything needed for the head is in the head, and everything in the body is in the body. I see all of my pictures clearly, but the rollover doesn't work! It looks normal at first glance, but when I put my cursor over an image, it doesn't change anything. The cursor just changes to the link cursor (the one with the hand). What am I doing wrong? I tried rearranging and taking different parts of the html many times, but the problem still occurs.
I don't know if you guys need the code for the imageready html file, but here it is anyways. And, I understand that you guys don't have the pictures, but I think that they are not the problem.
(This is the code that works perfectly, but when placed in template doesn't)
Thanks a lot for your help. Let me know if you need anything else needed to solve the problem. You may also contact me through AIM.
I'm making a site for photography. I made an imageready file with three thumbnails, and for each a rollover effect that when mouse rolled over one of the three thumbnail pictures, a larger version of the pictures appears by their side (remote rollover). Then, I saved the document as Optimized (Save Optimized As) and saved the html file. I then opened the html file in frontpage, tested it, and everything worked. What I want to do is to put this small "album" into a larger website, a template I already have.
So, I put all the html (including the script) from the plain album html and placed it in the proper (hopefully) place in my template. Everything needed for the head is in the head, and everything in the body is in the body. I see all of my pictures clearly, but the rollover doesn't work! It looks normal at first glance, but when I put my cursor over an image, it doesn't change anything. The cursor just changes to the link cursor (the one with the hand). What am I doing wrong? I tried rearranging and taking different parts of the html many times, but the problem still occurs.
I don't know if you guys need the code for the imageready html file, but here it is anyways. And, I understand that you guys don't have the pictures, but I think that they are not the problem.
(This is the code that works perfectly, but when placed in template doesn't)
Code:
<html>
<head>
<title>Art Rollovers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (Art Rollovers.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) {
Art_Rollovers_Layer_1_over = newImage("images/Art-Rollovers_Layer-1-over.gif");
Art_Rollovers_Layer_1_over012 = newImage("images/Art-Rollovers_Layer-1-ov-12.gif");
Art_Rollovers_Layer_1_over013 = newImage("images/Art-Rollovers_Layer-1-ov-13.gif");
preloadFlag = true;
}
}
// -->
</script>
<!-- End Preload Script -->
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="preloadImages();">
<!-- ImageReady Slices (Art Rollovers.psd) -->
<table id="Table_01" width="863" height="384" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="8">
<img src="images/Art-Rollovers_01.gif" width="862" height="18" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="18" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/Art-Rollovers_02.gif" width="232" height="1" alt=""></td>
<td rowspan="2">
<a href="#"
onmouseover="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-over.gif'); return true;"
onmouseout="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-10.gif'); return true;"
onmousedown="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-over.gif'); return true;"
onmouseup="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-over.gif'); return true;">
<img src="images/Art-Rollovers_Layer-1.gif" width="76" height="108" border="0" alt=""></a></td>
<td colspan="3">
<img src="images/Art-Rollovers_04.gif" width="554" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/Art-Rollovers_05.gif" width="18" height="365" alt=""></td>
<td colspan="2">
<a href="#"
onmouseover="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-ov-13.gif'); return true;"
onmouseout="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-10.gif'); return true;"
onmousedown="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-ov-13.gif'); return true;"
onmouseup="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-ov-13.gif'); return true;">
<img src="images/Art-Rollovers_Layer-1-07.gif" width="148" height="107" border="0" alt=""></a></td>
<td rowspan="5">
<img src="images/Art-Rollovers_07.gif" width="66" height="365" alt=""></td>
<td rowspan="5">
<img src="images/Art-Rollovers_08.gif" width="64" height="365" alt=""></td>
<td rowspan="4">
<img name="Art_Rollovers_Layer_1010" src="images/Art-Rollovers_Layer-1-10.gif" width="473" height="344" alt=""></td>
<td rowspan="5">
<img src="images/Art-Rollovers_10.gif" width="17" height="365" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="107" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/Art-Rollovers_11.gif" width="148" height="48" alt=""></td>
<td rowspan="4">
<img src="images/Art-Rollovers_12.gif" width="76" height="258" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="48" alt=""></td>
</tr>
<tr>
<td>
<a href="#"
onmouseover="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-ov-12.gif'); return true;"
onmouseout="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-10.gif'); return true;"
onmousedown="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-ov-12.gif'); return true;"
onmouseup="changeImages('Art_Rollovers_Layer_1010', 'images/Art-Rollovers_Layer-1-ov-12.gif'); return true;">
<img src="images/Art-Rollovers_Layer-1-17.gif" width="146" height="118" border="0" alt=""></a></td>
<td rowspan="3">
<img src="images/Art-Rollovers_14.gif" width="2" height="210" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="118" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/Art-Rollovers_15.gif" width="146" height="92" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="71" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Art-Rollovers_16.gif" width="473" height="21" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>Thanks a lot for your help. Let me know if you need anything else needed to solve the problem. You may also contact me through AIM.
