FP Templates & Javascript/Image Rollovers

I've made a nice banner with image rollovers for the top of my page in Adobe
Photoshop 6/ImageReady. Since I have triple-digit number of pages to
create/update, I made a dynamic template to help speed-up page creation and
quicken page updates. I had ImageReady export the HTML and setup the display
of the images in CSS (instead of making a table), plus it created some
JavaScript to handle the rollovers.

Everything works fine, except that the relative links (i.e.-
images/bannerimgs/image_01.jpg) don't change to reflect where it is in the
site's directory tree. Therefore, if I make the template off the root, then
apply it to a page in a subdirectory, none of the relative links work because
it's still showing the same path as if it was from the root. FrontPage will
change the relative links in hyperlink tags in the page, but not in the
JavaScript.

The only work-around I've been able to come up with is to create multiple
templates of the same template, just change the javascript relative URLs in
each template depending on what page it will be applied to. This to me seems
like an inefficient way of doing it. Is there any way of making the
javascript code more "universal" while still maintaining the relative paths
so that I can use just ONE template for all pages - even ones buried 2 to 3
subfolders deep? Is there a way to "fool" FrontPage? I'd rather avoid using
static URLs.

Thomas
Thu Jun 15 15:41:51 CDT 2006

Your only option is to use Absolute URLs to the images, if you only want a single page to manage.

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================

"MarkInNY" <MarkInNY@discussions.microsoft.com> wrote in message
news:542339B5-B7B8-47F7-9769-1EB4B1AE995E@microsoft.com...
> I've made a nice banner with image rollovers for the top of my page in Adobe
> Photoshop 6/ImageReady. Since I have triple-digit number of pages to
> create/update, I made a dynamic template to help speed-up page creation and
> quicken page updates. I had ImageReady export the HTML and setup the display
> of the images in CSS (instead of making a table), plus it created some
> JavaScript to handle the rollovers.
>
> Everything works fine, except that the relative links (i.e.-
> images/bannerimgs/image_01.jpg) don't change to reflect where it is in the
> site's directory tree. Therefore, if I make the template off the root, then
> apply it to a page in a subdirectory, none of the relative links work because
> it's still showing the same path as if it was from the root. FrontPage will
> change the relative links in hyperlink tags in the page, but not in the
> JavaScript.
>
> The only work-around I've been able to come up with is to create multiple
> templates of the same template, just change the javascript relative URLs in
> each template depending on what page it will be applied to. This to me seems
> like an inefficient way of doing it. Is there any way of making the
> javascript code more "universal" while still maintaining the relative paths
> so that I can use just ONE template for all pages - even ones buried 2 to 3
> subfolders deep? Is there a way to "fool" FrontPage? I'd rather avoid using
> static URLs.

MarkInNY
Thu Jun 15 15:57:01 CDT 2006

Okay, that's a total bummer! :-(

"Thomas A. Rowe" wrote:

> Your only option is to use Absolute URLs to the images, if you only want a single page to manage.
>
> --
> ==============================================
> Thomas A. Rowe (Microsoft MVP - FrontPage)
> ==============================================
> If you feel your current issue is a results of installing
> a Service Pack or security update, please contact
> Microsoft Product Support Services:
> http://support.microsoft.com
> If the problem can be shown to have been caused by a
> security update, then there is usually no charge for the call.
> ==============================================
>
> "MarkInNY" <MarkInNY@discussions.microsoft.com> wrote in message
> news:542339B5-B7B8-47F7-9769-1EB4B1AE995E@microsoft.com...
> > I've made a nice banner with image rollovers for the top of my page in Adobe
> > Photoshop 6/ImageReady. Since I have triple-digit number of pages to
> > create/update, I made a dynamic template to help speed-up page creation and
> > quicken page updates. I had ImageReady export the HTML and setup the display
> > of the images in CSS (instead of making a table), plus it created some
> > JavaScript to handle the rollovers.
> >
> > Everything works fine, except that the relative links (i.e.-
> > images/bannerimgs/image_01.jpg) don't change to reflect where it is in the
> > site's directory tree. Therefore, if I make the template off the root, then
> > apply it to a page in a subdirectory, none of the relative links work because
> > it's still showing the same path as if it was from the root. FrontPage will
> > change the relative links in hyperlink tags in the page, but not in the
> > JavaScript.
> >
> > The only work-around I've been able to come up with is to create multiple
> > templates of the same template, just change the javascript relative URLs in
> > each template depending on what page it will be applied to. This to me seems
> > like an inefficient way of doing it. Is there any way of making the
> > javascript code more "universal" while still maintaining the relative paths
> > so that I can use just ONE template for all pages - even ones buried 2 to 3
> > subfolders deep? Is there a way to "fool" FrontPage? I'd rather avoid using
> > static URLs.
>
>
>

BrettMiddleton
Tue Jun 20 14:25:02 CDT 2006

