Sponsored Links
Using JavaScript and graphics
The easy way to make your images dynamic
- Feedback
- Discuss
Page 3 of 7
I used digit GIFs provided by Russ Walsh; Russ kindly allows his GIFs to be used freely on Web pages, as long as proper credit is given. You can use any digits you wish for your clock, but you must provide a separate GIF file for each numeral and separate files each for the colon and am/pm indicators. Change the clock.html code to reference the digit files you wish to use.
Note: It is important that you provide the absolute URL to the images you use. Otherwise Netscape will not display the graphics. The clock.html example uses a function (pathOnly) to extract the current path of the document. The script therefore expects to find the images in the same path as the document. Alternatively, you can hard-code the absolute URL if you place the images elsewhere, or you may use the <BASE HREF> tag at the start of the document to explicitly tell Netscape the base URL you want to use.
JavaScript digital clock
<HTML>
<HEAD>
<TITLE>JavaScript Digital Clock</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var Temp;
setClock();
function setClock() {
var OpenImg = '<IMG SRC="'+pathOnly(location.href)+'dg'
var CloseImg='.gif" HEIGHT=21 WIDTH=16>'
Temp = ""
now = new Date();
var CurHour = now.getHours();
var CurMinute = now.getMinutes();
now = null;
if (CurHour >= 12) {
CurHour = CurHour - 12;
Ampm = "pm";
} else
Ampm = "am";
if (CurHour == 0)
CurHour = "12"
if (CurMinute < 10)
CurMinute = "0" + CurMinute
else
CurMinute = "" + CurMinute
CurHour = "" + CurHour;
for (Count = 0; Count < CurHour.length; Count++) {
Temp += OpenImg + CurHour.substring (Count, Count+1) + CloseImg
}
Temp += OpenImg + "c" + '.gif" HEIGHT=21 WIDTH=9>'
for (Count = 0; Count < CurMinute.length; Count++) {
Temp += OpenImg + CurMinute.substring (Count, Count+1) + CloseImg
}
Temp += OpenImg + Ampm + CloseImg
}
function pathOnly (InString) {
LastSlash=InString.lastIndexOf ('/', InString.length-1)
OutString=InString.substring (0, LastSlash+1)
return (OutString);
}
</SCRIPT>
<BODY>
<H1 ALIGN=CENTER>The JavaScript Clock</H1>
The current time is:
<SCRIPT>document.write(Temp); </SCRIPT>
</BODY>
</HTML>
Using JavaScript with client-side image maps
If you're lucky enough to have control over the server that contains your published Web pages, you've probably dabbled with server-side image maps. These are images that have been "dissected" into smaller chunks; as the user clicks on each chunk, the server responds to a different action.
The downside to server-side image maps is that you need a CGI program running on the server to handle the click requests. Not everyone has CGI access. Client-side image maps change that: The "intelligence" for dissecting the image and directing the user to the proper link -- based on the area of the image that was clicked -- is built into the browser. Netscape Navigator (version 2.0 and later) is one of many browsers that now support this standard.
Netscape takes the process a step further, however, letting you integrate client-side image maps with JavaScript. In an ordinary client-side image map, you are limited merely to linking to another page. If you wish, you can "link" to a JavaScript function and give your image maps even more intelligence. For instance, you might create a control panel that only lets users successfully click on an image button if some piece of information -- say a user name -- has been provided.
The anatomy of a client-side image map
Two new HTML tags are used to create client-side image maps. They are the <MAP> tag, which defines the map structure, and
one or more <AREA> tags, which define the clickable areas within the image. To create the image map, define a <MAP> tag and
give the mapping a name. The syntax is:
<MAP NAME="mapname>
You can use most any name for the map, but it should contain only alphabetical and numeric characters. The exception is the underscore, but avoid using an underscore for the first character. Next, define one or more <AREA> tags that define the areas of your image. The tag takes the syntax:
- Feedback
Resources
- http://home.netscape.com/comprod/products/navigator/version_2.0/script/script_info/index.html
Netscape's documentation for JavaScript. - http://www.yahoo.com/Computers_and_Internet/Languages/JavaScript
Yahoo's JavaScript pages.
About Us | Advertise | Contact Us | Terms of Service/Privacy
Copyright, 2006-2008 Network World, Inc. All rights reserved.