Buttons changing other buttons

[JNariss]

Hello,

This is strange to me to but it is happening and I have no idea what to
do.

Here's the problem:

I have created a website (an Intranet) which I included page content of
a navigation bar that appears on every page. Many pages contain buttons
which link to documents and other pages. After I published the site to
my web server and open it in Internet Explorer and click on a page with
buttons and scroll/hover over the buttons (like I am about to click on
one) it automatically changes the appearance of the buttons in the
navigation bar.

What is going on here?

Any help would be great b/c I have to get this website out to the
public soon.

Thanks,
Justine

 

[Steve Easton]

That's called a rollover effect, and it's to tell you that your are in a clickable area of
the button and to go ahead and click.


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed..................
...............................with a computer

 

[JNariss]

Hi Steve,

Thanks for replying but that is not what is happening. For say I have a
button on the right side of the page and my navigation bar on the left
side of the page. When I scroll over the button on the right side of
the page it changes the appearance of the buttons on the navigation bar
on the left side of the page. And then when I scroll over the
navigation buttons they start to disappear and show a box with a red X.


Do you know what is causing this?

-Justine

 

[Steve Easton]

Not without seeing it.
Is it a published web so that you can provide a link and someone can take a look??


--
Steve Easton
Microsoft MVP FrontPage
95isalive
This site is best viewed..................
...............................with a computer

 

[JNariss]

It is published on my companies web server so I can't give the link to
the public. Maybe someone else will know. Could this have something to
do with the button properties image tab. If I de-select the "create
hover image" maybe it will work then.

 

[Andrew Murray]

I assume you're using interactive buttons (FP2003)?

I've had this happen before; it is cause by the "rolled over" state of one
button, referencing the "name" of another button. It's technical and I
can't explain it properly but in simple terms, as I understand your
questions, the following is happening.

Say you have two buttons : button1 and button2, each with the three states
as below

button1-normal
button1-mouseover
button1-mousedown

button2-normal
button2-mouseover
button2-mousedown

OK, your problem I think is like, if you rollover button1, you get the
"rollover" state of "button2-mouseover" which should be "button1-mouseover",
not "button2-mouseover" correct?

Hopefully someone will now be able to point you towards a fix for this.

The thing I did when this happened to me, is just deleted all the buttons
and started over. You could get into the code and rename the "id" of the
button(s) or the "name" of the buttons or something, but if you're not that
way inclined, I'd probably just start over.

 

[Ronx]

To expandon Andrew's response, it sounds like you are using an include
file or shared borders for your buttons.
If this is the case, then ensure that the buttons have unique IDs and
names, that are not used in other files/pages.
This behaviour is demonstrated at
www.rxs-enterprises.org/fp/b/buttons/pages2/buttontest.htm

 

[JNariss]

Thanks Ronx and Andrew for the replies. I have been out sick for a few
days, but now I am back to my button fixing. It seems that I have tried
so many things. I have created a folder for all my buttons to be held
in so it makes it easier for me to search them. I think part of the
problem may have to do with my having so many buttons in that folder.

I appreciate your helping me on this. I do have a page which is
included on every page in my site for my navigation controls. I will
read over the www.rxs-enterprises.org file and see if it will help my
problem.

-Justine

 

[JNariss]

It seems like I may have solved the problem of the buttons changing to
the appearance of other buttons on the same page. BUT....now my problem
is:

The page that holds my navigation buttons (included on every page in my
site) seems to be not working properly. When I open my published site
and scroll over the navigation buttons they change to a white
background with a small red "x" on the left side and the name of the
button appears in red.

Does anyone know why this is happening or how to fix it?

And any clue as to why all these buttons are causing so many problems?

Thanks

 

[Ronx]

Is the include file in the same folder as the pages it is included in?
If not, this is the reason. The image paths are not corrected by
FrontPage when the page is included in a page not in the same folder.
A link to a faulty page will help give a more definite response.

 

[JNariss]

Ronx -

