PDA

View Full Version : MouseOver images in a table

asatyss
09-17-2002, 05:02 PM
I am trying to make a table that that will create two different effects when a picture in the cell is rolled over. First the image that has been moused over will change, and then another image will change in a different area of the table. I have tried a few different ways, but I keep getting errors, or it just doesn't work.

How should I code the changing of 2 images on mouseover?

For example:
<td> <a href="profile.html"
onMouseOver="changeImages...
onMouseOut="changeImages...
<img src="images/1.jpg" width=120 height=78></td>

Do I need to list every image that could possibly change after the changeImages command, or just the ones I want to chage?

If this doesn't make any sense, just say so, I can try to make it better.

If you need more code, I can do that as well.
ShriekForth
09-17-2002, 05:56 PM
It will not make a difference if the images are in tables or not, if you reference the images by name.

As to coding the changing of two images, it's as easy as one. Just make a simple enough function that you can call with different image names.


<SCRIPT LANGUAGE="JavaScript">
// create image objects.
checkMark1Ovr = new Image();
replyMark1Ovr = new Image();

checkMark2Ovr = new Image();
replyMark2Ovr = new Image();

function swapImgs(img, imgSet) {
//change the image source to the rollover image
eval("document.images['"+img+"'].src ="+img+imgSet+"Ovr.src");
}

</script>
<table>
<tr>
<td><img src="./on.gif" name="checkMark" onMouseOver="swapImgs('checkMark','1'); swapImgs('replyMark','1');" ></td>
</tr>
<tr>
<td><img src="./reply.gif" name="replyMark" onMouseOver="swapImgs('replyMark','2'); swapImgs('checkMark','2');" ></td>
</tr>
</table>
<script language="javascript">
//Actually get the images into cache
checkMark1Ovr.src = "./vb_bullet.gif";
replyMark1Ovr.src = "./newthread.gif";

checkMark2Ovr.src = "./on.gif";
replyMark2Ovr.src = "./reply.gif";
</script>

The function takes an image name, and a number, This could have been done to take a unique name only, or several other ways I'm sure, but this was an example I had laying around, and shows what you are looking for.

ShriekForth
asatyss
09-17-2002, 06:11 PM
ShriekForth-

Thanks for your reply. I just have a quick clarification. In the code where you say:


checkMark1Ovr = new Image();
replyMark1Ovr = new Image();

checkMark2Ovr = new Image();
replyMark2Ovr = new Image();

Which image is which?

Sorry if this is a dumb question, I am new to this.

Thanks.
asatyss
09-17-2002, 06:22 PM
I did a quick page, just to test. I am getting an error. What am I leaving out?


<html>
<head>

