in black and white
Main menu
Home About us Share a book
Biology Business Chemistry Computers Culture Economics Fiction Games Guide History Management Mathematical Medicine Mental Fitnes Physics Psychology Scince Sport Technics

Javascript for dummies 4th edition - Veer E.V

Veer E.V Javascript for dummies 4th edition - Wiley publishing , 2004. - 387 p.
ISBN: 0-7645-7659-3
Download (direct link): javascriptfordummies2005.pdf
Previous << 1 .. 63 64 65 66 67 68 < 69 > 70 71 72 73 74 75 .. 118 >> Next

Chapter 10: Creating Expandable Site Maps 197
As you read through the code in Listing 10-2, pay special attention to the HTML tags <FRAMESET>, </FRAMESET>, and <FRAME>. (I’ve bolded these tags so you can find them easily.)
The <FRAMESET> and </FRAMESET> tags create a holder for two frames, named sitemap and content, respectively, which are created by the two <FRAME> tags. The source for the left frame is sitemap.htm, and the source for the right frame is content.htm. If you take a look at the sitemap.htm file (located on the companion CD), you find it contains the code in Listing 10-1. If you take a look at the content.htm file (also located on the companion CD) you find it contains the heading shown previously in Figure 10-2, Welcome to my knitting site!
The upshot? When you load the file list1002.htm into a Web browser, the <FRAMESET>, </FRAMESET>, and <FRAME> tags display the pull-down menu (stored as sitemap.htm) in the left frame and the initial content (stored as content.htm) in the right frame. Check out the following section for details.
Putting it all together: Adding targeted hyperlinks
A site map isn’t much good without hyperlinks; after all, the whole point of a site map is to direct users to different Web pages in your site.
You add a hyperlink by using the HTML <A> tag, like so:
<A HREF="someFile.htm">
When you use frames, however, you need to define the TARGET attribute as well as the HREF attribute. When you define the TARGET attribute, you specify the value of the frame in which you want the hyperlinked content to appear, like this:
<A HREF="someFile.htm" TARGET="someFrameName">
If you’ve had a chance to glance through Listing 10-2, you notice that the name of the frame on the right is content. So to add a targeted hyperlink to the code in Listing 10-1, you define TARGET="content.htm", as shown here:
<a href=”yarn.htm” TARGET=”content”>Choosing yarn</a><br />
<a href=”swatching.htm” TARGET=”content”>Swatching</a><br />
<a href=”knit.htm” TARGET=”content”>The knit stitch</a><br /> <a href=”purl.htm” TARGET=”content”>The purl stitch</a><br />
<a href=”circular.htm” TARGET=”content”>Circular needles</a><br />
198 Part III: Making Your Site Easy for Visitors to Navigate and Use
<a href=”cables.htm” TARGET=''content''>Cables</a><br />
<a href=”felting.htm” TARGET=''content''>Felting</a><br />
<a href=”finishing.htm” TARGET=”content”>Finishing</a><br />
As you see from this code, clicking the Choosing Yarn link causes the HTML file yarn.htm to appear in the content frame (the right frame, which Listing 10-2 describes.) Clicking the Swatching link causes the HTML file swatching. htm to appear in the content frame; and so on.
Listing 10-3 shows you the updated site map code containing all eight targeted hyperlinks. Together with the code in Listing 10-2, the code in Listing 10-3 and the referenced content files (yarn.htm, swatching.htm, knit.htm, purl.htm, circular.htm, cables.htm, feling.htm, and finishing.htm) represent a complete, frame-enhanced site map.
You can test the site map code for yourself by loading the file list1002.htm that you find on the companion CD.
Listing 10-3: Putting It All Together: The Site Map Code Updated to Reflect Targeted Hyperlinks
<HTML> <HEAD> <TITLE>Using DHTML to Create a Site Map (From JavaScript For Dummies, 4th Edition)</TITLE> <SCRIPT LANGUAGE=”JavaScript” TYPE=”text/javascript”> <!-- Hide from older browsers
function displayMenu(currentMenu) {
var thisMenu = document.getElementById(currentMenu).style
// If the menu is expanded, contract it. if (thisMenu.display == "block”) { thisMenu.display = "none” }
J else { // If the menu is contracted, expand thisMenu.display = "block” it.
} return false }
// End hiding--) </SCRIPT>
(STYLE TYPE=”text/css”> <!--
.menu {display:none; margin-left:20px;}
Chapter 10: Creating Expandable Site Maps 199
<a href="dummy1.html" onclick="return displayMenu('basicMenu')">Knitting Basics</a>
<span class="menu" id="basicMenu">
<b><a href="dummy3.htm" onclick="return displayMenu('subMenu')" TARGET="content">Planning a project</a></b><br />
<span class="menu" id="subMenu">
<a href="yarn.htm" TARGET="content">Choosing yarn</a><br />
<a href="swatching.htm" TARGET="content">Swatching</a><br />
<b><a href="knit.htm" TARGET="content">The knit stitch</a></b><br />
<b><a href="purl.htm" TARGET="content">The purl stitch</a></b><br />
<a href="dummy2.html" onclick="return displayMenu('advMenu')">Advanced Topics</a>
<span class="menu" id="advMenu">
<a href="circular.htm" TARGET="content">Circular needles</a><br />
<a href="cables.htm" TARGET="content">Cables</a><br />
<a href="felting.htm" TARGET="content">Felting</a><br />
Previous << 1 .. 63 64 65 66 67 68 < 69 > 70 71 72 73 74 75 .. 118 >> Next