HomePage | Optical Illusions | War Stories | QBasic | Dads Navy Days | Bristol | Bristol, USA | Bristol, Canada | Terre Haute | Miscellany | Web Stuff | About Ray | Site Map | Site Search | Messages | Credits | Links | Web Rings

Web Stuff | Audio | Basics | Browser | Code Tips | Design | Fonts | Forms | Frames (Page 1), (Page 2) | Images (Page 1), (Page 2) | Links | Random | Redirection | Sound | Video | Search Engines | Lycos UK | Home Server (Page 1), (Page 2), (Page 3)

When copying the code from these pages remember to paste them first into a text only editor such as Notepad and then copy and paste from there into your webpage. This is so that all the text formatting codes can be removed from the copied text. Remember that your HTML editor must be in code or HTML view when you paste the code into it. If you are using a template driven HTML editor then the code must be pasted into an HTML and not a text box. JavaScript must be enabled in your browser for the effects generated by it to be seen.

Browser related code

How do I add an icon to the address bar? (HTML)

How can I add my page to the Favorites menu (JavaScript)

How can I make my page the home page?

How do I make an image follow the cursor? (JavaScript)

Another interesting cursor effect (JavaScript)

Shake the browser window (JavaScript)

How do I add an icon to the address bar? (HTML)

This works in Internet Explorer 5 and above. First of all, what am I talking about? Well, in the left of the address bar there is an icon, it is the representation of a piece of paper with the "e" logo on top of it. You can replace this with a custom icon for your webpages. Mine, for example is

Create your icon. This must be 16x16. Save it as favicon.ico. What happens is that the icon is searched for in your webspace root directory by Internet Explorer and if found, displayed. Unfortunately not all servers allow IE to do searches and the icon will not appear.

In this case you can call the icon whatever you like and place the following code in the <head> section of your page

<LINK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico">

The header for this page is <LINK REL="SHORTCUT ICON" HREF="../favicon.ico">

Once you've done that the icon will appear when you add the page to your favorites.

One odd behaviour of these icons is that if you drag the default logo to the right then a new icon sometimes appears in its place.

How can I add my page to the Favorites menu (JavaScript)

There are scripts available that automatically add pages to your visitors' Favorites. Please don't use them. I for one, have my computer set up how I want it, I certainly don't want it automatically changed, and I never revisit sites that do anything like this.

Here's one script that asks to user to add the page to their Favorites:-

<script>
<!--
if ((navigator.appVersion.indexOf("MSIE") > 0)
   && (parseInt(navigator.appVersion) >= 4)) {
   var sText = "<U><SPAN STYLE='color:blue;cursor:hand;font:20'";
   sText += "onclick='window.external.AddFavorite(location.href,";
   sText += "document.title);'>Add this page to your favorites</SPAN></U>";
   document.write(sText);
}
//-->
</script>

Here's another script that will do the same thing:-

<script language="JavaScript">
<!--
var bookmarkurl="http://members.lycos.co.uk/brisray"
var bookmarktitle="Rays Homepage"

function addbookmark(){
if (document.all)
window.external.AddFavorite(bookmarkurl,bookmarktitle)
}
//-->
</script>

<a href="javascript:addbookmark()">Click here to bookmark this site</a>

Click here to bookmark this site

How can I make my page the home page?

There are scripts available that automatically changes the home page of your users. Please don't use them. I for one, have my computer set up how I want it, I certainly don't want it automatically changed, and I never revisit sites that do anything like this.

The following code will bring up a dialog box asking if the user wants to make the page of your choice their start page (the first page they visit when they enter the Internet.)

Click on the link to <u> 
<a class="chlnk" HREF
onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://members.lycos.co.uk/brisray');">
make Rays Homepage your start page</u></a>

You'll notice the link isn't really a link, merely underlined text.

Click on the link to make Rays Homepage your start page

How do I make an image follow the cursor?

Click here or on the image to see an example of what I mean by this.

This is done using the following Javascript. The two parts in red should be replaced by the number of times you want the image to repeat itself and by the image file you want to use.

The image you use should be fairly small this is to reduce the loading time. Also remember that the image should have a transparent background.

<SCRIPT LANGUAGE="JavaScript1.2">
var trailLength =
8;
var path = "
beermug2.gif";

var isIE = false, isNav = false, range = "all.", style = ".style", i, d = 0;
var topPix = ".pixelTop", leftPix = ".pixelLeft", images, storage;
if (document.layers) {
isNav = true, range = "layers.", style = "", topPix = ".top", leftPix = ".left";
} else if (document.all) {
isIE = true;
}
function initTrail() {
images = new Array();
for (i = 0; i < parseInt(trailLength); i++) {
images[i] = new Image();
images[i].src = path;
}
storage = new Array();
for (i = 0; i < images.length*3; i++) {
storage[i] = 0;
}
for (i = 0; i < images.length; i++) {
(isIE) ? document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>') : document.write('<layer name="obj' + i + '" width="0" height="0" z-index="100"><img src="' + images[i].src + '"></layer>');
}
trail();
}
function trail() {
for (i = 0; i < images.length; i++) {
eval("document." + range + "obj" + i + style + topPix + "=" + storage[d]);
eval("document." + range + "obj" + i + style + leftPix + "=" + storage[d+1]);
d = d+2;
}
for (i = storage.length; i >= 2; i--) {;
storage[i] = storage[i-2];
}
d = 0;
clearTimeout(timer);
var timer = setTimeout("trail()", 10);
}
function processEvent(e) {
if (isIE) {
storage[0] = window.event.y+document.body.scrollTop+10;
storage[1] = window.event.x+document.body.scrollLeft+10;
} else {
storage[0] = e.pageY+12;
storage[1] = e.pageX+12;
}
}
if (isNav) {
document.captureEvents(Event.MOUSEMOVE);
}
if (isIE || isNav) {
initTrail();
document.onmousemove = processEvent;
}
// End -->
</script>