<SCRIPT LANGUAGE="JavaScript">
// create image objects.
checkMark1Ovr = new Image("images/2.jpg");
replyMark1Ovr = new Image("images/2_over.jpg);

checkMark2Ovr = new Image("images/3.jpg");
replyMark2Ovr = new Image("images/3_over.jpg");

function swapImgs(img, imgSet) {
//change the image source to the rollover image
eval("document.images['"+img+"'].src ="+img+imgSet+"Ovr.src");
}

</script>
<table>
<tr>
<td><img src="images/2.jpg" name="checkMark" onMouseOver="swapImgs('checkMark','1'); swapImgs('replyMark','1');"

></td>
</tr>
<tr>
<td><img src="images/3.jpg" name="replyMark" onMouseOver="swapImgs('replyMark','2'); swapImgs('checkMark','2');"

></td>
</tr>
</table>
<script language="javascript">
//Actually get the images into cache
checkMark1Ovr.src = "images/2.jpg";
replyMark1Ovr.src = "images/2_over.jpg";

checkMark2Ovr.src = "images/3.jpg";
replyMark2Ovr.src = "images/3_over.jpg";
</script>
<html>
Mr J
09-17-2002, 08:09 PM
<SCRIPT LANGUAGE="JavaScript">
// create image objects.

checkMark1Ovr = new Image();
checkMark1Ovr.src = "images/2.jpg";

replyMark1Ovr = new Image();
replyMark1Ovr.src = "images/2_over.jpg";

checkMark2Ovr = new Image();
checkMark2Ovr.src = "images/3.jpg";

replyMark2Ovr = new Image();
replyMark2Ovr.src = "images/3_over.jpg";
function swapImgs(img, imgSet) {
//change the image source to the rollover image
eval("document.images['"+img+"'].src ="+img+imgSet+"Ovr.src");
}

</script>
asatyss
09-17-2002, 10:01 PM
Oh, I see. Sorry, I was trying too hard.

It woirked on a small example, but I can't get it to work on the whole thing yet. here is all of the code, maybe someone can help me figure out why it not working.

<HTML>
<HEAD>
<TITLE>Our Law Firm</TITLE>

<SCRIPT LANGUAGE="JavaScript">

var preloadFlag = false;
function preloadImages() {
if (document.images) {
1 = newImage("images/1.jpg");
2 = newImage("images/2.jpg");
3 = newImage("images/3.jpg");
4 = newImage("images/4.jpg");
5 = newImage("images/5.jpg");
6 = newImage("images/6.jpg");
789 = newImage("images/789.jpg");
10 = newImage("10.jpg");
2_over = newImage("images/2_over.jpg");
3_over = newImage("images/3_over.jpg");
4_over = newImage("images/4_over.jpg");
6_over = newImage("images/6_over.jpg");
attorneys = newImage("images/attorneys.jpg");
10_over = newImage("images/10_over.jpg");
news = newImage("images/news.jpg");
products = newImage("images/products.jpg");
services = newImage("images/services.jpg");
profile = newImage("images/profile.jpg");
preloadFlag = true;
}
}

checkMark6Ovr = new Image();
checkMark6Ovr.src = "images/6.jpg";

replyMark6Ovr = new Image();
replyMark6Ovr.src = "images/6_over.jpg";

checkMark2Ovr = new Image();
checkMark2Ovr.src = "images/2.jpg";

replyMark2Ovr = new Image();
replyMark2Ovr.src = "images/2_over.jpg";

checkMark3Ovr = new Image();
checkMark3Ovr.src = "images/3.jpg";

replyMark3Ovr = new Image();
replyMark3Ovr.src = "images/3_over.jpg";

checkMark4Ovr = new Image();
checkMark4Ovr.src = "images/4.jpg";

replyMark4Ovr = new Image();
replyMark4Ovr.src = "images/4_over.jpg";

checkMark10Ovr = new Image();
checkMark10Ovr.src = "images/10.jpg";

replyMark10Ovr = new Image();
replyMark10Ovr.src = "images/10_over.jpg";
function swapImgs(img, imgSet) {
//change the image source to the rollover image
eval("document.images['"+img+"'].src ="+img+imgSet+"Ovr.src");
}
</SCRIPT>
</head>
<body background="Untitled-2.jpg" ONLOAD="preloadImages();" leftmargin="200" topmargin="0" marginwidth="0" marginheight="0">
<table ALIGN=CENTER width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
<table width=600 border=0 cellpadding=0 cellspacing=0 ALIGN=CENTER>
<tr>
<td> <img src="images/1.jpg" width=120 height=78></td>
<td> <img src="images/2.jpg" name="replyMark" onMouseOver="swapImgs('replyMark','2'); swapImgs('checkMark','2');"></td>
<td> <img src="images/3.jpg" width=120 height=78></td>
<td> <img src="images/4.jpg" width=120 height=78></td>
<td> <img src="images/5.jpg" width=120 height=78></td>
</tr>
<tr>
<td> <img src="images/6.jpg" width=120 height=158></td>
<td colspan=3> <img src="images/789.jpg" width=360 height=158></td>
<td> <img src="images/10.jpg" width=120 height=158></td>
</tr>
<tr>
<td colspan=5> <img src="images/Bottom.jpg" width=600 height=243></td>
</table>
</td>
</body>
</html>

I am only trying it on Image 2, to see if it will work, so far it hasn't.

Thanks for helping me out so much. I think I am close.
ShriekForth
09-17-2002, 10:11 PM
The declarations

checkMark1Ovr = new Image();
replyMark1Ovr = new Image();

checkMark2Ovr = new Image();
replyMark2Ovr = new Image();

Are there so that we have images to work with. This will allow the pre loading of images. You could have simply changed the source of the image you wanted to work with, but when the user moused over, it would go fetch the image. The names are really arbitrary, and are problably not the best for your example.

Maybe checkMarkOriginal and checkMarkOver would have been better names, the numbers could come out as they were used to identify div tags as well.

checkMark1Ovr will replace the image titled checkMark if if you call swapImage('checkMark','1'), checkMark2Ovr will replace the image titled checkMark if you call swapImage('checkMark','2'). Probably bad names, but they woked in the original implementation.

About the error
Mr J has it right in his example, before you can set that source on the image, it need to be declared, the bit of code you posted, is setting the source of the image twice.

I usually declare the image names at teh top and then grab the images later or last on the page so that if a user were to mouse over an image before the page had comepletely loaded there would not be an error, just a blank image.

<script type="text/javascript" language="JavaScript">
// create image objects.
img2Off = new Image();
img2Off.src = "./images/2.jpg";
img2On = new Image();
img2On.src = "./images/2_over.jpg";

img3Off = new Image();
img3Off.src = "./images/3.jpg";
img3On = new Image();
img3On.src = "./images/3_over.jpg";

function swapImgs(img, imgSet) {
//change the image source to the rollover image
eval("document.images['"+img+"'].src ="+img+imgSet+".src");
}

</script>
<img src="./images/2.jpg" name="img2" onMouseOver="swapImgs('img2','On'); swapImgs('img3','Off');">
<img src="./images/3.jpg" name="img3" onMouseOver="swapImgs('img3','On'); swapImgs('img2','Off');">


That should be easier to follow.

ShriekForth
ShriekForth
09-17-2002, 10:28 PM
You cannot start a variable name with a number, and it cannot be only one number I would name it something like the second example. img1...

function preloadImages() {
if (document.images) {
img3Off = new Image()
img3Off.src="./images/3.gif";
img3On = new Image()
img3On.src="./images/3_over.gif";

img2Off = new Image()
img2Off.src="./images/2.gif";
img2On = new Image()
img2On.src="./images/2_over.gif";
/// ....
preloadFlag = true;
}
}

then use it like this in the body

<td> <img src="./images/2.gif" name="img2" onMouseOver="swapImgs('img3','On'); swapImgs('img2','Off');"></td>
<td> <img src="./images/3.gif" name="img3" width=120 height=78 onMouseOver="swapImgs('img3','Off'); swapImgs('img2','On');"></td>

ShriekForth
asatyss
09-17-2002, 11:10 PM
Ok, so now that that works, I would first liketo say thank you so much.

My next question is how to get an image in a seperate area to turn on when one of the numbered images is moused over.

For example, when Img2 is moused over, I want the mouse over effect on Img2 and I also want another image to pop up in another cell.

<SCRIPT LANGUAGE="JavaScript">

img2Off = new Image();
img2Off.src = "images/2.jpg";
img2On = new Image();
img2On.src = "images/2_over.jpg";

img3Off = new Image();
img3Off.src = "images/3.jpg";
img3On = new Image();
img3On.src = "images/3_over.jpg";

img4Off = new Image();
img4Off.src = "images/4.jpg";
img4On = new Image();
img4On.src = "images/4_over.jpg";

img6Off = new Image();
img6Off.src = "images/6.jpg";
img6On = new Image();
img6On.src = "images/6_over.jpg";

img10Off = new Image();
img10Off.src = "images/10.jpg";
img10On = new Image();
img10On.src = "images/10_over.jpg";

imgattorneysOff = new Image();
imgattorneysOff.src = "images/789.jpg";
imgattorneysOn = new Image ();
imgattorneysOn = "images/attorneys.jpg";

imgnewsOff = new Image();
imgnewsOff.src = "images/789.jpg";
imgnewsOn = new Image ();
imgnewsOn = "images/news.jpg";

imgprofileOff = new Image();
imgprofileOff.src = "images/789.jpg";
imgprofileOn = new Image ();
imgprofileOn = "images/profile.jpg";

imgservicesOff = new Image();
imgservicesOff.src = "images/789.jpg";
imgservicesOn = new Image ();
imgservicesOn = "images/services.jpg";

imgproductsOff = new Image();
imgproductsOff.src = "images/789.jpg";
imgproductsOn = new Image ();
imgproductsOn = "images/products.jpg";

function swapImgs(img, imgSet) {
//change the image source to the rollover image
eval("document.images['"+img+"'].src ="+img+imgSet+".src");
}
</SCRIPT>
</head>
<body background="Untitled-2.jpg" ONLOAD="preloadImages();" leftmargin="200" topmargin="0" marginwidth="0" marginheight="0">
<table ALIGN=CENTER width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
<table width=600 border=0 cellpadding=0 cellspacing=0 ALIGN=CENTER>
<tr>
<td> <img src="images/1.jpg" width=120 height=78></td>
<td> <img src="./images/2.jpg" name="img2" onMouseOver="swapImgs('img2','On'); swapImgs('img3','Off');

swapImgs('img4','Off'); swapImgs('img6','Off'); swapImgs('img10','Off');"></td>
<td> <img src="./images/3.jpg" name="img3" onMouseOver="swapImgs('img3','On'); swapImgs('img2','Off');

swapImgs('img4','Off'); swapImgs('img6','Off'); swapImgs('img10','Off');"></td>
<td> <img src="./images/4.jpg" name="img4" onMouseOver="swapImgs('img4','On'); swapImgs('img2','Off');

swapImgs('img3','Off'); swapImgs('img6','Off'); swapImgs('img10','Off');"></td>
<td> <img src="images/5.jpg" width=120 height=78></td>
</tr>
<tr>
<td> <img src="./images/6.jpg" name="img6" onMouseOver="swapImgs('img6','On'); swapImgs('img2','Off');

swapImgs('img3','Off'); swapImgs('img4','Off'); swapImgs('img10','Off');"></td>
<td colspan=3> <img src="images/789.jpg" width=360 height=158></td>
<td> <img src="./images/10.jpg" name="img10" onMouseOver="swapImgs('img10','On'); swapImgs('img2','Off');

swapImgs('img3','Off'); swapImgs('img4','Off'); swapImgs('img6','Off');"></td>
</tr>
<tr>
<td colspan=5> <img src="images/Bottom.jpg" width=600 height=243></td>
</table>
</td>
</body>

In the second row in the table, the middle cell, is going to have a picture that pops up when one of the other images is moused over. How do I do that? I think I need to change the eval("document.images['"+img+"'].src ="+img+imgSet+".src");
} statement, but I am not sure what to change it to.