You could be onto something here. My Network Admin. had me clean up the
website and move pages into folders so they can easily access/find
information. After sorting all my created pages into folders for
specific departments the company has, I left the index.htm,
footerNavBar.htm, logo.htm(my included page), search.htm, and
tableofcontents.htm pages out. These pages simply reside in the root of
my site contents. I do have a folder that I keep all my buttons in
called Buttons. How clever right?

Should I move all these pages into that folder or shold I not have
moved pages into individual folders in the first place?

 

[Ronx]

In the long run it always pays to be organised, and separate things as
you have done.
If the include page is in the same folder as the pages it is included
in, there should not be a problem with the Interactive Buttons.
However, check in the include page (logo.htm) that all the paths to
the buttons are correct. This includes the paths in the <body
onload="... , and the onmouseover, onmouseout, onmousedown events in
the image tags - the paths should all point to a button in the buttons
folder. Putting the buttons into their own folder will not affect the
scripts, provided the paths are corrected.

In general, if you move a page or image to a different folder that is
referenced in JavaScript (which includes the event calls mentioned
above) the path to the page/image will not be updated by FrontPage.
However paths to pages/images that are directly linked will be
updated.

 

[JNariss]

I am trying one thing at a time so nothing messes up.

I left my logo.htm file in the root and all the button jpg files that
belong to it in the root as well. I then dragged and dropped it to one
of my folders using the "copy here". Then I opened up the folder and
opened up the logo.htm file in that folder and found the code to for
one of my navigation buttons. It is:

<div style="position: absolute; width: 148px; height: 30px; z-index: 4;
left: 11px; top: 178px" id="layer7">
<a href="../Company%20Policies/companypolicies.htm">
<img border="0" id="img2" src="../button4.jpg" height="30" width="150"
alt="Company Policies"
onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'../button5.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'../button4.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'../button6.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'../button5.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Company
Policies"></a></div>

So by this code it looks as if the src= is pointing to the root where
all the buttons are now residing from the logo.htm page.

Or is it not pointing to the right place? If it is correct will the
drag, drop, and copy here work for each folder once I re-publish my
site?

Oh and one more question: Each time I create 1 button it actually
creates multiple buttons. For instance the above code is for my one
navigation button called: Company Policies, but when I save that button
it saves button4.jpg, button5.jpg and button6.jpg. My site has a ton of
buttons!!! Is this normal?

Thanks again for all your amazing wisdom and help.

 

[JNariss]

I thought maybe the entire code would help so here it is:

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Left Side Navigation Bar</title>
<script language="JavaScript">
<!--
function FP_preloadImgs() {
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs=new Image;
d.FP_imgs.src=a; }
}

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array();
for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) {
doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById)
el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el)
return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes;
if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el)
return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el)
return el; } }
return null;
}
// -->
</script>
</head>

<body onload="FP_preloadImgs(/*url*/'ButtonsandPictures/button19.jpg',
/*url*/'ButtonsandPictures/button9.jpg', /*url*/'button2.jpg',
/*url*/'button3.jpg', /*url*/'button5.jpg', /*url*/'button6.jpg',
/*url*/'button8.jpg', /*url*/'button9.jpg', /*url*/'buttonB.jpg',
/*url*/'buttonC.jpg', /*url*/'buttonE.jpg', /*url*/'buttonF.jpg',
/*url*/'button11.jpg', /*url*/'button12.jpg', /*url*/'button14.jpg',
/*url*/'button15.jpg', /*url*/'button17.jpg', /*url*/'button18.jpg')">

<p>
<img border="0" src="ButtonsandPictures/EGSLogoLine1.gif" width="862"
height="117"></p>
<div style="position: absolute; width: 151px; height: 31px; z-index: 3;
left: 11px; top: 135px" id="layer6">
<a href="index.htm">
<img border="0" id="img1" src="button1.jpg" height="30" width="150"
alt="Home"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button2.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button1.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Home"></a></div>
<p>&nbsp;</p>

