View the step-by-step solution to:

1)SCROLL DOWN THE DOCUMENT AND LOCATE THE DIV ELEMENTS NAMED mainMenu1 THROUGH mainMenu6.

1)SCROLL DOWN THE DOCUMENT AND LOCATE THE DIV ELEMENTS NAMED mainMenu1 THROUGH mainMenu6. WITHIN EACH DIV ELEMENT, INSERT AN INLINE STYLE SETTING THE Z-INDEX VALUE OF MAINMENU1 TO 6,MAINMENU2 TO 5, MAINMENU3 TO 4, MAINMENU4 TO 3, MAINMENU5 TO 2, MAINMENU6 TO 1

2)SCROLL DOWN TO THE SUBMENUS OF THE SLIDING MENU, CONTAIN WITHIN DIV ELEMENT NAMED SIDEMENU1 THROUGH SIDEMENU6. FOR EACH OF THESE DIV ELEMENTS, CHANGE THE VALUE TO THE LEFT STYLE FROM 125PX TO 10PX.THIS HAS EFFECT OF MOVING THE SUBMENU BEHIND THE MAIN SIDE MENU

3)RETURNTHE DOCUMENT HEAD SECTION AND ADD ANOTHER SCRIPT ELEMENT.WITHIN THIS SCRIPT ELEMENT,INSERT THE FOLLOWING COMMANDS: a)CREATE TWO ARRAY; AN ARRAY NAMED IMAGE AND AN ARRAY NAMED IMAGE_OVER. THESE ARRAYS WILL BE USED TO STORE THE IMAGE OBJECTS USED USED IN THE TABBED MENU TITLES.
b) CREATE A FOR LOOP IN WHICH THE COUNTER VARIABLES RANGE FROM 1 TO 6 IN AN INCREMENTS OF 1. EACH TIME THROUGH THE LOOP, STORE AN IMAGE OBJECT IN THE IMAGE AND IMAGE_OVER ARRAYS. SET THE SOURCE OF THE OBJECT IN THE IMAGE ARRAY TO THE FILE maini.JPG AND THE SOURCE OF THE OBJECT IN THE IMAGE_OVER ARRAY TO THE FILE MAINI_OVER.JPG, WHERE I IS THE VALUE OF THE FOR LOOPS COUNTER VARIABLE. c)CREATE A VARIABLE NAMED MAXZ. THE PURPOSE OF THIS VARIBLE IS TO STORE THE Z-INDEX OF THE CURRENTLY DISPLYED MENU IN THE TABBED MENU SYSTEM.SET THE INITIAL VALUE OF THIS VARIABLE TO 6. d)CREATE A VARIABLENAMED ACTIVEMENU. THE PURPOSE OF THIS VARIABLE IS TO STORE THE SUBMENU CURRENTLY DISPLAYED IN THE SLIDING MENU. SET THE INITIAL VALUE OF THIS TO NULL VARIABLE.

4)CREATE A FUNCTION NAMED SWAPIN(). THE PURPOSE OF THIS FUNCTION IS TO CREATE A ROLLOVER EFFECT FOR THE MENU TITLES IN THE TABBED MENU. THE FUNCTION HAS A SINGLE PARAMETER NAMED NUM THAT INDICATES THE INDEX NUMBER OF THE INLINE IMAGE AND INLINE OBJECT TO SWAP.USE THE NUM PARAMETER TO SWAP THE SOURCE OF THE INLINE IMAGE IN THE DOCUMENT WITH THE CORRESPONDING SOURCE IN THE IMAGE OBJECT IN THE IMAGE_OVER ARRAY.

5)CREATE A FUNCTION NAMED SWAPOUT().THE PUPOSE OF THIS FUNCTION IS TO RESTORE THE MENU TITLE IMAGE TO ITS ORIGINAL APPEARANCE. LIKE SWAPIN(),THE FUNCTION HAS A SINGLE PARAMETER NAMED NUM THAT INDICATES THE INDEX NUMBER OF THE INLINE IMAGE AND INLINE OBJECT TO SWAP.USE THE NUM PARAMETER TO SWAP THE SOURCE OF THE INLINE IMAGE WITH THE CORRESPONDING SOURCE IN THE IMAGE ARRAY.

