HTML Goodie's Dual Image Flip Script

[Arqueete]

I was going to bug the guys at my host's support forum for help, but I decided they need a break from me. So now you get me and my usually easily solved problems. Woohoo.

Anyway, I'm using the Dual Image flip script from HTMLGoodies much to my dismay (I like doing things myself, having to ask for help is very humbling ), which is supposed to
1. Change the buttons on mouse over
and
2. Change another image (In my case the picture frame) when you hover over one of the buttons.

My page does neither X_x I've tried to follow their direction best I could, and I just can't see why it's not working, and I've no idea what might be causing this problem (Bet you just love questions like these, eh?).

Here's my page: http://stellmond.bravepages.com/testing.html

I modified the code to try and get it to work with my four buttons, but I've also tried narrowing it down to two like it has it on HTMLGoodie's page, and still no success

Page with two buttons: http://stellmond.bravepages.com/testing2.html

When you put your mouse over one of the buttons, the status bar says there's an error, but I'm having problems understanding what it's trying to tell me.

Any suggestions are appreciated by me and my little sister who I forced to run around the yard in a cape for a few hours, much to her annoyance, to get that perfect picture to use as part of this script, and would be very upset if all that work was for nothing. Thanks in advance >.<

Edit: I guess I'll post the code too, I wasn't thinking too since the codes dealing with those images take up about 80% of the page, but I guess it might be easier to look at this way. Lesse how these tags work, I'm not used to this board...

<script type="javascript">

//Below is the code that pre-loads the graphics 
{

//These are the large images
alt0 = new Image();
alt0.src = "/images/frame/castle.gif";

alt1 = new Image();
alt1.src = "/images/frame/newbies.gif";

alt2 = new Image();
alt2.src = "/images/frame/school.gif";

alt3 = new Image();
alt3.src = "/images/frame/site.gif";

alt4 = new Image();
alt4.src = "/images/frame/news.gif";

//These are the first button graphics

graphic1= new Image();
graphic1.src = "/images/buttons/newbies.gif";
graphic1on = new Image();
graphic1on.src = "/images/buttons/newbies2.gif";

//These are the second button graphics 

graphic2= new Image();
graphic2.src = "/images/buttons/school.gif";
graphic2on = new Image();
graphic2on.src = "/images/buttons/school2.gif";

graphic3= new Image();
graphic3.src = "/images/buttons/site.gif";
graphic3on = new Image();
graphic3on.src = "/images/buttons/site2.gif";

graphic4= new Image();
graphic4.src = "/images/buttons/news.gif";
graphic4on = new Image();
graphic4on.src = "/images/buttons/news2.gif";

//This is the function that calls for
//the change in the buttons 

}
function imageChange(imageID,imageName,imageID2,imageName2) { 

{
document.images[imageID].src = eval(imageName + ".src");
document.images[imageID2].src = eval(imageName2 + ".src");
}

}
</script> 

That's in the head.
And here's where the stuff actually displays in the page:

<table><tr><td><a href="/char.html" onMouseOver="imageChange('global','alt1','one','graphic1on')" onMouseOut="imageChange('global','alt0','one','graphic1')"><img src="/images/buttons/newbies.gif" name="one" /></a>&nbsp;&nbsp;&nbsp;

<a href="http://www.javagoodies.com" onMouseOver="imageChange('global','alt2','two','graphic2on')" onMouseOut="imageChange('global','alt0','two','graphic2')">
<img src="/images/buttons/school.gif" name="two" /></a></td><td>&nbsp;&nbsp;&nbsp;

<a href="http://www.javagoodies.com" onMouseOver="imageChange('global','alt3','three','graphic3on')" onMouseOut="imageChange('global','alt0','three','graphic3')">
<img src="/images/buttons/site.gif" name="three" /></a>&nbsp;&nbsp;&nbsp;

<a href="http://www.javagoodies.com" onMouseOver="imageChange('global','alt4','four','graphic4on')" onMouseOut="imageChange('global','alt0','four','graphic4')">
<img src="/images/buttons\news.gif" name="four" /></a>
</td><tr><td>

<img src="/images/frame/castle.gif" name="global" /></td><td>

[Tage]

No wonder it has been bothering you so much... Technically, it's not a screw up in the script or the html in the body tag... It's the <script> tag itself. The type is supposed to be "text/javascript" not "javascript". And some of those brackets(correct term? the {'s and }'s) are unnecessary. The first {, the first }, the third {, and second }. You don't have to surround the var's with brackets, and you only need to surround a function with one set of brackets. You also use brackets on statements that have more than one line of code that needs to be inside it. It wouldn't hurt adding comment tags (<!-- and -->, but inside the script tag --> would be //-->) inside your script tag so really old browsers don't see it (it's a good habbit) Your code should look like this...

<script type="text/javascript">
<!--
//Below is the code that pre-loads the graphics

//These are the large images
alt0 = new Image();
alt0.src = "/images/frame/castle.gif";

alt1 = new Image();
alt1.src = "/images/frame/newbies.gif";

alt2 = new Image();
alt2.src = "/images/frame/school.gif";

alt3 = new Image();
alt3.src = "/images/frame/site.gif";

alt4 = new Image();
alt4.src = "/images/frame/news.gif";

//These are the first button graphics

graphic1= new Image();
graphic1.src = "/images/buttons/newbies.gif";
graphic1on = new Image();
graphic1on.src = "/images/buttons/newbies2.gif";

//These are the second button graphics

graphic2= new Image();
graphic2.src = "/images/buttons/school.gif";
graphic2on = new Image();
graphic2on.src = "/images/buttons/school2.gif";

graphic3= new Image();
graphic3.src = "/images/buttons/site.gif";
graphic3on = new Image();
graphic3on.src = "/images/buttons/site2.gif";

graphic4= new Image();
graphic4.src = "/images/buttons/news.gif";
graphic4on = new Image();
graphic4on.src = "/images/buttons/news2.gif";

//This is the function that calls for
//the change in the buttons

function imageChange(imageID,imageName,imageID2,imageName2){
    document.images[imageID].src = eval(imageName + ".src");
    document.images[imageID2].src = eval(imageName2 + ".src");}
//-->
</script> 

Hope this helps, and hopefully her hard work wasn't for nothing, lol. Good luck to you all.

Tage

[Arqueete]

I knew it was something simple like that It's always just little things I miss. I don't know why I didn't think text/javascript, since style sheets are always text/css.

I never touched the brackets, they were that way when I got it... Brackets confuse me so I try and avoid touching them for fear I'll mess something up and not know what I did (Like now )

Anyway, enough of me kicking myself, I'll go see if that works. Thank you

Edit: Yaaaaaaay!

[Tage]

No problem I'll do a very quick explanation of brackets...
Use them to surround functions

function functionName(){
codeHere}

Use them to surround statements that have more than one line to enclose, like if statements

if(1==1){
doThis;
andThis}

But if there is only one line, you don't need to (..supposedly. I use them anyway )

if(1<2)onlyDoThis;

There you go.

Tage

[Arqueete]

Thanks