<div style="position: absolute; width: 148px; height: 30px; z-index: 4;
left: 11px; top: 178px" id="layer7">
<a href="Company%20Policies/companypolicies.htm">
<img border="0" id="img2" src="button4.jpg" height="30" width="150"
alt="Company Policies"
onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button5.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button4.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button6.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button5.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Company
Policies"></a></div>
<div style="position: absolute; width: 151px; height: 32px; z-index: 5;
left: 10px; top: 263px" id="layer8">
<a href="Directions/directions.htm">
<img border="0" id="img3" src="buttonA.jpg" height="30" width="150"
alt="Directions"
onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'buttonB.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'buttonA.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'buttonC.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'buttonB.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Directions"></a></div>
<div style="position: absolute; width: 100px; height: 29px; z-index: 6;
left: 11px; top: 221px" id="layer9">
<a href="Departments/Departments.htm">
<img border="0" id="img4" src="button7.jpg" height="30" width="150"
alt="Departments"
onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button8.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'button7.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button8.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Departments"></a></div>
<p>&nbsp;</p>
<div style="position: absolute; width: 149px; height: 31px; z-index: 7;
left: 11px; top: 307px" id="layer10">
<a href="E-Stationairy/estationary.htm">
<img border="0" id="img5" src="buttonD.jpg" height="30" width="150"
alt="E-Stationary"
onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'buttonE.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'buttonD.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'buttonF.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'buttonE.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="E-Stationary"></a></div>
<div style="position: absolute; width: 151px; height: 31px; z-index: 8;
left: 11px; top: 350px" id="layer11">
<a href="Help%20Desk/helpdesk.htm">
<img border="0" id="img6" src="button10.jpg" height="30" width="150"
alt="Help Desk"
onmouseover="FP_swapImg(1,0,/*id*/'img6',/*url*/'button11.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img6',/*url*/'button10.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img6',/*url*/'button12.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img6',/*url*/'button11.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Help Desk"></a></div>
<div style="position: absolute; width: 100px; height: 30px; z-index: 9;
left: 10px; top: 394px" id="layer12">
<a href="http://login.postini.com/exec/login">
<img border="0" id="img7" src="button13.jpg" height="30" width="150"
alt="Postini"
onmouseover="FP_swapImg(1,0,/*id*/'img7',/*url*/'button14.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img7',/*url*/'button13.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img7',/*url*/'button15.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img7',/*url*/'button14.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Postini"></a></div>
<div style="position: absolute; width: 151px; height: 30px; z-index:
10; left: 10px; top: 436px" id="layer13">
<a href="Rosemont%20Site%20Info/RosemontIllinoisSiteInfo.htm">
<img border="0" id="img8" src="button16.jpg" height="30" width="150"
alt="Rosemont Information"
onmouseover="FP_swapImg(1,0,/*id*/'img8',/*url*/'button17.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img8',/*url*/'button16.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img8',/*url*/'button18.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img8',/*url*/'button17.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Rosemont
Information"></a></div>

</body>

</html>


I JUST CAN'T SEEM TO FIGURE THIS OUT AND THOUGHT SOMEONE ELSE COULD

 

[Stefan B Rusynko]

You are posting the code from your left shared border page (or an include page) using IB
- so all image links are relative to that page (not the page the include is used in)
As Ronx pointed out there are problems w/ using IB in shared borders or include pages

Use a DWT instead of the include page or shared borders

--

