2 simple JS on one page won't work [Archive]

View Full Version : 2 simple JS on one page won't work

Marji

10-02-2002, 03:58 AM

Very simple JS...I just posted this one as they
are both the same only different images. They are
double rollover buttons and I need four on one page for a website. They each work fine
alone but when I put two on the same page,
only one of them works. I have read many supposed
solutions and read many forum answers but so far
none have actually told me what the answer is.
I am just learning JS and would appreciate any
help.

<script language="JavaScript" type="text/javascript">

</script>
<a href="http://www.allpwr.com/aboutus.html" onMouseover="imageRoll('rollvr','preload1','one','img1on')" onMouseout="imageRoll('rollvr','preload0','one','img1')"><img SRC="mbutton1.gif" NAME="one" ALT="click here" BORDER=0 height=51 width=157></a><img SRC="blank.gif" NAME="rollvr" ALT="click here" BORDER=0 height=40 width=150>

joh6nn

10-02-2002, 04:03 AM

wild guess here, but when you put more than one of these on a page, do you do it like this:

<script language="JavaScript" type="text/javascript">

</script>
<script language="JavaScript" type="text/javascript">

</script>

<a href="http://www.allpwr.com/aboutus.html" onMouseover="imageRoll('rollvr','preload1','one','img1on')" onMouseout="imageRoll('rollvr','preload0','one','img1')"><img SRC="mbutton1.gif" NAME="one" ALT="click here" BORDER=0 height=51 width=157></a><img SRC="blank.gif" NAME="rollvr" ALT="click here" BORDER=0 height=40 width=150>

<a href="http://www.allpwr.com/aboutus.html" onMouseover="imageRoll('rollvr','preload2','one','img2on')" onMouseout="imageRoll('rollvr','preload0','one','img2')"><img SRC="mbutton2.gif" NAME="one" ALT="click here" BORDER=0 height=51 width=157></a><img SRC="blank.gif" NAME="rollvr" ALT="click here" BORDER=0 height=40 width=150>

Marji

10-02-2002, 04:07 AM

No, I have just tried putting one in the <head>
and one in the <body>

adios

10-02-2002, 04:58 AM

Marji...

preload0, img1, etc., are variable names - they are unique identifiers and should only be used to refer to a single image in your web page. The script interpreter uses them to look up the image (object) needed. If you assign something to preload0, e.g., and then, a few lines down the HTML file - doesn't matter whether it's in the <head> or the <body> - assign something else to it, the first assignment is simply overwritten ("guess she changed her mind..."). For a start: change those appended numbers:

{ <-- lose this
preload0a = new Image();
preload0a.src = "http://www.allpwr.com/blank.gif";
preload1a = new Image();
preload1a.src = "http://www.allpwr.com/mbuttonlast.gif";
img1a= new Image();
img1a.src = "http://www.allpwr.com/mbutton1.gif";
img1aon = new Image();
img1aon.src = "http://www.allpwr.com/mbutton2.gif";
} <-- lose this

Then, in the other:

preload0b= new Image();
preload0b.src = "http://www.allpwr.com/blank.gif";
preload1b = new Image();
preload1b.src = "http://www.allpwr.com/mbuttonlast.gif";
img1b= new Image();
img1b.src = "http://www.allpwr.com/mbutton1.gif";
img1bon = new Image();
img1bon.src = "http://www.allpwr.com/mbutton2.gif

Don't forget the HTML:

<a href="http://www.allpwr.com/aboutus.html" onMouseover="imageRoll('rollvr','preload1a','one','img1aon')" onMouseout="imageRoll('rollvr','preload0a','one','img1a')">

That's just a suggestion; any naming convention which looks understandable you you (and keeps the names different) is OK.

http://www.ods.com.ua/win/eng/web-tech/js/htm/05-01.html :)

Marji

10-02-2002, 05:13 AM

Thank you Adios

I will try to see if it works now.

glenngv

10-02-2002, 06:15 AM

you don't actually need eval() as long as you passed a valid image object not a string

preload0 = new Image();
preload0.src = "http://www.allpwr.com/blank.gif";
preload1 = new Image();
preload1.src = "http://www.allpwr.com/mbuttonlast.gif";
img1= new Image();
img1.src = "http://www.allpwr.com/mbutton1.gif";
img1on = new Image();
img1on.src = "http://www.allpwr.com/mbutton2.gif";
}

function imageRoll(imgWR1,imgWN1,imgWR2,imgWN2) {
{
document.images[imgWR1].src = imgWN1.src;
document.images[imgWR2].src = imgWN2.src;
}
}
//-->
</script>
<a href="http://www.allpwr.com/aboutus.html" onMouseover="imageRoll('rollvr',preload1,'one',img1on)" onMouseout="imageRoll('rollvr',preload0,'one',img1)"><img SRC="mbutton1.gif" NAME="one" ALT="click here" BORDER=0 height=51 width=157></a><img SRC="blank.gif" NAME="rollvr" ALT="click here" BORDER=0 height=40 width=150>

Marji

10-02-2002, 06:27 AM

I am not sure what you mean, but all I wanted to
know was how to put two of these JS (same JS just
different images) on the same page so they don't conflict and will run properly. I know there is
a simple answer, but I don't know where to find it. I want to put about 4 of these buttons on a
web page and the script is the same for each button except for the images. Maybe I am not
explaining very well. Sorry.

<script language="JavaScript" type="text/javascript">

</script>
<a href="http://www.allpwr.com/aboutus.html" onMouseover="imageRoll('rollvr','preload1','one','img1on')" onMouseout="imageRoll('rollvr','preload0','one','img1')"><img SRC="mbutton1.gif" NAME="one" ALT="click here" BORDER=0 height=51 width=157></a><img SRC="blank.gif" NAME="rollvr" ALT="click here" BORDER=0 height=40 width=150>

glenngv

10-02-2002, 06:48 AM

you have excessive curly braces as adios pointed out.
try this and tell me if it works

<script language="JavaScript" type="text/javascript">

</script>
<a href="http://www.allpwr.com/aboutus.html" onMouseover="imageRoll('rollvr',preload1,'one',img1on)" onMouseout="imageRoll('rollvr',preload0,'one',img1)"><img SRC="mbutton1.gif" NAME="one" ALT="click here" BORDER=0 height=51 width=157></a><img SRC="blank.gif" NAME="rollvr" ALT="click here" BORDER=0 height=40 width=150>

Marji

10-02-2002, 07:40 AM

That works fine! It has always worked...the problem starts when I add the JS below to the
same page. Then only one of them works...I just
need to know how to add this JS to the same page.

<script language="JavaScript" type="text/javascript">

</script>

<a href="http://www.allpwr.com/products.html" onMouseover="imageRoll('rollvr','preload1','one','img1on')" onMouseout="imageRoll('rollvr','preload0','one','img1')"><img src="http://www.allpwr.com/products1.gif" width="150" height="40" border="0" name="one" alt="click here"></a> <img src="http://www.allpower.com/blank2.gif" width="150" height="40" border="0" name="rollvr" alt="click here">

glenngv

10-02-2002, 08:07 AM

can you post the whole code?

Owl

10-02-2002, 09:18 AM

Hi Marji,

Your original script works just fine.
The answer is waiting where you first asked it.

http://www.webxpertz.net/forums/showthread.php3?threadid=19446

( •) (• )
>>V