The Complete Source of the Toolbar
/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke
ISBN: 067231763X
Publisher Sams CopyRight 2000
*/
<html>
<head>
<title>JavaScript Unleashed</title>
<script type="text/javascript" language="JavaScript1.2">
<!--
// Create arrays to hold images
var overImg = new Array();
overImg[0] = new Image(24,24);
overImg[1] = new Image(24,24);
overImg[2] = new Image(24,24);
overImg[3] = new Image(24,24);
overImg[4] = new Image(24,24);
overImg[5] = new Image(24,24);
var downImg = new Array();
downImg[0] = new Image(24,24);
downImg[1] = new Image(24,24);
downImg[2] = new Image(24,24);
downImg[3] = new Image(24,24);
downImg[4] = new Image(24,24);
downImg[5] = new Image(24,24);
var defaultImg = new Array();
defaultImg[0] = new Image(24,24);
defaultImg[1] = new Image(24,24);
defaultImg[2] = new Image(24,24);
defaultImg[3] = new Image(24,24);
defaultImg[4] = new Image(24,24);
defaultImg[5] = new Image(24,24);
// Preload images in the array
overImg[0].src = "back-over.gif";
overImg[1].src = "forward-over.gif";
overImg[2].src = "home-over.gif";
overImg[3].src = "reload-over.gif";
overImg[4].src = "search-over.gif";
overImg[5].src = "print-over.gif";
downImg[0].src = "back-down.gif";
downImg[1].src = "forward-down.gif";
downImg[2].src = "home-down.gif";
downImg[3].src = "reload-down.gif";
downImg[4].src = "search-down.gif";
downImg[5].src = "print-down.gif";
defaultImg[0].src = "back.gif";
defaultImg[1].src = "forward.gif";
defaultImg[2].src = "home.gif";
defaultImg[3].src = "reload.gif";
defaultImg[4].src = "search.gif";
defaultImg[5].src = "print.gif";
// Change the state of image depending on the event that fired.
function rollImage(img,type){
switch(type){
case "over":
document.images[img].src = overImg[img].src;
break;
case "out":
document.images[img].src = defaultImg[img].src;
break;
case "up":
document.images[img].src = defaultImg[img].src;
break;
case "down":
document.images[img].src = downImg[img].src;
break;
}
}
// Process the URL that was entered in the text box
function takeBrowser(ref){
var form = ref;
location.href = form.where.value;
}
// Process the buttons as they are pressed
function process(item){
var isIE = new Boolean(navigator.userAgent.indexOf("MSIE") != -1);
switch(item){
case "find":
if(isIE){
alert("Internet Explorer does not support this method");
}else{
window.find();
}
break;
case "print":
window.print();
break;
case "home":
if(isIE){
alert("Internet Explorer does not support this method");
}else{
window.home();
}
break;
case "reload":
document.location.reload();
break;
case "forward":
if(isIE){
history.forward();
}else{
window.forward();
}
break;
case "back":
if(isIE){
history.back();
}else{
window.back();
}
break;
}
}
//-->
</script>
</head>
<body bgcolor="#ffffff">
<table border="1" cellpadding="5" cellspacing="0" align="center"
bgcolor="#c0c0c0">
<tr>
<td align="center">
<a href="javascript:process('back')"
onmouseup="rollImage('0','up')"
onmousedown="rollImage('0','down')"
onmouseout="rollImage('0','out')"
onmouseover="rollImage('0','over')">
<img border="0" src="back.gif" width="24" height="24" alt="Back">
</a>
</td>
<td align="center">
<a href="javascript:process('forward')"
onmouseup="rollImage('1','up')"
onmousedown="rollImage('1','down')"
onmouseout="rollImage('1','out')"
onmouseover="rollImage('1','over')">
<img border="0" src="forward.gif" width="24" height="24"
alt="Forward"></a>
</td>
<td align="center">
<a href="javascript:process('home')"
onmouseup="rollImage('2','up')"
onmousedown="rollImage('2','down')"
onmouseout="rollImage('2','out')"
onmouseover="rollImage('2','over')">
<img border="0" src="home.gif" width="24" height="24"
alt="Home"></a>
</td>
<td align="center">
<a href="javascript:process('reload')"
onmouseup="rollImage('3','up')"
onmousedown="rollImage('3','down')"
onmouseout="rollImage('3','out')"
onmouseover="rollImage('3','over')">
<img border="0" src="reload.gif" width="24" height="24"
alt="Reload"></a>
</td>
<td align="center">
<a href="javascript:process('find')"
onmouseup="rollImage('4','up')"
onmousedown="rollImage('4','down')"
onmouseout="rollImage('4','out')"
onmouseover="rollImage('4','over')">
<img border="0" src="search.gif" width="24" height="24"
alt="Search"></a>
</td>
<td align="center">
<a href="javascript:process('print')"
onmouseup="rollImage('5','up')"
onmousedown="rollImage('5','down')"
onmouseout="rollImage('5','out')"
onmouseover="rollImage('5','over')">
<img border="0" src="print.gif" width="24" height="24"
alt="Print"></a>
</td>
</tr>
<tr>
<td colspan="6">
<form name="netsite">
<b>
Location:
</b>
<input type="text" size="40" value="Enter a URL here" name="where">
<input type="button" value="Go" onclick="takeBrowser(this.form)">
</form>
</td>
</tr>
<tr>
<td colspan="6">
Result of Date.getTime() (reload verification):
<script type="text/javascript" language="JavaScript1.2">
<!--
document.write((new Date()).getTime());
//-->
</script>
</td>
</tr>
</table>
</body>
</html>
Related examples in the same category