_____________________________________________
SBR @ ENJOY (-: [ Microsoft MVP - FrontPage ]
"Warning - Using the F1 Key will not break anything!" (-;
To find the best Newsgroup for FrontPage support see:
http://www.frontpagemvps.com/FrontPageNewsGroups/tabid/53/Default.aspx
_____________________________________________


|I thought maybe the entire code would help so here it is:
|
| <html>
|
| <head>
| <meta http-equiv="Content-Language" content="en-us">
| <meta http-equiv="Content-Type" content="text/html;
| charset=windows-1252">
| <title>Left Side Navigation Bar</title>
| <script language="JavaScript">
| <!--
| function FP_preloadImgs() {
| var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
| for(var i=0; i<a.length; i++) { d.FP_imgs=new Image;
| d.FP_imgs.src=a; }
| }
|
| function FP_swapImg() {//v1.0
| var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array();
| for(n=2; n<args.length;
| n+=2) { elm=FP_getObjectByID(args[n]); if(elm) {
| doc.$imgSwaps[doc.$imgSwaps.length]=elm;
| elm.$src=elm.src; elm.src=args[n+1]; } }
| }
|
| function FP_getObjectByID(id,o) {//v1.0
| var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById)
| el=o.getElementById(id);
| else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el)
| return el;
| if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes;
| if(c)
| for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el)
| return el; }
| f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
| for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el)
| return el; } }
| return null;
| }
| // -->
| </script>
| </head>
|
| <body onload="FP_preloadImgs(/*url*/'ButtonsandPictures/button19.jpg',
| /*url*/'ButtonsandPictures/button9.jpg', /*url*/'button2.jpg',
| /*url*/'button3.jpg', /*url*/'button5.jpg', /*url*/'button6.jpg',
| /*url*/'button8.jpg', /*url*/'button9.jpg', /*url*/'buttonB.jpg',
| /*url*/'buttonC.jpg', /*url*/'buttonE.jpg', /*url*/'buttonF.jpg',
| /*url*/'button11.jpg', /*url*/'button12.jpg', /*url*/'button14.jpg',
| /*url*/'button15.jpg', /*url*/'button17.jpg', /*url*/'button18.jpg')">
|
| <p>
| <img border="0" src="ButtonsandPictures/EGSLogoLine1.gif" width="862"
| height="117"></p>
| <div style="position: absolute; width: 151px; height: 31px; z-index: 3;
| left: 11px; top: 135px" id="layer6">
| <a href="index.htm">
| <img border="0" id="img1" src="button1.jpg" height="30" width="150"
| alt="Home"
| onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button2.jpg')"
| onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button1.jpg')"
| onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.jpg')"
| onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.jpg')"
| fp-style="fp-btn: Glass Rectangle 5" fp-title="Home"></a></div>
| <p>&nbsp;</p>
|
| <div style="position: absolute; width: 148px; height: 30px; z-index: 4;
| left: 11px; top: 178px" id="layer7">
| <a href="Company%20Policies/companypolicies.htm">
| <img border="0" id="img2" src="button4.jpg" height="30" width="150"
| alt="Company Policies"
| onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button5.jpg')"
| onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button4.jpg')"
| onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button6.jpg')"
| onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button5.jpg')"
| fp-style="fp-btn: Glass Rectangle 5" fp-title="Company
| Policies"></a></div>
| <div style="position: absolute; width: 151px; height: 32px; z-index: 5;
| left: 10px; top: 263px" id="layer8">
| <a href="Directions/directions.htm">
| <img border="0" id="img3" src="buttonA.jpg" height="30" width="150"
| alt="Directions"
| onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'buttonB.jpg')"
| onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'buttonA.jpg')"
| onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'buttonC.jpg')"
| onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'buttonB.jpg')"
| fp-style="fp-btn: Glass Rectangle 5" fp-title="Directions"></a></div>
| <div style="position: absolute; width: 100px; height: 29px; z-index: 6;
| left: 11px; top: 221px" id="layer9">
| <a href="Departments/Departments.htm">
| <img border="0" id="img4" src="button7.jpg" height="30" width="150"
| alt="Departments"
| onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button8.jpg')"
| onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'button7.jpg')"
| onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9.jpg')"
| onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button8.jpg')"
| fp-style="fp-btn: Glass Rectangle 5" fp-title="Departments"></a></div>
| <p>&nbsp;</p>
| <div style="position: absolute; width: 149px; height: 31px; z-index: 7;
| left: 11px; top: 307px" id="layer10">
| <a href="E-Stationairy/estationary.htm">
| <img border="0" id="img5" src="buttonD.jpg" height="30" width="150"
| alt="E-Stationary"
| onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'buttonE.jpg')"
| onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'buttonD.jpg')"
| onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'buttonF.jpg')"
| onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'buttonE.jpg')"
| fp-style="fp-btn: Glass Rectangle 5" fp-title="E-Stationary"></a></div>
| <div style="position: absolute; width: 151px; height: 31px; z-index: 8;
| left: 11px; top: 350px" id="layer11">
| <a href="Help%20Desk/helpdesk.htm">
| <img border="0" id="img6" src="button10.jpg" height="30" width="150"
| alt="Help Desk"
| onmouseover="FP_swapImg(1,0,/*id*/'img6',/*url*/'button11.jpg')"
| onmouseout="FP_swapImg(0,0,/*id*/'img6',/*url*/'button10.jpg')"
| onmousedown="FP_swapImg(1,0,/*id*/'img6',/*url*/'button12.jpg')"
| onmouseup="FP_swapImg(0,0,/*id*/'img6',/*url*/'button11.jpg')"
| fp-style="fp-btn: Glass Rectangle 5" fp-title="Help Desk"></a></div>
| <div style="position: absolute; width: 100px; height: 30px; z-index: 9;
| left: 10px; top: 394px" id="layer12">
| <a href="http://login.postini.com/exec/login">
| <img border="0" id="img7" src="button13.jpg" height="30" width="150"
| alt="Postini"
| onmouseover="FP_swapImg(1,0,/*id*/'img7',/*url*/'button14.jpg')"
| onmouseout="FP_swapImg(0,0,/*id*/'img7',/*url*/'button13.jpg')"
| onmousedown="FP_swapImg(1,0,/*id*/'img7',/*url*/'button15.jpg')"
| onmouseup="FP_swapImg(0,0,/*id*/'img7',/*url*/'button14.jpg')"
| fp-style="fp-btn: Glass Rectangle 5" fp-title="Postini"></a></div>
| <div style="position: absolute; width: 151px; height: 30px; z-index:
| 10; left: 10px; top: 436px" id="layer13">
| <a href="Rosemont%20Site%20Info/RosemontIllinoisSiteInfo.htm">
| <img border="0" id="img8" src="button16.jpg" height="30" width="150"
| alt="Rosemont Information"
| onmouseover="FP_swapImg(1,0,/*id*/'img8',/*url*/'button17.jpg')"
| onmouseout="FP_swapImg(0,0,/*id*/'img8',/*url*/'button16.jpg')"
| onmousedown="FP_swapImg(1,0,/*id*/'img8',/*url*/'button18.jpg')"
| onmouseup="FP_swapImg(0,0,/*id*/'img8',/*url*/'button17.jpg')"
| fp-style="fp-btn: Glass Rectangle 5" fp-title="Rosemont
| Information"></a></div>
|
| </body>
|
| </html>
|
|
| I JUST CAN'T SEEM TO FIGURE THIS OUT AND THOUGHT SOMEONE ELSE COULD
|

 

