Part 1:

In this exercise you will be adding Javascript enhancements to the site you worked on in Exercise 12. You will leave the CSS information within your documents and continue to add to the site by adding the following elements:

Add a <script> section within the <head> section of your index page type="text/javascript"
Add an onload event handler to welcome the user and an onunload event handler that tells the user goodbye. Include onload="welcomeme();" and onunload="saygoodbye();" in the <body> tag and add the following functions to your JavaScript section:
- function welcomeme() { window.alert("Welcome to the Infamous Professor\'s page of articles."); } function saygoodbye() { window.alert("Hope you enjoyed your stay. We\'ll leave the light on for you."); }
Save your page and test it. You should get this alert box when the window opens or refreshes. Similarly, you should get this alert box when the window is closed or you navigate to a different page.
Now add the following to the top of your Javascript section:
- artwin=null
  
  function openartwindow(mypage) {
     if (!artwin || artwin.closed) {
        var mystring = "status=yes,toolbar=no,location=no,scrollbars=yes,menu=no,height=600,width=550,";
        artwin = window.open(mypage,'artwin', mystring);
     } else {
        artwin.location=mypage;
        artwin.focus();
     }
  }
Modify the links in the home page so that the article pages are opened into a new window using Javascript. Add the following to the <a> tag for each article, where the file name inside the function name (in bold below) is the file that needs to be opened (the bolded elements will change per each article):
- NOTE: how the quotation marks are nested - " ' ' " - When nesting quotation marks, always use the double quote on the outside and put single quotes on the inside.
- NOTE: throughout this lab description, the indentation from the left and the vertical alignment of tags, text, brackets, and equal signs. Yours should look the same; i.e. you should follow these proper coding standards for this and every assignment.
- NOTE: it might seem like a good idea to change the status bar (using window.status= ) on rollover as well; however, for security reasons, newer browsers have disallowed this functionality. Web developers used to change the status bar to hide where the browser was truly being navigated to. Newer browsers now show in the status bar where you will actually be navigated to and do not show what the website developer might have wanted you to see instead.
- <dt>
 <a href="javascript:openartwindow('layout1.html');">
 The World Wide Web as an Instructional Delivery Medium
 </a>
 </dt>
Image showing part of the solved exercise: Part 1

Part 2:

Now that you have a feel for how Javascript works let's modify the home page more to give it more of a graphical feel. In this exercise, you will replace the links with buttons which will open the popup window. To do this:

Change the title of the paper to use the tag with the .italicme class assigned to it. Do not use a paragraph tag here.
Now modify the anchor tag to surround the graphic images included in the file called mybutton.zip and move the title of the paper outside of the anchor tag. Assign the file called button_u.jpg as an image that precedes the title of each paper (in the <dt> tags. For example, the first one looks like (the bolded elements will change per each article):
1. <dt>
 <a href="javascript:openartwindow('layout1.html');">
 
 <img src="button_u.jpg" style="border:0px;" width="75" height="30" alt="Link to first article" title="First Article" />
 
 </a>
 
 The World Wide Web as an Instructional Delivery Medium
 </dt>

Now add the following code to the top of the JavaScript section of your document:



if (navigator.appVersion.substring(0,1) >= 3) 
{
	item1_u     = new Image (75,30);
	item1_u.src = "button_u.jpg";
	item1_o     = new Image (75,30);
	item1_o.src = "button_o.jpg";
	item1_d     = new Image (75,30);
	item1_d.src = "button_d.jpg";
}

function DoMouse(imgsrc,imgchange) 
{
	if (navigator.appVersion.substring(0,1) >= 3) 
	{
		document.getElementById(imgsrc).src=eval(imgchange + ".src");
	}
}

Now modify the anchor that precedes each article title so that it uses the JavaScript code for the rollover. For example, the first anchor would look like this (the bolded elements will change per article):
<dt>
<a href="javascript:openartwindow('layout1.html');"
 onmouseover = "DoMouse('button1', 'item1_o'); return true;"
 onfocus = "DoMouse('button1', 'item1_o'); return true;"
 onmouseout = "DoMouse('button1', 'item1_u'); return true;"
 onblur = "DoMouse('button1', 'item1_u'); return true;"
 onmousedown = "DoMouse('button1', 'item1_d'); return true;"
 onmouseup = "DoMouse('button1', 'item1_u'); return true;">

 <img src="button_u.jpg" style="border:0px;" width="75" height="30" alt="Link to first article" title="First Article" />

</a>

The World Wide Web as an Instructional Delivery Medium

</dt>
Now, id each image as button1, button2 and so forth (see bolded element below):
<dt>
<a href="javascript:openartwindow('layout1.html');"
 onmouseover = "DoMouse('button1', 'item1_o'); return true;"
 onfocus = "DoMouse('button1', 'item1_o'); return true;"
 onmouseout = "DoMouse('button1', 'item1_u'); return true;"
 onblur = "DoMouse('button1', 'item1_u'); return true;"
 onmousedown = "DoMouse('button1', 'item1_d'); return true;"
 onmouseup = "DoMouse('button1', 'item1_u'); return true;">

 <img src="button_u.jpg" id="button1" style="border:0px;" width="75" height="30" alt="Link to first article" title="First Article" />

</a>

The World Wide Web as an Instructional Delivery Medium

</dt>

Exercise Specifications

Finalization