PDA

Click to See Complete Forum and Search --> : HELP!! External Javascript file not working

HotShot
07-22-2003, 12:05 PM
Here is my external javascript file:
(external.js)

----------------------------------------------

pic1Off= new Image(100,40);
pic1Off.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Baby Paintbrush Link_Off.gif";


pic1Over= new Image(100,40);
pic1Over.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Baby Paintbrush Link_Over.gif";




pic2Over= new Image(100,40);
pic2Over.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Fire and Ice Blade Link_Over.gif";

pic2Off= new Image(100,40);
pic2Off.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Fire and Ice Blade Link_Off.gif";



pic3Over= new Image(100,40);
pic3Over.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Bottled Light Faerie Link_Over.gif";

pic3Off= new Image(100,40);

pic3Off.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Bottled Light Faerie Link_Off.gif";




pic4Over= new Image(100,40);
pic4Over.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Neopian Times Link_Over.gif";

pic4Off= new Image(100,40);

pic4Off.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Neopian Times Link_Off.gif";





pic5Over= new Image(100,40);
pic5Over.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Jelly Table Link_Over.gif";

pic5Off= new Image(100,40);

pic5Off.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Jelly Table Link_Off.gif";





pic6Over= new Image(100,40);
pic6Over.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Codestone Link_Over.gif";

pic6Off= new Image(100,40);

pic6Off.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Codestone Link_Off.gif";



pic7Over= new Image(100,40);
pic7Over.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Aisha Plushie Link_Over.gif";

pic7Off= new Image(100,40);

pic7Off.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Aisha Plushie Link_Off.gif";




pic8Over= new Image(100,40);
pic8Over.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/!Games!_Over.gif";

pic8Off= new Image(100,40);

pic8Off.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/!Games!_Off.gif";




pic9Over= new Image(100,40);
pic9Over.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/MilkChocolateSkeith_Over.gif";

pic9Off= new Image(100,40);

pic9Off.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/MilkChocolateSkeith_Off.gif";




pic10Over= new Image(100,40);

pic10Over.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Cool Negg Link_Over.gif";

pic10Off= new Image(100,40);

pic10Off.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Cool Negg Link_Off.gif";




pic11Over= new Image(100,40);

pic11Over.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Moneybag Link_Over.gif";

pic11Off= new Image(100,40);

pic11Off.src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Moneybag Link_Off.gif";




function imgOver(thisImg)
{
document[thisImg].src = "SideBarLinks/" + thisImg
+ "_Over.gif"
}


function imgOut(thisImg)
{
document[thisImg].src = "SideBarLinks/" + thisImg
+ "_Off.gif"
}


---------------------------------------------------------

This is what i'm trying to do:
I want 11 rollover buttons and I want them to be linked to an external javascript file (above) that tells them to change.

Here is my file with the buttons:

---------------------------------------------------------
<html>
<head>
<title>Winners Palace Guild Webpage</title>
<link rel="STYLESHEET" type="text/css" href="Style_Sheet.css" title="Style_Sheet" />

<meta name="description"
content="A Neopets guild where we have Give-Aways, Contests, Tips and members that are always willing to help! Join our guild, The Winners Palace Guild, and receive a FREE plushie and item." />

<meta name="keywords"
content="Neopets Guilds, Neopets, Guild, Neopet, Neopets Tips, Contests, Guild Active Members, Neopet Tip" />


<SCRIPT SRC="external.js" LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">
<!--

function imgOver() {
}

function imgOut() {
}

//-->
</SCRIPT>
</head>


<BODY>


<img src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Nav Bar.gif"><br />


<a href="http://www.freewebs.com/winnerspalaceguild/index.htm" onMouseover="imgOver('pic1')" onMouseout="imgOut('pic1')">
<img src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Baby Paintbrush Link_Off.gif" name="pic1" ALT="Home"></a><br />

<a
href="http://neopets.com/guilds/guild.phtml?oid=xtraneoman" target="_blank" onMouseover="imgOver('pic2')" onMouseout="imgOut('pic2')">
<img src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Fire and Ice Blade Link_Off.gif" name="pic2" ALT="Guild"></a><br />

<a
href="http://www.freewebs.com/winnerspalaceguild/Contests.htm" onMouseover="imgOver('pic3')" onMouseout="imgOut('pic3')">
<img src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Bottled Light Faerie Link_Off.gif" name="pic3" ALT="Contests"></a><br />