[Ronx]

The page code given is looking for the buttons in the same folder as
where the page is located. - if the page is in the root, then the
buttons must be in the root, if the buttons are in a folder, the page
must be in the same folder.
This page will work correctly.
BUT.
If the pages this page is included in are NOT in the same folder,
those pages will fail.
Take the code for one of the buttons:

<a href="index.htm">
<img border="0" id="img1" src="button1.jpg" height="30" width="150"
alt="Home"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button2.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button1.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Home"></a>

If this page is moved into a folder (unlikely since this is the Home
page, but pretend...) the code in index.htm (when the include is done,
preview in browser and view source to see the code) will change to:
<a href="folder/index.htm">
<img border="0" id="img1" src="../button1.jpg" height="30"
width="150"
alt="Home"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button2.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button1.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Home"></a>

Notice that the path to the original button image changes to
.../button1.jpg, but the paths in the event handlers do not change.
example
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button2.jpg')"
stays exactly the same. In other words, the path to the button is
broken and the button will disappear, replaced by the missing image
symbol.

To use an include file containing Interactive Buttons the include file
MUST be in the same folder as the pages it is included in. The
buttons themselves can be located elsewhere, provided all the paths to
the buttons in the include file are correct.


This is not related to your buttons problem, but you should remove
spaces from file and folder names. Spaces break links in some
browsers.
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/