Thank you for all of the help.
asatyss
09-18-2002, 01:28 PM
Actually, I think I need to add to that statement, not change it. Just a thought.
ShriekForth
09-18-2002, 03:02 PM
Two things...

First, some of your images are not being set with the .src properly.

imgnewsOff = new Image();
imgnewsOff.src = "images/789.jpg";
imgnewsOn = new Image ();
imgnewsOn.src = "images/news.jpg";

That will get the images ready for swapping, I am assuming those are the images that will be filling the center graphic.

Second, in order to swap those images you will need a slightly modified function and that center image is going to need a name, mainImg will work just. The function would could be called swapMain

function swapMain(img,imgSet) {
eval("document.images['mainImg'].src = "+img+imgSet+".src");
}

Now just call swapMain on the image you want to trigger it, and give it the name of the image you want to replace 789.jpg with.
swapMain('imgprofile','On'); or swapMain('imgservices','On'); .

If you want to leave that space empty when the page first loads you would need to be able to write dynamicly to the table. Or the easy way would be to simply have a transparent spacer image be there first. Unless of sourse you are using 789 to hold that space anyway.

ShriekForth
asatyss
09-18-2002, 03:06 PM
Originally posted by ShriekForth

If you want to leave that space empty when the page first loads you would need to be able to write dynamicly to the table. Or the easy way would be to simply have a transparent spacer image be there first. Unless of sourse you are using 789 to hold that space anyway.