<a
href="http://www.freewebs.com/winnerspalaceguild/Tips.htm" onMouseover="imgOver('pic4')" onMouseout="imgOut('pic4')">
<img src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Neopian Times Link_Off.gif" name="pic4" ALT="Tips"></a><br />

<a
href="http://www.freewebs.com/winnerspalaceguild/Restaurant.htm" onMouseover="imgOver('pic5')" onMouseout="imgOut('pic5')">
<img src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Jelly Table Link_Off.gif" name="pic5" ALT="Restaurant"></a><br />

<a
href="http://www.neopets.com/browseshop.phtml?owner=winnerspalaceguild" target="_blank" onMouseover="imgOver('pic6')" onMouseout="imgOut('pic6')">
<img src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Codestone Link_Off.gif" name="pic6" ALT="Guild Shop"></a><br />

<a
href="http://www.freewebs.com/winnerspalaceguild/Give-Aways.htm" onMouseover="imgOver('pic7')" onMouseout="imgOut('pic7')">
<img src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Aisha Plushie Link_Off.gif" name="pic7" ALT="Give-Aways"></a><br />

<a
href="http://www.freewebs.com/winnerspalaceguild/Games.htm" onMouseover="imgOver('pic8')" onMouseout="imgOut('pic8')">
<img src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/!Games!_Off.gif" name="pic8" ALT="Games"></a><br />

<a href="http://www.freewebs.com/winnerspalaceguild/jobs.htm" onMouseover="imgOver('pic9')" onMouseout="imgOut('pic9')">
<img src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/MilkChocolateSkeith_Off.gif" name="pic9" ALT="Jobs"></a><br />

<a href="http://www.freewebs.com/winnerspalaceguild/Banners.htm" onMouseover="imgOver('pic10')" onMouseout="imgOut('pic10')">
<img src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Cool Negg Link_Off.gif" name="pic10" ALT="Banners"></a><br />

<a href="http://www.freewebs.com/winnerspalaceguild/Diamond Points.htm" onMouseover="imgOver('pic11')" onMouseout="imgOut('pic11')">
<img src="http://www.freewebs.com/winnerspalaceguild/SideBarLinks/Moneybag Link_Off.gif" name="pic11" ALT="Diamond Points"></a><br />

</BODY>
</html>

---------------------------------------------------------

THANKS SOOOO MUCH TO ANY1 THAT CAN HELP
havik
07-22-2003, 01:11 PM
The problem lies in what your sending to your functions.
Example:
imgOver('pic5')

for the function
function imgOver(thisImg)
{
document[thisImg].src = "SideBarLinks/" + thisImg
+ "_Over.gif"
}

So, that means that the variable thisImg gets "pic5", and therefore:
document[pic5].src = "SideBarLinks/pic5/_Over.gif";

Is that the name of the image that is to be swapped on over?

Take a look at this example for the proper procedure:
http://www.dynamicdrive.com/dynamicindex15/domroll.htm

Havik
HotShot
07-22-2003, 01:23 PM
I'm trying to switch "SideBarLinks/Baby Paintbrush Link_Off.gif" with "SideBarLinks/Baby Paintbrush Link_Over.gif" on Mouse over and "SideBarLinks/Baby Paintbrush Link_Over.gif" with "SideBarLinks/Baby Paintbrush Link_Off.gif" on Mouse out, if that answers your question
havik
07-22-2003, 01:33 PM
I know what your trying to do and I've found a better example:
http://www.dejeu.com/web/tools/tech/js/rollovers/rollovers_nocache-f.asp

View the source and take a look at how they have implemented their image rollover effect. It's really easy to integrate the functionality into your script. Try it but if you do require assistance, let me know.