I thought maybe the entire code would help so here it is:

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1252">
<title>Left Side Navigation Bar</title>
<script language="JavaScript">
<!--
function FP_preloadImgs() {
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs=new Image;
d.FP_imgs.src=a; }
}

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array();
for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) {
doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById)
el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el)
return el;
if(o.id==id || o.name==id) return o; if(o.childNodes)
c=o.childNodes;
if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el)
return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el)
return el; } }
return null;
}
// -->
</script>
</head>

<body
onload="FP_preloadImgs(/*url*/'ButtonsandPictures/button19.jpg',
/*url*/'ButtonsandPictures/button9.jpg', /*url*/'button2.jpg',
/*url*/'button3.jpg', /*url*/'button5.jpg', /*url*/'button6.jpg',
/*url*/'button8.jpg', /*url*/'button9.jpg', /*url*/'buttonB.jpg',
/*url*/'buttonC.jpg', /*url*/'buttonE.jpg', /*url*/'buttonF.jpg',
/*url*/'button11.jpg', /*url*/'button12.jpg', /*url*/'button14.jpg',
/*url*/'button15.jpg', /*url*/'button17.jpg',
/*url*/'button18.jpg')">

<p>
<img border="0" src="ButtonsandPictures/EGSLogoLine1.gif"
width="862"
height="117"></p>
<div style="position: absolute; width: 151px; height: 31px; z-index:
3;
left: 11px; top: 135px" id="layer6">
<a href="index.htm">
<img border="0" id="img1" src="button1.jpg" height="30" width="150"
alt="Home"
onmouseover="FP_swapImg(1,0,/*id*/'img1',/*url*/'button2.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'button1.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img1',/*url*/'button3.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'button2.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Home"></a></div>
<p>&nbsp;</p>

<div style="position: absolute; width: 148px; height: 30px; z-index:
4;
left: 11px; top: 178px" id="layer7">
<a href="Company%20Policies/companypolicies.htm">
<img border="0" id="img2" src="button4.jpg" height="30" width="150"
alt="Company Policies"
onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'button5.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'button4.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'button6.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'button5.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Company
Policies"></a></div>
<div style="position: absolute; width: 151px; height: 32px; z-index:
5;
left: 10px; top: 263px" id="layer8">
<a href="Directions/directions.htm">
<img border="0" id="img3" src="buttonA.jpg" height="30" width="150"
alt="Directions"
onmouseover="FP_swapImg(1,0,/*id*/'img3',/*url*/'buttonB.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img3',/*url*/'buttonA.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img3',/*url*/'buttonC.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img3',/*url*/'buttonB.jpg')"
fp-style="fp-btn: Glass Rectangle 5"
fp-title="Directions"></a></div>
<div style="position: absolute; width: 100px; height: 29px; z-index:
6;
left: 11px; top: 221px" id="layer9">
<a href="Departments/Departments.htm">
<img border="0" id="img4" src="button7.jpg" height="30" width="150"
alt="Departments"
onmouseover="FP_swapImg(1,0,/*id*/'img4',/*url*/'button8.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img4',/*url*/'button7.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img4',/*url*/'button9.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img4',/*url*/'button8.jpg')"
fp-style="fp-btn: Glass Rectangle 5"
fp-title="Departments"></a></div>
<p>&nbsp;</p>
<div style="position: absolute; width: 149px; height: 31px; z-index:
7;
left: 11px; top: 307px" id="layer10">
<a href="E-Stationairy/estationary.htm">
<img border="0" id="img5" src="buttonD.jpg" height="30" width="150"
alt="E-Stationary"
onmouseover="FP_swapImg(1,0,/*id*/'img5',/*url*/'buttonE.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img5',/*url*/'buttonD.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img5',/*url*/'buttonF.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img5',/*url*/'buttonE.jpg')"
fp-style="fp-btn: Glass Rectangle 5"
fp-title="E-Stationary"></a></div>
<div style="position: absolute; width: 151px; height: 31px; z-index:
8;
left: 11px; top: 350px" id="layer11">
<a href="Help%20Desk/helpdesk.htm">
<img border="0" id="img6" src="button10.jpg" height="30" width="150"
alt="Help Desk"
onmouseover="FP_swapImg(1,0,/*id*/'img6',/*url*/'button11.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img6',/*url*/'button10.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img6',/*url*/'button12.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img6',/*url*/'button11.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Help Desk"></a></div>
<div style="position: absolute; width: 100px; height: 30px; z-index:
9;
left: 10px; top: 394px" id="layer12">
<a href="http://login.postini.com/exec/login">
<img border="0" id="img7" src="button13.jpg" height="30" width="150"
alt="Postini"
onmouseover="FP_swapImg(1,0,/*id*/'img7',/*url*/'button14.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img7',/*url*/'button13.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img7',/*url*/'button15.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img7',/*url*/'button14.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Postini"></a></div>
<div style="position: absolute; width: 151px; height: 30px; z-index:
10; left: 10px; top: 436px" id="layer13">
<a href="Rosemont%20Site%20Info/RosemontIllinoisSiteInfo.htm">
<img border="0" id="img8" src="button16.jpg" height="30" width="150"
alt="Rosemont Information"
onmouseover="FP_swapImg(1,0,/*id*/'img8',/*url*/'button17.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img8',/*url*/'button16.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img8',/*url*/'button18.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img8',/*url*/'button17.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Rosemont
Information"></a></div>