ShriekForth Yeah, I am using 798.jpg to hold that space. So, can I just leave it there?
Mr J
09-18-2002, 03:10 PM
Have a play with the following, change pic1 etc. in the image src to your own and the images in the array.

If this is something like what you are after further help/instructions can be given.



<HTML>
<HEAD>
<TITLE>Our Law Firm</TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--
var pics = new Array()// list Images
pics[pics.length]="pic0.gif"
pics[pics.length]="pic2.gif"
pics[pics.length]="pic3.gif"
pics[pics.length]="pic4.gif"
pics[pics.length]="pic5.gif"
pics[pics.length]="pic7.gif"
pics[pics.length]="pic8.gif"
pics[pics.length]="pic1.gif"

var preloadpics=new Array() // preloads Images
for (i=0;i<=pics.length-1;i++) {
preloadpics[i]=new Image()
preloadpics[i].src=pics[i]
}

function qwe(n,n2,img,img2){
eval("document.images['"+n+"'].src ='"+img+"'");
eval("document.images['"+n2+"'].src ='"+img2+"'");
}

// -->
</SCRIPT>
</head>
<body background="Untitled-2.jpg"> <center>
<table border=0>
<tr>
<td><img name="Image1" src="pic1.gif" width=120 height=78 onmouseover="qwe('Image1','Image9',pics[0],pics[0])" onmouseout="qwe('Image1','Image9',pics[7],pics[7])"></td>
<td><img name="Image2" src="pic1.gif" width=120 height=78 onmouseover="qwe('Image2','Image3',pics[1],pics[1])" onmouseout="qwe('Image2','Image3',pics[7],pics[7])"></td>
<td><img name="Image3" src="pic1.gif" width=120 height=78 onmouseover="qwe('Image3','Image4',pics[2],pics[2])" onmouseout="qwe('Image3','Image4',pics[7],pics[7])"></td>
</tr>
<tr>
<td><img name="Image4" src="pic1.gif" width=120 height=78 onmouseover="qwe('Image4','Image8',pics[3],pics[3])" onmouseout="qwe('Image4','Image8',pics[7],pics[7])"></td>
<td><img name="Image5" src="pic1.gif" width=120 height=78 onmouseover="qwe('Image5','Image6',pics[4],pics[4])" onmouseout="qwe('Image5','Image6',pics[7],pics[7])"></td>
<td><img name="Image6" src="pic1.gif" width=120 height=78 onmouseover="qwe('Image6','Image1',pics[5],pics[5])" onmouseout="qwe('Image6','Image1',pics[7],pics[7])"></td>
</tr>
<tr>
<td><img name="Image7" src="pic1.gif" width=120 height=78 onmouseover="qwe('Image1','Image4',pics[6],pics[6])" onmouseout="qwe('Image1','Image4',pics[7],pics[7])"></td>
<td><img name="Image8" src="pic1.gif" width=120 height=78 onmouseover="qwe('Image2','Image5',pics[3],pics[4])" onmouseout="qwe('Image2','Image5',pics[7],pics[7])"></td>
<td><img name="Image9" src="pic1.gif" width=120 height=78 onmouseover="qwe('Image3','Image7',pics[1],pics[5])" onmouseout="qwe('Image3','Image7',pics[7],pics[7])"></td>
</tr>
</table>
</center>

