|
Status Bar Messages
One of the best ways to demonstrate this script is by opening a new window. Open the window by clicking here, then have a look at the status bar and you will see a new message from me!
The script is a bit more complicated than the 'onMouseover' effect and can sometimes come into conflict with onMouseover, but it works very well anyway!
Personally, I would recommend using this script on pages where the onMouseover command isn't so important. The only disadvantage to this script (as I have found!) is you cannot easily incorporate it with the <BODY Onload="window.defaultStatus=...> I mentioned on the previous page. Instead you have to use a bit of code that goes like this:
<BODY onLoad="startBanner()">
Having said all that, here's the code, and thanks to April at A1 Javascripts for this one.
The bits you can alter (the text message) are highlighted in red. The variables (like speed) are highlighted in green.
<SCRIPT LANGUAGE="JavaScript">
<!--
// Copyright (c) 1996 Tomer Shiran. All rights reserved.
// Permission given to use this script provided that the copyright
// notice remains as is. Additional scripts and information are
// available at http://www.geocities.com/SiliconValley/9000/
// set speed of banner (pause in milliseconds between characters)
var speed = 150 // decrease value to increase speed (must be positive)
// set pause between completion of message and beginning of following message
var pause = 1000 // increase value to increase pause
// set initial values
var timerID = null
var bannerRunning = false
// create global array
var ar = new Array()
// assign the strings to the array's elements
ar[0] = "Welcome To Tactical Panda"
ar[1] = "This is a really nice example of a status bar effect."
ar[2] = "You can say anything you want..."
ar[3] = "...alter the speed which it is displayed"
ar[4] = "and a whole lot more!"
// set index of first message to be displayed first
var currentMessage = 0
// set index of last character to be displayed first
var offset = 0
// stop the banner if it is currently running
function stopBanner() {
// if banner is currently running
if (bannerRunning)
// stop the banner
clearTimeout(timerID)
// timer is now stopped
bannerRunning = false
}
// start the banner
function startBanner() {
// make sure the banner is stopped
stopBanner()
// start the banner from the current position
showBanner()
}
// type-in the current message
function showBanner() {
// assign current message to variable
var text = ar[currentMessage]
// if current message has not finished being displayed
if (offset < text.length) {
// if last character of current message is a space
if (text.charAt(offset) == " ")
// skip the current character
offset++
// assign the up-to-date to-be-displayed substring
// second argument of method accepts index of last character plus one
var partialMessage = text.substring(0, offset + 1)
// display partial message in status bar
window.status = partialMessage
// increment index of last character to be displayed
offset++ // IE sometimes has trouble with "++offset"
// recursive call after specified time
timerID = setTimeout("showBanner()", speed)
// banner is running
bannerRunning = true
} else {
// reset offset
offset = 0
// increment subscript (index) of current message
currentMessage++
// if subscript of current message is out of range
if (currentMessage == ar.length)
// wrap around (start from beginning)
currentMessage = 0
// recursive call after specified time
timerID = setTimeout("showBanner()", pause)
// banner is running
bannerRunning = true
}
}
// -->
</SCRIPT>
Don't forget to add the 'activation line' in the <BODY>.
<BODY onLoad="startBanner()">
Impressed? Good isn't it! Don't forget to keep the credit in the script otherwise the owner will (quite rightly!) get upset!
Top
Little Red Arrows...
Now this is really clever. onMouseover can put red arrows (or another graphic of your choice) next to a link. It looks like this -
As well as the script, you will have to either download the graphics (the red arrow called "arrow.gif" and "blank.gif") or have something similar already stored. There are two graphics because one is the arrow, and the other is a blank space where the arrow was, therefore making it appear to flash on and off!
The code is in two parts. Part one -
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function imgover(imgname){
imgname.src = "arrow.gif"
}
function imgout(imgname){
imgname.src = "blank.gif"
}
// End -->
</SCRIPT>
Now for part two which you place where you want the menu to appear on your page -
<!-- -->
<img name="pic1" SRC="blank.gif" width=16 height=10 border=0><A HREF="java.html" onMouseOver="imgover(pic1)" onMouseOut="imgout(pic1)">Javascripts (1)</A>
<br>
<img name="pic2" SRC="blank.gif" width=16 height=10 border=0><A HREF="java2.html" onMouseOver="imgover(pic2)" onMouseOut="imgout(pic2)">Javascripts (2)</A>
<br>
<img name="pic3" SRC="blank.gif" width=16 height=10 border=0><A HREF="java3.html" onMouseOver="imgover(pic3)" onMouseOut="imgout(pic3)">Javascripts (3)</A>
<br>
<img name="pic4" SRC="blank.gif" width=16 height=10 border=0><A HREF="java4.html" onMouseOver="imgover(pic4)" onMouseOut="imgout(pic4)">Javascripts (4)</A>
<br>
<img name="pic5" SRC="blank.gif" width=16 height=10 border=0><A HREF="java5.html" onMouseOver="imgover(pic5)" onMouseOut="imgout(pic5)">Javascripts (5)</A>
<br>
<img name="pic6" SRC="blank.gif" width=16 height=10 border=0><A HREF="java6.html" onMouseOver="imgover(pic6)" onMouseOut="imgout(pic6)">Javascripts (6)</A>
<!-- -->
Again I have highlighted the areas you can change in red. Now for the graphics.
Here is the arrow,  which you should right-click and save to your computer. It's 16 x 10 pixels if you want to know!
The 'blank' graphic  is obviously difficult to see because it's, well, blank! I have put a border around it so you can see where it is. When you upload it, ensure that you have "border" set at "0". The dimensions are different, it's 20 x 4 pixels by the way.
Ensure you use the <!-- --> tags at the beginning and end of the graphics coding in part two as they hide the graphics when not in use otherwise they will be permanently displayed.
Top
[1] [2] [3] [4] [5] [6] [7] [8]
<<< Previous page
| 