Another interesting cursor effect (JavaScript)

Click here or on the image to see an example of what I mean by this.

In order for this to work you will need two images uploaded to your webspace, these are pupil.gif and whites.gif. You can download these files in eyes.zip here.

<script language="JavaScript">
var brOK=false, mie=false;
if(document.layers || document.all) brOK=true;
if(document.all) mie=true;
var ex=0, ey=0;
var ae, le, re, x0, y0, tid, realx, realy;

function navMove(e) {
ex=e.pageX;
ey=e.pageY;
moveeye()
return routeEvent(e);
}

function mieMove() {
ex=document.body.scrollLeft+event.x;
ey=document.body.scrollTop+event.y;
moveeye();
}

function moveeye() {
dy=ey-y0-20;
dx1=ex-x0-20;
dx2=ex-x0-60;
r=Math.sqrt(dx1*dx1+dy*dy);
if(r<20) r=20
dx1=dx1*10/r+x0+10;
dy1=dy*10/r+y0+10;

r=Math.sqrt(dx2*dx2+dy*dy);
if(r<20) r=20
dx2=dx2*10/r+x0+50;

ae.left=x0;
ae.top=y0;
le.left=dx1;
le.top=dy1;
re.left=dx2;
re.top=dy1;
}

function setHandlers() {
if(!mie){
y0=document.eyeballs.top;
x0=document.eyeballs.left;
ae=document.eyeballs;
le=document.lefteye;
re=document.righteye;
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove=navMove;
} else {
y0=document.all.eyeballs.style.pixelTop;
x0=document.all.eyeballs.style.pixelLeft;
ae=document.all.eyeballs.style;
le=document.all.lefteye.style;
re=document.all.righteye.style;
window.document.onmousemove=mieMove;
}
realx=x0+0.1;
realy=y0+0.1;
moveall();
}

function moveall() {
rx=realx+40
ry=realy+40;
rx+=(ex-rx)*0.1;
ry+=(ey-ry)*0.1;
realx=rx-40;
realy=ry-40;
x0=Math.round(realx);
y0=Math.round(realy);
moveeye();
tid=setTimeout('moveall()',100);
}

function placeeyes(x,y) {

if(brOK) {

ex=x+40;

ey=y+40;

s ='<DIV ID="dummy" STYLE="position:absolute; top:'+y+'; left:'+x+'; width:10; height:10;"> </DIV>';

s+='<DIV ID="eyeballs" STYLE="position:absolute; top:'+y+'; left:'+x+'; width:80; height:40;" ><IMG SRC="whites.gif" border=0></DIV>';

s+='<DIV ID="lefteye" STYLE="position:absolute; top:'+(y+10)+'; left:'+(x+10)+'; width:20; height:20;" ><IMG SRC="pupil.gif" border=0></DIV>';

s+='<DIV ID="righteye" STYLE="position:absolute; top:'+(y+10)+'; left:'+(x+50)+'; width:20; height:20;" ><IMG SRC="pupil.gif" border=0></DIV>';

document.writeln(s);

}

}

function clearEyes() {
if(tid) clearTimeout(tid);
}

placeeyes(200,100);
window.onload=setHandlers;
window.onunload=clearEyes;
</script>

Shake Me!

This is a silly bit of code. No wait - this is a bit of code to do something silly. Click on the button below to see what I mean.

In the head section of your page put this ...

<SCRIPT LANGUAGE="JavaScript">
<!--
function shakeme(n) {
if (self.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
}
// -->
</script>

Where you want the button to appear on your page put this ...

<form>
<input type=button onClick="shakeme(2)" value="Shake me!">
</form>

To change the length of time the browser window shakes for change the "2" in the code above to another value.

This code does not work in browser windows that contains frames.

Web Stuff | Audio | Basics | Browser | Code Tips | Design | Fonts | Forms | Frames (Page 1), (Page 2) | Images (Page 1), (Page 2) | Links | Random | Redirection | Sound | Video | Search Engines | Lycos UK | Home Server (Page 1), (Page 2), (Page 3)

HomePage | Optical Illusions | War Stories | QBasic | Dads Navy Days | Bristol | Bristol, USA | Bristol, Canada | Terre Haute | Miscellany | Web Stuff | About Ray | Site Map | Site Search | Messages | Credits | Links | Web Rings

This page created 5th March 2004, last modified 28th December 2004


GoStats stats counter