<P>&lt;img name="<font color="#FF0000">Image1</font>" src="<b>pic1.gif</b>" width=120 height=78 onmouseover="qwe('<font color="#FF0000">Image1</font>','<font color="#FF00FF">Image2</font>',pics[1],pics[1])" onmouseout="qwe('<font color="#FF0000">Image1</font>','<font color="#FF00FF">Image2</font>',pics[7],pics[7])"&gt;

<P>&lt;img name="<font color="#FF00FF">Image2</font>" src="<b>pic1.gif</b>" width=120 height=78 onmouseover="qwe('<font color="#FF00FF">Image2</font>','Image3',pics[2],pics[2])" onmouseout="qwe('<font color="#FF00FF">Image2</font>','Image3',pics[7],pics[7])"&gt;

</body>
</html>
ShriekForth
09-18-2002, 03:19 PM
Yes, you can leave it in place, the swapMain will just replace it with one of the others. You could use onMouseOut to swap it back if you only wanted it momentary.

ShriekForth
asatyss
09-18-2002, 03:21 PM
So, is this where I should be?


(The rest of the images above)
img15Off = new Image();
img15Off.src = "images/789.jpg";
img15On = new Image ();
img15On.src = "images/products.jpg";

mainImg = new Image();
mainImg.src = "images/789.jpg";

function swapImgs(img, imgSet) {
//change the image source to the rollover image
eval("document.images['"+img+"'].src ="+img+imgSet+".src");
}

function swapMain(img,imgSet) {
//change the main image to the corresponding rollover image
eval("document.images['mainImg'].src = "+img+imgSet+".src");
}


