FP Templates & Javascript/Image Rollovers

[MarkInNY]

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 A. Rowe]

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]

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

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.
==============================================

 

[Brett Middleton]

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 A. Rowe]

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]

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.