Can someone help me with a javascript/HTML question??

Electric Amish

Elite Member
Oct 11, 1999
23,578
1
0
<A HREF="../President_s_Message/president_s_message.html" onMouseOver="F_roll('NavigationButton170',1)" onMouseOut="F_roll('NavigationButton170',0)"><IMG ID="NavigationButton170"
NAME="NavigationButton170" HEIGHT=23 WIDTH=101 SRC="../President_s_Message_NAltProfessional_up.gif" onLoad="F_loadRollover(this,'President_s_Message_NRAltProfessional_over.gif')" BORDER=0 ALT="Pres. Message"></A>

Can someone explain this Rollover button code for me?

...particularly what the 'NavigationButton170' refers too.

TIA

amish
 

konichiwa

Lifer
Oct 9, 1999
15,077
2
0
F_Roll should be a function defined earlier or later in the javascript. NavigationButton170 is most likely the name of the button but because it's what's given to the function F_Roll and since F_Roll was defined by the coder, it could be anything.
 

Kev

Lifer
Dec 17, 2001
16,367
4
81
NAME="NavigationButton170"

NavigationButton170 refers to the name of the image. You would need to have the F_roll code to see exactly what this does...
 

Electric Amish

Elite Member
Oct 11, 1999
23,578
1
0
Yeah, that's what I thought, only there aren't any buttons with those names... :(

Here's the script...

// Handles rollover images for NN3+ and IE4+
var loaded = new Array();

function F_loadRollover(image,imageName) {
if (image && image.src &&
(null == image.out || typeof(image.out) == typeof(void(0)))) {
s = image.src;
image.out = new Image();
image.out.src = s;
image.over = new Image();
if (imageName.lastIndexOf('/') >= 0 || imageName.lastIndexOf('\\') >= 0) {
s = imageName;
} else {
i = s.lastIndexOf('/');
if (i<0) i = s.lastIndexOf('\\');
if (i<0) { s = imageName; }
else { s = s.substring(0,i+1) + imageName; }
}
image.over.src = s;
loaded[image.name] = image;
}
}
function F_roll(imageName,over) {
if (document.images) {
if (over) { imageObject = "over"; }
else { imageObject = "out"; }
image = loaded[imageName];
if (image) {
ref = eval("image."+imageObject);
if (ref) image.src = eval("image."+imageObject+".src");
}
if (window.event)
window.event.cancelBubble = true;
}
}

 

Electric Amish

Elite Member
Oct 11, 1999
23,578
1
0


<< <IMG ID="NavigationButton170" NAME="NavigationButton170" >>



What do you mean?

There are 4 images related to each button. For the one I listed the images are:

President_s_Message_NAltProfessional_up.gif
President_s_Message_HAltProfessional_down.gif
President_s_Message_HRAltProfessional_over.gif
President_s_Message_NRAltProfessional_over.gif

amish
 

Kev

Lifer
Dec 17, 2001
16,367
4
81
Here's a fun snippet of code. This is the code Dreamweaver generates for rollovers:


<script language="JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
 

Electric Amish

Elite Member
Oct 11, 1999
23,578
1
0
Can anyone explain this more??

I don't see how the 'NavigationButton170' gets associated with the different .gif files.

Thanks,

Amish
 

konichiwa

Lifer
Oct 9, 1999
15,077
2
0
What I pasted was an example of an image that has been named NavigationButton170. Hence NAME=NavigationButton170
 

Electric Amish

Elite Member
Oct 11, 1999
23,578
1
0
How does it know which .gif to name as NavigationButton170? There are 20+ .gif files in the directory.

amish <-- confused...
 

Electric Amish

Elite Member
Oct 11, 1999
23,578
1
0
Also does the "170" mean anything special? On the index.html page the numbers start out at 137, 138, etc for each button down the side of the navigation bar.

The next page starts off where the first page left off with numbering and so on...

Hmmm...

Here's the actual page...

amish
 

Kev

Lifer
Dec 17, 2001
16,367
4
81


<< Also does the "170" mean anything special? On the index.html page the numbers start out at 137, 138, etc for each button down the side of the navigation bar.

The next page starts off where the first page left off with numbering and so on...

Hmmm...

Here's the actual page...

amish
>>



wow all that javascript for such a lousy effect...
 

konichiwa

Lifer
Oct 9, 1999
15,077
2
0
<IMG ID="NavigationButton170" NAME="NavigationButton170" HEIGHT=23 WIDTH=101 SRC="../President_s_Message_NAltProfessional_up.gif" onLoad="F_loadRollover(this,'President_s_Message_NRAltProfessional_over.gif')" BORDER=0 ALT="Pres. Message">

It's all in there ... name is NavigationButton170 (and no 170 means nothing, it's just the name) SRC= "bla bla...President_s_Message_Nalt_Professional_up.gif"
 

kgraeme

Diamond Member
Sep 5, 2000
3,536
0
0
Okay, I'm paraphrasing your code here:

<IMG ID="NavigationButton170" NAME="NavigationButton170" HEIGHT=23 WIDTH=101 SRC="../President_s_Message_NAltProfessional_up.gif">

Breaking it down:

SRC="../President_s_Message_NAltProfessional_up.gif"
This refers to the actual filename of the image.

ID="NavigationButton170" NAME="NavigationButton170"
This defines the "name" and "id" of the button for the Document Object Model (DOM). The DOM is what JavaScript uses to refer to any object on the page. Without defining a DOM name for the image, JavaScript wouldn't know what to do with it.

So what you have basically said here is:
The file President_s_Message_NAltProfessional_up.gif is called NavigationButton170.

Make sense?

Also I noticed that your code HEIGHT=23 WIDTH=101 is slightly invalid. It should have quotes around the numerical values. Some browsers WILL choke on that mistake.
 

Electric Amish

Elite Member
Oct 11, 1999
23,578
1
0
I didn't write the code ;) That's why I'm trying to figure it out.

So the script is making the association in the HTML call.

So is there a reason why each button on each page has a different number associated with it?? It would seem that you could use the same range of numbers for each page.

Thanks for the help.

amish
 

kgraeme

Diamond Member
Sep 5, 2000
3,536
0
0
Yes you could reuse the numbers on each page. They don't even need to be numbered, they just need to be a unique name from any other picture on the page (DOM name not filename).

One reason why they may have incremented the number is to allow cut/paste code from page to page. Just a guess.