</SCRIPT>
</head>
<body background="Untitled-2.jpg" ONLOAD="preloadImages();" leftmargin="200" topmargin="0" marginwidth="0" marginheight="0">
<table ALIGN=CENTER width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
<table width=600 border=0 cellpadding=0 cellspacing=0 ALIGN=CENTER>
<tr>
<td> <img src="images/1.jpg" width=120 height=78></td>
<td> <img src="./images/2.jpg" name="img2"
onMouseOver="swapImgs('img2','On'); swapMain ('img13','On'); swapImgs('img3','Off'); swapImgs('img4','Off'); swapImgs('img6','Off'); swapImgs('img10','Off'); swapImgs('img11','Off'); swapImgs('img12','Off'); swapImgs('img14','Off'); swapImgs('img15','Off');"
onMouseOut="swapImgs('img2','Off'); swapImgs('img3','Off'); swapImgs('img4','Off'); swapImgs('img6','Off'); swapImgs('img10','Off');"></td>
ShriekForth
09-18-2002, 03:26 PM
I think that would only confuse the issue. Name it on the image

<td colspan=3> <img src="images/spacer.gif" width=360 height=158 name="mainImg"></td>

ShriekForth
asatyss
09-18-2002, 09:13 PM
Ok, first, I would like to thank you guys for helping me so much. All of the mouseover stuff works now and it looks great!!:thumbsup:

Now, I still have a couple of questions.

First, There is an error somewhere in the code, and for the life of me, I cannot find it. If you could help me figure it out, that woudl be great.

Second, I am having trouble getting my table to align in the center of the page. Right now I just have the left margin set so that it will hold it out to the center area, but I can't get it just to center.

Here is the code:

<HTML>
<HEAD>
<TITLE>Our Law Firm</TITLE>

<SCRIPT LANGUAGE="JavaScript">

img2Off = new Image();
img2Off.src = "images/2.jpg";
img2On = new Image();
img2On.src = "images/2_over.jpg";

img3Off = new Image();
img3Off.src = "images/3.jpg";
img3On = new Image();
img3On.src = "images/3_over.jpg";

img4Off = new Image();
img4Off.src = "images/4.jpg";
img4On = new Image();
img4On.src = "images/4_over.jpg";

img6Off = new Image();
img6Off.src = "images/6.jpg";
img6On = new Image();
img6On.src = "images/6_over.jpg";

img10Off = new Image();
img10Off.src = "images/10.jpg";
img10On = new Image();
img10On.src = "images/10_over.jpg";

img11Off = new Image();
img11Off.src = "images/789.jpg";
img11On = new Image ();
img11On.src = "images/attorneys.jpg";

img12Off = new Image();
img12Off.src = "images/789.jpg";
img12On = new Image ();
img12On.src = "images/news.jpg";

img13Off = new Image();
img13Off.src = "images/789.jpg";
img13On = new Image ();
img13On.src = "images/profile.jpg";

img14Off = new Image();
img14Off.src = "images/789.jpg";
img14On = new Image ();
img14On.src = "images/services.jpg";

img15Off = new Image();
img15Off.src = "images/789.jpg";
img15On = new Image ();
img15On.src = "images/products.jpg";

function swapImgs(img, imgSet) {
//change the image source to the rollover image
eval("document.images['"+img+"'].src ="+img+imgSet+".src");
}

function swapMain(img,imgSet) {
//change the main image to the corresponding rollover image
eval("document.images['mainImg'].src = "+img+imgSet+".src");
}


</SCRIPT>
</head>
<body background="images/Untitled-2.jpg" ONLOAD="preloadImages();" leftmargin="200" topmargin="0" marginwidth="0" marginheight="0">
<table ALIGN=CENTER width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
<table width=600 border=0 cellpadding=0 cellspacing=0 ALIGN=CENTER>
<tr>

<td> <img src="images/1.jpg" width=120 height=78></td>

<td> <img src="./images/2.jpg" name="img2"
onMouseOver="swapImgs('img2','On'); swapMain ('img13','On'); swapImgs('img3','Off'); swapImgs('img4','Off'); swapImgs('img6','Off'); swapImgs('img10','Off'); swapImgs('img11','Off'); swapImgs('img12','Off'); swapImgs('img13','On'); swapImgs('img14','Off'); swapImgs('img15','Off');"
onMouseOut="swapImgs('img2','Off'); swapMain ('img13','Off'); swapImgs('img3','Off'); swapImgs('img4','Off'); swapImgs('img6','Off'); swapImgs('img10','Off');"></td>