6)CREATE A FUNCTION NAMED SHOWMAIN().THE PURPOSE OF THIS FUNCTION IS TO MOVE ONE OF THE TABBED MENUS TO THE TOP OF THE STACK.THE FUNCTION HAS A SINGLE PARAMETER,NUM WHICH REPRESENTS THE NUMBER OF MENU TO BE DISPLAYED.ADD THE FOLLOWING COMMANDS TO THE FUNCTION: a)INCREASE THE VALUE OF THE MAXZ VARIABLE BY 1 b)SET THE Z-INDEX VALUE OF THE ELEMENT WITH THE ID mainMenuNum TO THE VALUE OF THE MAXZ VARIABLE,WHERE NUM IS THE VALUE OF THE NUM PARAMETER.(HINT: USE THE GETELEMENTBYID() METHOD TO REFRENCE THE MAIN MAIN MENU ELEMENT.)

7)CREATE A FUNCTION NAMED HIDEACTIVE().THE PURPOSE OF THIS FUNCTION IS TO HIDE ONE OF THE THE SLIDING SUBMENUS BEHIND THE MAIN SIDE MENU.THERE ARE NO PARAMETER FOR THIS FUNCTION.WITHIN THE FUNCTION,RUN A COMMAND TO CHANGE THE VALUE OF THE LEFT STYLE PROPERTY OF THE ACTIVEMENU OBJECT TO "10PX".

8)CREATE A FUNCTION NAMED SLIDEMENU().THE PURPOSE OF THIS FUNCTION IS TO SLIDE THE ACTIVE MENU ACROSS THE PAGE UNTIL IT REACHES AN X-COORDINATE OF 126PIXELS. ADD THE FOLLOWING COMMAND TO THIS FUNCTION.
a)CREATE A VARIABLE NAMED X EQUAL TO THE VALUE RETURNED BY THE XCOORD()
FUNCTION. b)INSERT AN IF CONDITION THAT TEST WHETHER THE VALUE OF THE X VARIABLE IS LESS THAN 126. IF SO, THEN DO THE FOLLOWING: 1)CALL THE SHIFTMENU() FUNCTION USING THE PARAMETER VALUES 2 AND 0 TO SHIFT THE ACTIVEMENU 2 PIXELS TO THE RIGHT; 2)CALL THE SLIDEMENU() FUNCTION AGAIN AFTER A DELAY OF 10MILLISECONDS.

9)CREATE A FUNCTION NAMED STARSLIDE(0.THE PURPOSE OF THIS FUNCTION IS TO HIDE THE CURRENTLY DISPLAYED SUBMENU AND THEN TO START SLIDING THE SELETED SUBMENUS OUT FROM BEHIND THE SIDE MENU.THE FUNCTION HAS A SINGLE PARAMETER,NUM, INDICATING THE NUMBER OF THE SUBMENU TO SLIDE. ADD THE FOLLOWING COMMANDS: a)INSERT AN IF CONDITION THAT TEST WHETHER THE VALUE OF THE ACTIVEMENU VARIABLE IS NOT EQUAL TO NULL.IF IT IS NOT EQUAL TO NULL,RUN THE HIDEACTIVE() FUNCTION TO HIDE THE THE CURRENTLY DISPLAYED SUBMENU. b)POINT THE ACTIVEMENU VARIABLE TO THE OBJECT WHOSE REFRENCE IS THE SIDEMENUNUM,WHERE NUM IS THE VALUE OF THE NUM PARAMETER.(HINT: USE THE DOCUMENT.GETELEMENTBYID() METHOD TO REFRENCE THE SIDEMENU OBJECT.) c)CALL THE SLIDEMENU() FUNCTION.

