CS 544 Assignment Three

Image rollover

What is a rollover? Well, it's when you move the mouse over a graphic image and that image changes to something else. This technique is used frequently in menus to show different text or images. How is it done? Well, that's what I'm going to show you. 

<img src="../images/cat-dog-1.jpg"  
      onmouseover = "this.src='../images/big-dog-nose.jpg'" 
      onmouseout  = "this.src='../images/cat-dog-1.jpg'" />

Simply replace the image links with links to your choices and away you go. Too easy? Okay, the img tag tells the browse you want to put an image into your webpage. The src tag then tells the browser where to look for the image that you have linked to.

Setting size and location of new window

This is supposed to be very easy, but the several ways that I tried did not give me the expected results. So I cheated a little. Instead of putting the HTML to set the size and position inside the calling HTML page, I resorted to putting that code inside the new window that I was opening. To open a new window, we go back to the example from the second assignment.

<a href="win2.htm" target="_blank">This will 
    open a new window 340px by 510px at 25, 25</a>

This time we put the name of the new file, win2.htm, in the code and our text between the <a href="win2.htm" target="_blank"> and the </a>. This is where you can put descriptive text about where the link will take the viewer. The extra code in there, target="_blank" will open the new window for you. There are other choices instead of _blank such as _self (opens the new HTML file into the current window or frame), _parent (opens the new HTML file into the parent frame), or _top (opens into the top frame and removes any frameset in use).

Now the code in the new HTML frame is fairly easy

<body onLoad="resizeTo(340,510); moveTo(25,25)">

Simply put the onLoad text inside the body tag and you will get a perfectly sized and positioned window.

External CSS file

As I stated earlier, there are a couple of different ways to use an external CSS file, either through the link tag or the import method.

<link rel="stylesheet" 
      type="text/css" href="mycss.css">

or

<style type="text/css" media="screen">
@import "mycss.css";
</style>

The first example is most commonly used in HTML and is put in the head section of your page. The rel="stylesheet" tells the HTML that you are loading a stylesheet and the type="text/css" tells it that the file is in plain text and contains CSS. The second method is used often as a workaround for buggy or unsupportive browsers. Many developers will use the link tag to bring in the CSS that the browser will understand and then import the CSS for other browsers to read. Some older browsers don't support the import method, so this is how they bypass the weaker browsers. The import code snippet would also need to be included in the head section of your page and can be written as shown or @import url("mycss.css"); or @import url(mycss.css);.

Now that we have brought the CSS file into the HTML, what goes into the CSS file? Relax, the CSS in the file looks exactly like the CSS you would bury inside the style tags in your HTML. Use the link on the right to open the CSS file for this assignment. The /* and */ are comment markers. The /* opens the comment and anything you type after it will not be processed by the browser until it finds the */ which ends the comments. You'll notice that the first tag modified is the body tag. What has been done here is to build a padding of ten pixels around the body of the HTML page. This prevents text from riding up against the edge of the browser window. The second line, font-family, sets up the default fonts to use so that the page will look uniform across browsers and platforms. And, as always, the CSS to modify a tag or id has to be within the { and } for it to be properly processed. The second set of CSS is #pageHeader. This is a user defined id that sets a width and height for a banner to be displayed across the page. In the HTML for this assignment, you'll see <div id="pageHeader"></div>. This basically executes the CSS that displays the banner. For more on CSS, read on, check out the links, or go buy a book!

Javascript to display date and time

More Javascript than I ever knew. This is collection of functions that collect, format and display the current date and time. The first two functions work to keep the current time updated so that the seconds show. Tha last one formats the date for display. The functions are called through the HTML.

<script type="text/javascript" >
<!--  Hiding for non JS Browsers
var timetype = 12;

function timing(){
   var t = new Date();
   var h = t.getHours();
   var m = t.getMinutes();
   var s = t.getSeconds();
   mstxt = ((m < 10) ? ":0" : ":") +
      m + ((s < 10) ? ":0" : ":") + s;
   document.timeform.time.value=
      (timetype==24)?(((h<10)?"0":"")+
      h+mstxt):(((h>12)?h-12:h)+mstxt+
      ((h>=12)?" PM":" AM"));
      clock = setTimeout("timing()",1000);
}

function start_timing(input_timetype)
{  timetype = input_timetype;
   timing();
}

 //--Returns the current system time as a 
 //--    string in hh:mm am/pm format.

function nowStr() {
   var now=new Date()
   var hours=now.getHours()
   var minutes=now.getMinutes()
   timeStr=""+((hours > 12) ? hours - 12 : hours)
   timeStr+=((minutes < 10) ? ":0" : ":") + minutes
   timeStr+=(hours >= 12) ? " PM" : " AM"
return timeStr
}

//--Returns the current date in mm/dd/yy format as a string.

function todayStr() {
   var today=new Date()
return today.getMonth()+1+"/"+today.getDate()+"/2006" 
              // I cheated.  IE returned the right year and Firefox did not.  
-->
</script>

In the HTML below, the timer is started with the statement onLoad="start_timing(12)" in the body tag. The time and date are then further formatted using the CSS below and then displayed on the page

<body onLoad="start_timing(12)">

   <div id="timed">
      <form name="timeform">
         <input type="text" name="time" size="9">
      </form>
   </div>
	
   <div id="dated">
      <script>document.write(todayStr())</script>
   </div>
#timed {
   position: absolute;
   top: 127px;
   left: 515px;
   padding: 3px 3px 0 0;
}
#dated {
   position: absolute;
   top: 130px;
   left: 430px;
   width: auto;
   padding: 0 3px 0 3px;
   border: 1px solid black;
   background-color: #FFFFFF;
}

The Assignment

Four items for this assignment

The Links

CS 544 assignment three
The real deal from the instructor

My assignment three
This is how I did the assignment

The Javascript Code Files

Date and time code

The Assignment files

HTML index file

HTML pop-up file

CSS file

Assignment three zip file
For users whose browser displays the page rather than shows the code

Final Project Kevin McGaughey Thanks for visiting Class Main Menu