<td> <img src="./images/3.jpg" name="img3"
onMouseOver="swapImgs('img3','On'); swapMain('img14','On'); swapImgs('img2','Off'); swapImgs('img4','Off'); swapImgs('img6','Off'); swapImgs('img10','Off'); swapImgs('img11','Off'); swapImgs('img12','Off'); swapImgs('img13','Off'); swapImgs('img15','Off');"
onMouseOut="swapImgs('img2','Off'); swapMain ('img14','Off'); swapImgs('img3','Off'); swapImgs('img4','Off'); swapImgs('img6','Off'); swapImgs('img10','Off');"></td>

<td> <img src="./images/4.jpg" name="img4"
onMouseOver="swapImgs('img4','On'); swapMain ('img15','On'); swapImgs('img2','Off'); swapImgs('img3','Off'); swapImgs('img6','Off'); swapImgs('img10','Off'); swapImgs('img11','Off'); swapImgs('img12','Off'); swapImgs('img13','On'); swapImgs('img14','Off'); swapImgs('img15','Off');"
onMouseOut="swapImgs('img2','Off'); swapMain ('img15','Off'); swapImgs('img3','Off'); swapImgs('img4','Off'); swapImgs('img6','Off'); swapImgs('img10','Off');"></td>

<td> <img src="images/5.jpg" width=120 height=78></td>
</tr>
<tr>
<td> <img src="./images/6.jpg" name="img6"
onMouseOver="swapImgs('img6','On'); swapMain ('img11','On'); swapImgs('img2','Off'); swapImgs('img3','Off'); swapImgs('img4','Off'); swapImgs('img10','Off'); swapImgs('img11','Off'); swapImgs('img12','Off'); swapImgs('img13','On'); swapImgs('img14','Off'); swapImgs('img15','Off');"
onMouseOut="swapImgs('img2','Off'); swapMain ('img11','Off'); swapImgs('img3','Off'); swapImgs('img4','Off'); swapImgs('img6','Off'); swapImgs('img10','Off');"></td>

<td colspan=3> <img src="images/789.jpg" width=360 height=158 name="mainImg"></td>

<td> <img src="./images/10.jpg" name="img10"
onMouseOver="swapImgs('img10','On'); swapMain ('img12','On'); swapImgs('img2','Off'); swapImgs('img3','Off'); swapImgs('img4','Off'); swapImgs('img6','Off'); swapImgs('img11','Off'); swapImgs('img12','Off'); swapImgs('img13','On'); swapImgs('img14','Off'); swapImgs('img15','Off');"
onMouseOut="swapImgs('img2','Off'); swapMain ('img12','Off'); swapImgs('img3','Off'); swapImgs('img4','Off'); swapImgs('img6','Off'); swapImgs('img10','Off');"></td>
</tr>
<tr>
<td colspan=5> <img src="images/Bottom.jpg" width=600 height=243></td>
</tr>
</table>
</td>
</body>
</html>
asatyss
09-18-2002, 09:23 PM
Ok, fixed the error problem, had too much leftover code.

But I still have the center problem.
ShriekForth
09-18-2002, 09:23 PM
The error is easy, you still have ONLOAD="preloadImages();" in yout body tag, that is calling preloadimages, that does not exist anymore. remove the onload. The center can be done serveral ways, I would just wrap it in a div.

<body background="images/Untitled-2.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
....
....
</div>
</body>

ShriekForth
asatyss
09-18-2002, 09:26 PM
The div didn't work for some reason, it is still against the left margin.
ShriekForth
09-18-2002, 09:47 PM
You removed the leftmargin="200" and have the div outside

<body background="images/Untitled-2.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<table width=600 border=0 cellpadding=0 cellspacing=0 ALIGN=CENTER>
<tr>

.. contents

</tr>
</table>
</div>
</body>
</html>


it did not work? IT looks like it's working to me in Mozilla, NS6, Ie5.5, and NS 4.78. In mine I did remove that very outside table with the single cell that is the width of the table.

ShriekForth
asatyss
09-18-2002, 09:47 PM
Actually, it worked, I figured it out.

Thank You So Much For Your Help!