10)SCROLL DOWN THE DOCUMENT AND LOCATE THE <a> TAG SURROUNDING THE INLINE IMAGE MAIN1.JPG. CHANGE THE HEF ATTRBUTE OF THIS INLINE IMAGE FROM "#" TO A LINK THAT CALLS THE SHOWMAIN() FUNCTION USING 1 AS THE PARAMETER VALUE.

11)ADD AN MOUSEOVER EVENT HANDLER TO THE MAIN1.JPG INLINE IMAGE TO RUN THE SWAPIN() FUNCTION. USE 1 AS THE PARAMETER VALUE. THEN ADD MOUSEOVER EVENT HANDLER TO THE MAIN1.JPG INLINE IMAGE,RUNNING THE SWAPOUT() FUNCTION.ONCE AGAIN USE THE VALUE OF 1 AS THE PARAMETER VALUE

12)REPEAT STEPS 10 AND 11 FOR THE MAIN2.JPG THROUGH MAIN6.JPG INLINE IMAGES,SETTING THE VALUES OF THE PARAMETERS IN THE SHOWMAIN(), SWAPIN(),AND SWAPOUT() FUNCTIONS FROM 2 THROUGH 6.

13)SCROLL DOWN TO THE LINKMAP IMAGE. WITHIN THE HOTSPOT FOR THE FIRST AREA ELEMENT, CHANGE THE HREF ATTRIBUTE FROM "#" TO A LINK THAT CALLS THE STARTSLIDE()FUNCTION USING 1 AS THE PARAMETER VALUE. REPEAT FOR REMAINING 5 HOTSPOT,INCREASING THE VALUE OF THE PARAMETER VALUE FROM 2 THROUGH 6.

14)ADD AN ONCLICK EVENT HANDLER TO THE MAIN DIV ELEMENT, CALLING THE HIDEACTIVE() FUNCTION.

15)OPEN PRINTER.HTM IN YOUR WEB BROWSER AND VERIFY THAT THE IMAGE IN THE SIX TABBED MENU TITLE CHANGES IN RESPONSE TO A MOUSE ROLLOVER:CLICKING ONE OF THE SIX TABBED MENU TITLE DISPLAYS THE MENU FOR THAT OPTION; CLICKING ONE OF THE SIX MENU TITLES IN THE SIDE MENU CAUSES THE SUBMENU MENU FOR THAT OPTION TO SLIDE OUT INTO VIEW WHILE HIDING THE PREVIOUSLY DISPLAYED SUBMENU; AND CLICKING THE MAIN SECTION OF THE DOCUMENT HIDES THE ACTIVE SUB MENU.


the sliding menu is the issue

<html>
<head>
<!--