"MarkInNY" wrote:
> Okay, that's a total bummer! :-(

There's another choice, though it's still somewhat of a pain. I created a
script called "setroot.js", as follows:

// Set relative path to root of Web site from directory of current
// page. This global variable is referenced in other scripts to
// automatically adjust directory paths, rather than requiring a
// different version of the code for each directory level.

// For example, from a subdirectory just below the root directory,
// the relative path would be "../".

var WebRoot = null; // relative path to root from calling page

function SetRoot(RootPath) {
WebRoot = RootPath;
}

At the top of each page, just below the body tag, I call the script:

<script type="text/javascript"> <!--
SetRoot("../"); // relative path to root of Web site
//--> </script>

(In pages in the home directory, just SetRoot("");)

Other scripts can then simply refer to "WebRoot" to adjust the relative
paths. E.g., in my roll-over script, I have statements such as:

HomeOn.src = WebRoot + "images/nav/HomeOn.gif";

HTH

Brett

Thomas
Tue Jun 20 15:10:45 CDT 2006

What happen if the site visitor has JavaScript disabled ?

--
==============================================
Thomas A. Rowe (Microsoft MVP - FrontPage)
==============================================
If you feel your current issue is a results of installing
a Service Pack or security update, please contact
Microsoft Product Support Services:
http://support.microsoft.com
If the problem can be shown to have been caused by a
security update, then there is usually no charge for the call.
==============================================

"Brett Middleton" <BrettMiddleton@discussions.microsoft.com> wrote in message
news:33B35BD8-A78A-4EFD-B732-3DB3692A939D@microsoft.com...
> "MarkInNY" wrote:
>> Okay, that's a total bummer! :-(
>
> There's another choice, though it's still somewhat of a pain. I created a
> script called "setroot.js", as follows:
>
> // Set relative path to root of Web site from directory of current
> // page. This global variable is referenced in other scripts to
> // automatically adjust directory paths, rather than requiring a
> // different version of the code for each directory level.
>
> // For example, from a subdirectory just below the root directory,
> // the relative path would be "../".
>
> var WebRoot = null; // relative path to root from calling page
>
> function SetRoot(RootPath) {
> WebRoot = RootPath;
> }
>
> At the top of each page, just below the body tag, I call the script:
>
> <script type="text/javascript"> <!--
> SetRoot("../"); // relative path to root of Web site
> //--> </script>
>
> (In pages in the home directory, just SetRoot("");)
>
> Other scripts can then simply refer to "WebRoot" to adjust the relative
> paths. E.g., in my roll-over script, I have statements such as:
>
> HomeOn.src = WebRoot + "images/nav/HomeOn.gif";
>
> HTH
>
> Brett

BrettMiddleton
Fri Jun 23 16:04:02 CDT 2006

Then the user gets a plain menu without rollover effects. If the rollover
script is never called, then it doesn't matter if it doesn't know the path to
the images. It degrades gracefully in my context. I imagine it would work
similarly for Mark's banner.

"Thomas A. Rowe" wrote:

> What happen if the site visitor has JavaScript disabled ?
>
> --
> ==============================================
> Thomas A. Rowe (Microsoft MVP - FrontPage)
> ==============================================
> If you feel your current issue is a results of installing
> a Service Pack or security update, please contact
> Microsoft Product Support Services:
> http://support.microsoft.com
> If the problem can be shown to have been caused by a
> security update, then there is usually no charge for the call.
> ==============================================
>
> "Brett Middleton" <BrettMiddleton@discussions.microsoft.com> wrote in message
> news:33B35BD8-A78A-4EFD-B732-3DB3692A939D@microsoft.com...
> > "MarkInNY" wrote:
> >> Okay, that's a total bummer! :-(
> >
> > There's another choice, though it's still somewhat of a pain. I created a
> > script called "setroot.js", as follows:
> >
> > // Set relative path to root of Web site from directory of current
> > // page. This global variable is referenced in other scripts to
> > // automatically adjust directory paths, rather than requiring a
> > // different version of the code for each directory level.
> >
> > // For example, from a subdirectory just below the root directory,
> > // the relative path would be "../".
> >
> > var WebRoot = null; // relative path to root from calling page
> >
> > function SetRoot(RootPath) {
> > WebRoot = RootPath;
> > }
> >
> > At the top of each page, just below the body tag, I call the script:
> >
> > <script type="text/javascript"> <!--
> > SetRoot("../"); // relative path to root of Web site
> > //--> </script>
> >
> > (In pages in the home directory, just SetRoot("");)
> >
> > Other scripts can then simply refer to "WebRoot" to adjust the relative
> > paths. E.g., in my roll-over script, I have statements such as:
> >
> > HomeOn.src = WebRoot + "images/nav/HomeOn.gif";
> >
> > HTH
> >
> > Brett
>
>
>