The page in the left-hand window of our application,
, is a simple 'navigation bar' menu containing five 'buttons'. These are images within hyperlink menu.htm
tags. There's also a small <A>
that is used to display the kind of inane comments you would expect if you had the salesperson standing behind you in the showroom.<DIV>
The HTML code that creates this page is simple enough. The car models list page can be loaded normally at any time, and will automatically use the current value of the global
variable to highlight the correct model. However notice that the next three options, Details, Finance and Order, are hyperlinks to JavaScript functions:selectedModel
<DIV ID="divMessage" STYLE="position:absolute; left:10; top:5;
width=100; height=65; text-align:center"></DIV>
<A HREF="carmodels.htm" TARGET="main"><IMG SRC="images/btn_models.gif"
WIDTH="83" HEIGHT="40" ALT="List of models" STYLE="border:none;
position:absolute; left:20; top:80"></A>
<A HREF="javascript:carDetail();"><IMG SRC="images/btn_details.gif"
WIDTH="83" HEIGHT="40" ALT="View car details" STYLE="border:none;
position:absolute; left:20; top:130"></A>
<A HREF="javascript:carFinance();"><IMG SRC="images/btn_finance.gif"
WIDTH="83" HEIGHT="40" ALT="Finance packages" STYLE="border:none;
position:absolute; left:20; top:180"></A>
<A HREF="javascript:carOrder();"><IMG SRC="images/btn_order.gif"
WIDTH="83" HEIGHT="40" ALT="Place an order" STYLE="border:none;
position:absolute; left:20; top:230"></A>
<A HREF="yourpages.htm" TARGET="_top"><IMG SRC="images/btn_exit.gif"
WIDTH="83" HEIGHT="40" ALT="Exit the application"
STYLE="border:none; position:absolute; left:20; top:280"></A>
We used JScript rather than VBScript here because the hyperlinks are JavaScript URLs (JavaScript code or a JavaScript function name preceded by '
'). However, you can also use a JavaScript URL to execute a function written in VBScript—but we fancied a change of language anyway...javascript:
Controlling Navigation
We don’t want to allow the user to open the Detail or Finance page until they select a car model, or the Order page until they select a car model and color. This is easy enough to do in JavaScript. If the appropriate global variable(s) are still zero we display an error message. If it's OK to continue we just load the page they asked for:
<SCRIPT LANGUAGE="JavaScript">
<!--
function carDetail()
{
if (top.selectedModel.valueOf() > 0)
top.frames['main'].location.href = 'cardetail.htm'
else
alert('You must select a model of car first.');
}
function carFinance()
{
if (top.selectedModel.valueOf() > 0)
top.frames['main'].location.href = 'webfinance.htm'
else
alert('You must select a model of car first.');
}
function carOrder()
{
if ((top.selectedModel.valueOf() > 0)
&& (top.selectedColor.valueOf() > 0))
top.frames['main'].location.href = 'weborder.htm'
else
alert('You must select a car and a color first.');
}
//-->
</SCRIPT>