Filename: printer.htm
Supporting files: back.jpg, je.css, logo.jpg, main1.jpg - main6.jpg,
main1_over.jpg - main6_over.jpg, mainmenu1.jpg - mainmenu6.jpg,
printer.jpg, side1.jpg - side6.jpg, sidemenu.jpg,
-->
<title>Jackson Electronics Printers</title>
<link href="je.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
for (var i=1; i<=6; i++) {
// set image list
if (document.images) {
image = new Array();
image[1]="main1.jpg"
image[2]="main2.jpg"
image[3]="main3.jpg"
image[4]="main4.jpg"
image[5]="main5.jpg"
image[6]="main6.jpg"
image[1].src="main1.jpg"
image[2].src="main2.jpg"
image[3].src="main3.jpg"
image[4].src="main4.jpg"
image[5].src="main5.jpg"
image[6].src="main6.jpg"
// set imageOver list
imageOver = new Array();
imageOver[1]="main1_over.jpg"
imageOver[2]="main2_over.jpg"
imageOver[3]="main3_over.jpg"
imageOver[4]="main4_over.jpg"
imageOver[5]="main5_over.jpg"
imageOver[6]="main6_over.jpg"
imageOver[1].src="main1_over.jpg"
imageOver[2].src="main2_over.jpg"
imageOver[3].src="main3_over.jpg"
imageOver[4].src="main4_over.jpg"
imageOver[5].src="main5_over.jpg"
imageOver[6].src="main6_over.jpg"
image[i] = new Image;
imageOver[i] = new Image;
image[i].src="main" + i + ".jpg";
imageOver[i].src="main" + i + "_over.jpg";
}
}
var maxZ=6;
var ActiveMenu=null;
for (var num=1; num<=6; num++) {
ActiveMenu = document.getElementById("sideMenu"+num);
function swapIn(num) {
if (document.images) 'document.images[num]'.src='imageOver[num]'.src;

}
function swapOut(num) {
if (document.images) 'document.images[num]'.src='image[num]'.src;

}

function showMain(num) {
maxZ++;
document.getElementById("mainMenu"+num).style.zIndex=maxZ;
}
function hideit(object) {
object.style.visibility="hidden";
}
function showit(object) {
object.style.visibility="visible";
}
function hideActive(num) {
if (ActiveMenu !==null) {
hideIt(ActiveMenu);
ActiveMenu=null;
}
}
function popMenu(num) {
hideActive(num);
ActiveMenu = document.getElementById("mainMenu"+num);
showIt(ActiveMenu);
ActiveMenu.style.left="10px";

}
function slideMenu() {
var x=xCoord();
if (x < 126) {
shiftMenu(2, 0);
setTimeout("slideMenu()",10);
}
}

function startSlide(num) {
if (ActiveMenu !==null) {
hideActive(ActiveMenu);
ActiveMenu=null;
}
document.getElementById("sideMenu"+num).style.zIndex.maxZ;
return slideMenu();

onload = startSlide(num);
window.onscroll = hideActive(num);
}
}
</script>
<script type="text/javascript">
function xCoord() {
return parseInt('ActiveMenu.style'.left);
}

function shiftMenu(dx, dy) {
xc=parseInt('ActiveMenu.style'.left);
yc=parseInt('ActiveMenu.style'.top);
'ActiveMenu.style'.left=xc+dx+"px";
'ActiveMenu.style'.top=yc+dy+"px";
}
</script>

</head>

<body>
<div id="logo" style="z-index: 2"><img src="logo.jpg" alt="" /></div>

<!-- Tabbed Menu Titles -->
<div class="mainTitles" id="mainTitle1" style="left: 10px; top: 28px">
<a href="javascript:showMain('1')">
<img src="main1.jpg" alt="Computers" onmouseover="swapIn(1)" onmouseout="swapOut(1)" />
</a>
</div>
<div class="mainTitles" id="mainTitle2" style="left: 104px; top: 28px">
<a href="javascript:showMain('2')">
<img src="main2.jpg" alt="Electronics" onmouseover="swapIn(2)" onmouseout="swapOut(2)" />
</a>
</div>
<div class="mainTitles" id="mainTitle3" style="left: 198px; top: 28px">
<a href="javascript:showMain('3')">
<img src="main3.jpg" alt="Accessories" onmouseover="swapIn(3)" onmouseout="swapOut(3)" />
</a>
</div>
<div class="mainTitles" id="mainTitle4" style="left: 292px; top: 28px">
<a href="javascript:showMain('4')">
<img src="main4.jpg" alt="Software" onmouseover="swapIn(4)" onmouseout="swapOut(4)" />
</a>
</div>
<div class="mainTitles" id="mainTitle5" style="left: 386px; top: 28px">
<a href="javascript:showMain('5')">
<img src="main5.jpg" alt="Services" onmouseover="swapIn(5)" onmouseout="swapOut(5)" />
</a>
</div>
<div class="mainTitles" id="mainTitle6" style="left: 480px; top: 28px">
<a href="javascript:showMain('6')">
<img src="main6.jpg" alt="Store" onmouseover="swapIn(6)" onmouseout="swapOut(6)" />
</a>
</div>


<!-- Tabbed Menu Contents -->