Havik
HotShot
07-22-2003, 06:30 PM
(Still didn't get it)OK here is my "external.js" file now:

--------------------------------------------------------------

<SCRIPT LANGUAGE="JavaScript">
if (document.images) {
// define variables to hold the "up" and "over" images
var Image1_up = new Image(100,40)
var Image1_over = new Image(100,40)
var Image2_up = new Image(100,40)
var Image2_over = new Image(100,40)
var Image3_up = new Image(100,40)
var Image3_over = new Image(100,40)
var Image4_up = new Image(100,40)
var Image4_over = new Image(100,40)
var Image5_up = new Image(100,40)
var Image5_over = new Image(100,40)
var Image6_up = new Image(100,40)
var Image6_over = new Image(100,40)
var Image7_up = new Image(100,40)
var Image7_over = new Image(100,40)
var Image8_up = new Image(100,40)
var Image8_over = new Image(100,40)
var Image9_up = new Image(100,40)
var Image9_over = new Image(100,40)
var Image10_up = new Image(100,40)
var Image10_over = new Image(100,40)
var Image11_up = new Image(100,40)
var Image12_over = new Image(100,40)

// assign images to the SRC properties of new variables
// this is when they are all loaded into memory,
// before the page is loaded
Image1_up.src = "/SideBarLinks/Baby%20Paintbrush%20Link%5FOff.gif.gif"
Image1_over.src = "/SideBarLinks/Baby%20Paintbrush%20Link%5FOver.gif"
Image2_up.src = "/SideBarLinks/Fire%20and%20Ice%20Blade%20Link%5FOff.gif"
Image2_over.src = "/SideBarLinks/Fire%20and%20Ice%20Blade%20Link%5FOver.gif"
Image3_up.src = "/SideBarLinks/Bottled%20Light%20Faerie%20Link%5FOff.gif"
Image3_over.src = "/SideBarLinks/Bottled%20Light%20Faerie%20Link%5FOver.gif"
Image4_up.src = "/SideBarLinks/Neopian%20Times%20Link%5FOff.gif"
Image4_over.src = "/SideBarLinks/Neopian%20Times%20Link%5FOver.gif"
Image5_up.src = "/SideBarLinks/Jelly%20Table%20Link%5FOff.gif"
Image5_over.src = "/SideBarLinks/Jelly%20Table%20Link%5FOver.gif"
Image6_up.src = "/SideBarLinks/Codestone%20Link%5FOff.gif"
Image6_over.src = "/SideBarLinks/Codestone%20Link%5FOver.gif"
Image7_up.src = "/SideBarLinks/Aisha%20Plushie%20Link%5FOff.gif"
Image7_over.src = "/SideBarLinks/Aisha%20Plushie%20Link%5FOver.gif"
Image8_up.src = "/SideBarLinks/%21Games%21%5FOff.gif"
Image8_over.src = "/SideBarLinks/%21Games%21%5FOver.gif"
Image9_up.src = "/SideBarLinks/MilkChocolateSkeith%5FOff.gif"
Image9_over.src = "/SideBarLinks/MilkChocolateSkeith%5FOver.gif"
Image10_up.src = "/SideBarLinks/Cool%20Negg%20Link%5FOff.gif"
Image10_over.src = "/SideBarLinks/Cool%20Negg%20Link%5FOver.gif"
Image11_up.src = "/SideBarLinks/Moneybag%20Link%5FOff.gif"
Image11_over.src = "/SideBarLinks/Moneybag%20Link%5FOver.gif"
}

// function that swaps images

function di(id,name){
if (document.images) document.images[id].src=eval(name+".src");
}


// stop hiding -->
</SCRIPT>

----------------------------------------------------------------

And Here is what my rollover page looks like (note: the picture doesnt even show up (the normal pic.) when the page loads anymore, its just a "x" with a box around it.):

---------------------------------------------------------------



<html>
<head>
<title>Winners Palace Guild Webpage</title>
<link rel="STYLESHEET" type="text/css" href="Style_Sheet.css" title="Style_Sheet" />

<meta name="description"
content="A Neopets guild where we have Give-Aways, Contests, Tips and members that are always willing to help! Join our guild, The Winners Palace Guild, and receive a FREE plushie and item." />

<meta name="keywords"
content="Neopets Guilds, Neopets, Guild, Neopet, Neopets Tips, Contests, Guild Active Members, Neopet Tip" />


<script src="http://freewebs.com/winnerspalaceguild/external.js" type="text/javascript" language="JavaScript">
</script>
</head>

<BODY>

<A HREF="index.htm"
onMouseOver="di('BabyPaintBrushLink_Off', 'Image1_over'); return true"
onMouseOut="di('BabyPaintBrushLink_Off', 'Image1_up'); return true"><IMG
SRC="/SideBarLinks/Baby%20Paintbrush%20Link%5FOff.gif" WIDTH="100" HEIGHT="40" NAME="BabyPaintBrushLink_Off" BORDER="0"></A>


</BODY>
</html>


-------------------------------------------------------------

NOTE: I left out the other 10 rollover/link images to save reading time

And Yet again, if any1 can help it would be wonderful!!!
If you want to know my problem it is: I want to have an external javascript file (external.js, which i made (the coding is at the top)) that makes 11 images rollover (on a different page), but there are always errors.