</body>

</html>


I JUST CAN'T SEEM TO FIGURE THIS OUT AND THOUGHT SOMEONE ELSE COULD

 

[Ronx]

Responses interspersed below
--
Ron Symonds - Microsoft MVP (FrontPage)
Reply only to group - emails will be deleted unread.
FrontPage Support: http://www.frontpagemvps.com/

I am trying one thing at a time so nothing messes up.

I left my logo.htm file in the root and all the button jpg files
that
belong to it in the root as well. I then dragged and dropped it to
one
of my folders using the "copy here". Then I opened up the folder and
opened up the logo.htm file in that folder and found the code to for
one of my navigation buttons. It is:

<div style="position: absolute; width: 148px; height: 30px; z-index:
4;
left: 11px; top: 178px" id="layer7">
<a href="../Company%20Policies/companypolicies.htm">
<img border="0" id="img2" src="../button4.jpg" height="30"
width="150"
alt="Company Policies"
onmouseover="FP_swapImg(1,0,/*id*/'img2',/*url*/'../button5.jpg')"
onmouseout="FP_swapImg(0,0,/*id*/'img2',/*url*/'../button4.jpg')"
onmousedown="FP_swapImg(1,0,/*id*/'img2',/*url*/'../button6.jpg')"
onmouseup="FP_swapImg(0,0,/*id*/'img2',/*url*/'../button5.jpg')"
fp-style="fp-btn: Glass Rectangle 5" fp-title="Company
Policies"></a></div>

So by this code it looks as if the src= is pointing to the root
where
all the buttons are now residing from the logo.htm page.

Correct

Or is it not pointing to the right place? If it is correct will the
drag, drop, and copy here work for each folder once I re-publish my
site?

Wrong place.
Since logo.htm is going to be included into your home page, logo.htm
should be left in the root folder.
See my response to your following post.
If other pages are moved into other folders the IBs on these pages
will fail.

Oh and one more question: Each time I create 1 button it actually
creates multiple buttons. For instance the above code is for my one
navigation button called: Company Policies, but when I save that
button
it saves button4.jpg, button5.jpg and button6.jpg. My site has a ton
of
buttons!!! Is this normal?

This is normal if you have selected Hover and Pressed states for the
button. - each state requires an image.

 

[Ronx]

I think you should rethink your design. Use a Dynamic Web Template
instead of include files. The DWT solution does not suffer from
broken paths to buttons when pages are in different folders.