</div>
<div class="mainMenus" id="mainMenu1" style="z-index:-5">
<img src="mainmenu1.jpg" alt="" />
</div>
<div class="mainMenus" id="mainMenu2" style="z-index:-3">
<img src="mainmenu2.jpg" alt="" />
</div>
<div class="mainMenus" id="mainMenu3" style="z-index:-1">
<img src="mainmenu3.jpg" alt="" />
</div>
<div class="mainMenus" id="mainMenu4" style="z-index:1">
<img src="mainmenu4.jpg" alt="" />
</div>
<div class="mainMenus" id="mainMenu5" style="z-index:3">
<img src="mainmenu5.jpg" alt="" />
</div>
<div class="mainMenus" id="mainMenu6" style="z-index:5">
<img src="mainmenu6.jpg" alt="" />
</div>


<!-- Sliding Menu Contents -->
<div id="sideMenu">
<img src="sidemenu.jpg" alt="" usemap="#linkmap" />
</div>


<!-- Submenus of the Sliding Menu -->
<div id="sideMenu1" class="sideMenus" style="top: 130px; left: 10px">
<img src="side1.jpg" alt="" />
</div>
<div id="sideMenu2" class="sideMenus" style="top: 160px; left: 10px">
<img src="side2.jpg" alt="" />
</div>
<div id="sideMenu3" class="sideMenus" style="top: 190px; left: 10px">
<img src="side3.jpg" alt="" />
</div>
<div id="sideMenu4" class="sideMenus" style="top: 222px; left: 10px">
<img src="side4.jpg" alt="" />
</div>
<div id="sideMenu5" class="sideMenus" style="top: 252px; left: 10px">
<img src="side5.jpg" alt="" />
</div>
<div id="sideMenu6" class="sideMenus" style="top: 282px; left: 10px">
<img src="side6.jpg" alt="" />
</div>


<!-- Sliding Menu Image Map -->
<map id="linkmap" name="linkmap">
<area shape="rect" coords="5,40,112,58" href="javascript:startSlide('1')" />
<area shape="rect" coords="5,70,112,88" href="javascript:startSlide('2')" />
<area shape="rect" coords="5,100,112,118" href="javascript:startSlide('3')" />
<area shape="rect" coords="5,130,112,148" href="javascript:startSlide('4')" />
<area shape="rect" coords="5,160,112,178" href="javascript:startSlide('5')" />
<area shape="rect" coords="5,190,112,208" href="javascript:startSlide('6')" />
</map>



<!-- Page Content -->
<div id="main" onclick="hideActive()">
<h1>Printers</h1>
<img src="printer.jpg" alt="" />
<p>The best photo prints can now be made ... AT HOME. Introducing the Jackson
Electronics' <b>Picture Perfect</b> printer. Darkroom quality prints
without the cost, the mess, or the dark.</p>
<p>Photo Shopper calls JE's Picture Perfect "<i>the photo printer
we've been waiting for: high quality prints at an affordable price.</i>"
Photo Review gives it 5 stars, calling it <i>"the outstanding product
of the year."</i> As with all of our printers, make sure to choose JE's
archival quality paper and inks, which are guaranteed not to fade.
There is no better way to preserve your family memories than with
JE photo products.</p>
<p><a href="#">Order</a> the award-winning <b>Picture Perfect</b> printer
today for the special price of <b>$299.95</b> or choose one of the other many
fine printer products from Jackson Electronics.</p>
</div>

</body>
</html>

Recently Asked Questions

Why Join Course Hero?

Course Hero has all the homework and study help you need to succeed! We’ve got course-specific notes, study guides, and practice tests along with expert tutors.

-

Educational Resources
  • -

    Study Documents

    Find the best study resources around, tagged to your specific courses. Share your own to gain free Course Hero access.

    Browse Documents
  • -

    Question & Answers

    Get one-on-one homework help from our expert tutors—available online 24/7. Ask your own questions or browse existing Q&A threads. Satisfaction guaranteed!

    Ask a Question