html code tricks
Home
practise html tirkcs
Page Title

SOURCE CODE

CELSIUS INTO FAHRENHEIT

<script language="LiveScript">
<!--
function temp (form)
{form.fahrenheit.value = form.celsius.value*1.8+32}
//-->
</script>

<form>
<div align="center"><center><p><input type="text" size="15" name="celsius"> <strong>Degrees
Celsius</strong> <input type="button" value=" = " onclick="temp(this.form)"> <input
type="text" size="15" name="fahrenheit"> <strong>Degrees Fahrenheit</strong> </p>
</center></div>
</form>

----------------------------------------------------------------------------------------

DATE AND TIME

SOURCE CODE

<b>Todays Date: </b><SCRIPT LANGUAGE="JavaScript">
<!--
Stamp = new Date();
document.write('' + (Stamp.getMonth() + 1) +"/"+Stamp.getDate()+ "/"+Stamp.getYear() + ' <br> ');
var Hours;
var Mins;
var Time;
Hours = Stamp.getHours();
if (Hours >= 12) {
Time = " P.M.";
}
else {
Time = " A.M.";
}

if (Hours > 12) {
Hours -= 12;
}

if (Hours == 0) {
Hours = 12;
}

Mins = Stamp.getMinutes();

if (Mins < 10) {
Mins = "0" + Mins;
}

document.write('<B>Todays Time:</b> ' + Hours + ":" + Mins + Time + '');

//-->
</SCRIPT>

------------------------------------------------------------------

MAKING PEOPLE STAY

EXAMPLE

When the user that is currently visiting the site such as this site the following Javascript will make the user stay on the web page by giving a message to how long they visited the particular web site as well as opening a new window.

We have mainly placed this script on Computer Hope to look at the source code for ideas for other possible Javascript and do not recommend anyone placing this script on their pages as this irritates the viewers of your web pages.

In addition we have placed as an example this code into this page and for you to do the same you must include this into the beginning of your web page within your head statements as well as ending the page once completed with the </body>

SOURCE CODE

<head><script language="JavaScript">

// This script was written by Kurt A>
//http://www.geocities.com/soho/lofts/1238
// I only ask that you leave this plug to my page if you use the script.
// It worked for me, If it works for anyone else ----- I can't say.
// It times the user for a page and gives a response dependant on the
// duration of the visit to the page.
// It doesn't work well with the #links because anytime a back button
//is hit the script will envoke itself.

var STS = 0;
var ETS = 0;
var TIMON = 0;

function getStime() {

// optional audio welcome
// location = "welcome.au";

now = new Date();

STS = (now.getTime());

// optional.
// changes the window status bar at bottom of page return true must remain

window.status = "I hope you enjoy"; return true ;

}

function figure() {

// code to get seconds from logon to logoff

postnow = new Date();

ETS = (postnow.getTime());

TIMEON = ((ETS - STS) / 1000);

// if less than 60 seconds

if (TIMEON < 60) {

// open an alert box and plead with user

alert ( TIMEON + " Seconds, Give it a chance");

// open a new window to play an audio plea.

win = window.open ("under.au","newwin");

}

else {
alert (TIMEON + "Thanks for reading");
win=window.open("http://www.computerhope.com","newwin");

}

return true;
}
</script>

<title></title>

</head>

<body onload="getStime()" ; onUnload="figure()" ; TEXT="#000040" LINK="#268999" VLINK="#FF0000" ALINK="#FFFF00">

</body>

----------------------------------------------------------------

SOURCE CODE

<p><script LANGUAGE="Javascript">

<!-- Begin

if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4)) {

var url="http://www.computerhope.com";
var title="Computer Hope";

document.write('<A HREF="javascript:window.ext');
document.write('ernal.AddFavorite(url,title);" ');
document.write('onMouseOver=" window.status=');
document.write("'Add our site to your favorites!'; return true ");
document.write('"onMouseOut=" window.status=');
document.write("' '; return true ");
document.write('">Add our site to your favorites!</a>');
}
else {
var msg = "Don't forget to bookmark us!";
if(navigator.appName == "Netscape") msg += " (CTRL-D)";
document.write(msg);
}

// End -->
</script></p>

----------------------------------------------------

LETTER BY LETTER SCROLL

SOURCE CODE

<SCRIPT LANGUAGE="JavaScript">

<!-- Original: Pun Man Kit <mkpunnl@netvigator.com> -->

<!-- Begin
function scroll(jumpSpaces,position) {
var msg = "There is Hope - Computer Hope"
var out = ""
if (killScroll) {return false}
for (var i=0; i<position; i++){
out += msg.charAt(i)}
for (i=1;i<jumpSpaces;i++) {
out += " "}
out += msg.charAt(position)
window.status = out
if (jumpSpaces <= 1) {
position++
if (msg.charAt(position) == ' ') {
position++ }
jumpSpaces = 100-position
}
else if (jumpSpaces > 3) {
jumpSpaces *= .75}
else {
jumpSpaces--}
if (position != msg.length) {
var cmd = "scroll(" + jumpSpaces + "," + position + ")";
scrollID = window.setTimeout(cmd,5);
}
else {
scrolling = false
return false}
return true;
}
function startScroller() {
if (scrolling)
if (!confirm('Re-initialize snapIn?'))
return false
killScroll = true
scrolling = true
var killID = window.setTimeout('killScroll=false',6)
scrollID = window.setTimeout('scroll(100,0)',10)
return true
}
var scrollID = Object
var scrolling = false
var killScroll = false
// End -->
</SCRIPT>
</HEAD>

<!-- STEP TWO: Add the onLoad event handler to the BODY tag -->

<BODY onLoad="startScroller()">
--------------------------------------------------------

SOURCE CODE

Change the date that is bold to your own special date to get your own customized date countdown.

<SCRIPT LANGUAGE="JAVASCRIPT"><!-- hide this script tag's contents from old browsers

today = new Date();

BigDay = new Date("December 25, 2001")
msPerDay = 24 * 60 * 60 * 1000 ;
timeLeft = (BigDay.getTime() - today.getTime());
e_daysLeft = timeLeft / msPerDay;
daysLeft = Math.floor(e_daysLeft);
e_hrsLeft = (e_daysLeft - daysLeft)*24;
hrsLeft = Math.floor(e_hrsLeft);
minsLeft = Math.floor((e_hrsLeft - hrsLeft)*60);
document.write("There are only<BR> <H4>" + daysLeft + " days " + hrsLeft +" hours and " + minsLeft + " minutes left </H4> Until December 25th 2001 (Christmas)<P>");

// -- done hiding from old browsers --></SCRIPT>

-------------------------------------------------------------

New small window

SOURCE CODE

<p><script language="JavaScript"><!--

function NAME_IT() {

window.open('search.htm','EANITHING','toolbar=no,location=no, directories=no, status=yes, menubar=no, resizable=yes, copyhistory=no, scrollbars=no, width=300, height=300');

}

// --></script></p>

<p align="center"><a href="javascript:NAME_IT()"

onmouseover="window.status='Click me and you will get the script!'; return true">SEARCH

ENGINE </a></p>

-----------------------------------------

refresh

SOURCE CODE

<FORM>
<INPUT TYPE="button" VALUE="Reload Page" onClick="history.go(0)">
</FORM>

-----------------------------

Send the vistors back to where they come from.

SOURCE CODE

<script language="JavaScript">
<!--//hiding it
setTimeout("history.back();", 4000);
//end hiding it-->
</script>

------------------------------------

DEPENDING ON TIME OF DAY
EXAMPLE

The following source code will change the background color of a page depending upon the color of the day.

As you can see in this example the page will be a different color reflecting the time of day.

SOURCE CODE

<script>
<!--
//Feel free to copy and modify this script, but please keep the comment lines!
//Written by Mattias Sjöberg 8/8-1996
//-----------------------------------------
//| mattias.sjoberg@swipnet.se |
//|---------------------------------------|
//| //\\ //\\ /// | |
//| // \\// \\ / | Advertise |
//|// \\ /// | |
//| Mattias / | Here |
//| Sjoberg /// | |
//|---------------------------------------|
//| www.geocities.com/SiliconValley/7116 |
//| Vote for my page the above URL |
//-----------------------------------------


var now = new Date();
var hours = now.getHours();
var psj=0;

//18-19 night
if (hours > 17 && hours < 20){
document.write('<body bgcolor="orange" text="#FFFFFF">')
}

//20-21 night
if (hours > 19 && hours < 22){
document.write('<body bgcolor="orangered" text="#FFFFFF">')
}

//22-4 night
if (hours > 21 || hours < 5){
document.write('<body bgcolor="black" text="#FFFFFF">')
}

//9-17 day
if (hours > 8 && hours < 18){
document.write('<body bgcolor="deepskyblue" text="#FFFFFF">')
}

//7-8 day
if (hours > 6 && hours < 9){
document.write('<body bgcolor="skyblue" text="#FFFFFF">')
}

//5-6 day
if (hours > 4 && hours < 7){
document.write('<body bgcolor="steelblue" text="#FFFFFF">')
}


//-->
</script>

-------------------------------------------------------

background color change every 5 second.

SOURCE CODE

</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- Start of JavaScript code --------
//
// Description: Randomly change background color every 5 seconds
//
// NewcWare 1997
// Author: Scott Newcomer 3/1997
// Email: nuke@bright.net
//
function setbackground()
{
window.setTimeout( "setbackground()", 5000); // 5000 milliseconds delay

var index = Math.round(Math.random() * 9);

var ColorValue = "FFFFFF"; // default color - white (index = 0)

if(index == 1)
ColorValue = "FFCCCC"; //peach
if(index == 2)
ColorValue = "CCAFFF"; //violet
if(index == 3)
ColorValue = "A6BEFF"; //lt blue
if(index == 4)
ColorValue = "99FFFF"; //cyan
if(index == 5)
ColorValue = "D5CCBB"; //tan
if(index == 6)
ColorValue = "99FF99"; //lt green
if(index == 7)
ColorValue = "FFFF99"; //lt yellow
if(index == 8)
ColorValue = "FFCC99"; //lt orange
if(index == 9)
ColorValue = "CCCCCC"; //lt grey

document.bgColor=ColorValue;

}
// -- End of JavaScript code -------------- -->
</SCRIPT>
<BODY onLoad="setbackground();">

-------------------------------------------------

SOURCE CODE

<script language = "JavaScript">
<!-- Begin hiding here --

//**************************************************************************
//* this script by Jason Schanker (jcheetah@orion.webspan.net) *
// * comes from *
// * "http://www.webspan.net/~herbs/jcheetah/web_design/javascript/bgcolor_changer.html"*
// * You may copy this source freely if credit is given to the author *
//**************************************************************************


function color_changer(){

var now = new Date();

var seconds = now.getSeconds();

if(seconds == 0 || seconds == 7 || seconds == 14 || seconds == 21 || seconds == 28 || seconds == 35 || seconds == 42 || seconds == 49 || seconds == 56) document.bgColor = "red";

if(seconds == 1 || seconds == 8 || seconds == 15 || seconds == 22 || seconds == 29 || seconds == 36 || seconds == 43 || seconds == 50 || seconds == 57) document.bgColor = "orange";

if(seconds == 2 || seconds == 9 || seconds == 16 || seconds == 23 || seconds == 30 || seconds == 37 || seconds == 44 || seconds == 51 || seconds == 58) document.bgColor = "yellow";

if(seconds == 3 || seconds == 10 || seconds == 17 || seconds == 24 || seconds == 31 || seconds == 38 || seconds == 45 || seconds == 52 || seconds == 59) document.bgColor = "green";

if(seconds == 4 || seconds == 11 || seconds == 18 || seconds == 25 || seconds == 32 || seconds == 39 || seconds == 46 || seconds == 53 || seconds == 60) document.bgColor = "blue";

if(seconds == 5 || seconds == 12 || seconds == 19 || seconds == 26 || seconds == 33 || seconds == 40 || seconds == 47 || seconds == 54) document.bgColor = "indigo";

if(seconds == 6 || seconds == 13 || seconds == 20 || seconds == 27 || seconds == 34 || seconds == 41 || seconds == 48 || seconds == 55) document.bgColor = "purple";

setTimeout("color_changer()", 1000);

}

// -- End hiding here -->
</script>
<h1><center>Welcome To The Twilight Zone</h1></center>
<form name = control>
<input name = "on_off" type = "button" value = "On" onClick = "color_changer()">
<input type = "button" value = "Off" onClick = "history.go(0)">
</form>
<p>

---------------------------------------------------

FLASHING COLORS WHEN OPENING PAGE

EXAMPLE

Before this page loaded you should have seen a multitude of colors this would be what it would look like, hit refresh if you would like to see it again.

Important: Ensure if you have a body statement within your HTML code that the following script is placed after it and that the original body script does not have a background statement.

SOURCE CODE

<script>
function initArray() {
this.length = initArray.arguments.length
for (var i = 0; i < this.length; i++)
this[i+1] = initArray.arguments[i]
}

var hexChars = "0123456789ABCDEF";

function Dec2Hex (Dec) {
var a = Dec % 16;
var b = (Dec - a)/16;
hex = "" + hexChars.charAt(b) + hexChars.charAt(a);
return hex;
}

function bgChanger (begin, end, steps) {
steps = steps -1 ;

redA = begin.charAt(0) + begin.charAt(1);
red_valA = parseInt(redA,'16');
redB = end.charAt(0) + end.charAt(1);
red_valB = parseInt(redB,'16');
red_int = ((red_valB - red_valA) / steps) * -1;
grnA = begin.charAt(2) + begin.charAt(3);
grn_valA = parseInt(grnA,'16');
grnB = end.charAt(2) + end.charAt(3);
grn_valB = parseInt(grnB,'16');
grn_int = ((grn_valB - grn_valA) / steps) * -1;
bluA = begin.charAt(4) + begin.charAt(5);
blu_valA = parseInt(bluA,'16');
bluB = end.charAt(4) + end.charAt(5);
blu_valB = parseInt(bluB,'16');
blu_int = ((blu_valB - blu_valA) / steps) * -1;

step = 2;
red = red_valA;
grn = grn_valA;
blu = blu_valA;

document.bgColor = begin;

while ( steps >= step ) {
red -= red_int;
red_round = Math.round(red);
red_hex = Dec2Hex(red);

grn -= grn_int;
grn_round = Math.round(grn);
grn_hex = Dec2Hex(grn);

blu -= blu_int;
blu_round = Math.round(blu);
blu_hex = Dec2Hex(blu);

document.bgColor = red_hex + grn_hex + blu_hex;
// document.write("<br>bgcolor = " + red_hex + grn_hex + blu_hex);

step++;
}
document.bgColor = end;
}

</script>
<script>
<!--
// black to black (pause)
bgChanger("000000","000000",25);
// black to red
bgChanger("000000","FF0000",25);
// red to black
bgChanger("FF0000","000000",25);
// black to purple
bgChanger("000000","AA00EE",25);
// purple to black
bgChanger("AA00EE","000000",25);
// black to blue
bgChanger("000000","0000FF",25);
// blue to black
bgChanger("0000FF","000000",25);
// black to white (pause)
bgChanger("000000","FFFFFF",25);
// --></script>

--------------------------------------------------------------------------------

ALLOW VISITORS TO SEE HISTORY OF VISITING YOUR PAGE

EXAMPLE

Allows your visitors to see really how addicted they are to your web page. Information is stored on there hard drive with a cookie and each time they come back it will refer to the cookie and count up upon visit.

SEE EXAMPLE

SOURCE CODE

<SCRIPT LANGUAGE = "JavaScript">
<!-- Begin Script
/*
-----------------------------------------
| By Mattias Sjöberg 9/10-96 |
|You're welcome to use/edit this script.|
| Keep the comments and drop me a note. |
-----------------------------------------
| mattias.sjoberg@swipnet.se |
| www.geocities.com/SiliconValley/7116 |
| Vote for my page at the above URL |
-----------------------------------------
*/
var expDays = 30;
var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function Who(info){
// Who
var VisitorName = GetCookie('VisitorName')
if (VisitorName == null) {
VisitorName = prompt("Who are you?");
SetCookie ('VisitorName', VisitorName, exp);
}

return VisitorName;
}

function When(info){
// When
var rightNow = new Date()
var WWHTime = 0;
WWHTime = GetCookie('WWhenH')

WWHTime = WWHTime * 1
/*This part is written by
Cut & Paste JavaScript
Copyright 1996, IMA STUDIOS, Inc.
This code may not be resold.
This Copyright notice must be included
on every document that contains this code.
A link to http://www.imastudios.com should
be included somewhere on your document.
*/
var lastHereFormatting = new Date(WWHTime); // Date-i-fy that number
var intLastVisit = (lastHereFormatting.getYear() * 10000)+(lastHereFormatting.getMonth() * 100) + lastHereFormatting.getDate()
var lastHereInDateFormat = "" + lastHereFormatting; // Gotta use substring functions
var dayOfWeek = lastHereInDateFormat.substring(0,3)
var dateMonth = lastHereInDateFormat.substring(4,11)
var timeOfDay = lastHereInDateFormat.substring(11,16)
var year = lastHereInDateFormat.substring(23,25)
var WWHText = dayOfWeek + ", " + dateMonth + " at " + timeOfDay // display



SetCookie ("WWhenH", rightNow.getTime(), exp)

return WWHText;
}

function Count(info){
var psj=0;
// How many times
var WWHCount = GetCookie('WWHCount')
if (WWHCount == null) {
WWHCount = 0;
}
else{
WWHCount++;
}
SetCookie ('WWHCount', WWHCount, exp);


return WWHCount;
}



function set(){
VisitorName = prompt("Who are you?");
SetCookie ('VisitorName', VisitorName, exp);
SetCookie ('WWHCount', 0, exp);
SetCookie ('WWhenH', 0, exp);
}

// ********************* General Cookie handling *********************
// Cookie Functions - Second Helping (21-Jan-96)
// Written by: Bill Dortch, hIdaho Design <bdortch@netw.com>
// The following functions are released to the public domain.

function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}

function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}

function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
// This cookie is history
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();

}
// End Script -->

</SCRIPT>

<script>
document.write("Hello <b>" + Who() + "</b>. You've been here <b>" + Count() + "</b> time(s). Last time was <b>" + When() +"</b>.")
</script>
<br>
<a href="JavaScript:set()">Change name</a>

----------------------------------------------------------------------

RANDOM QUOTES

EXAMPLE

"Few things are harder to put up with than the annoyance of a good example."
-- Mark Twain

SOURCE CODE

<SCRIPT LANGUAGE="JavaScript">
//store the quotations in arrays
quotes = new Array(6);
authors = new Array(6);
quotes[0] = "I have a new philosophy. I'm only going to dread one day at a time.";
authors[0] = "Charles Schulz";
quotes[1] = "Reality is the leading cause of stress for those in touch with it.";
authors[1] = "Jack Wagner";
quotes[2] = "Few things are harder to put up with than the annoyance of a good example.";
authors[2] = "Mark Twain";
quotes[3] = "The pure and simple truth is rarely pure and never simple.";
authors[3] = "Oscar Wilde";
quotes[4] = "There's no business like show business, but there are several businesses like accounting.";
authors[4] = "David Letterman";
quotes[5] = "Man invented language to satisfy his deep need to complain.";
authors[5] = "Lily Tomlin";

//calculate a random index
index = Math.floor(Math.random() * quotes.length);

//display the quotation
document.write("<DL>\n");
document.write("<DT>" + "\"" + quotes[index] + "\"\n");
document.write("<DD>" + "-- " + authors[index] + "\n");
document.write("</DL>\n");

//done
</SCRIPT>

--------------------------------------------------------------------

MESSAGE DISPLAYED BY TIME OF DAY

EXAMPLE

Good Evening! Welcome to prime time on the web!

SOURCE CODE

<p><script language="JavaScript">

<!--

document.write("<center><font size=+1>")

 day = new Date()

 hr = day.getHours()

 if (hr ==1)

 document.write("Good morning! 1AM and still your going! ")

 if (hr ==2)

 document.write("Hey, it is past 2AM! The bars must be closed!")

 if (hr ==3)

 document.write("Hey, it is after 3AM! Are you a vampire or what?")

 if (hr ==4)

 document.write("4AM? You must roam all night huh!")

 if (hr ==5)

 document.write("Whoa! It's almost daylight and your still going!")

 if (hr ==6)

 document.write("Hey, isn't it too early to be using your computer")

 if ((hr == 6) || (hr ==7) || (hr ==8) || (hr == 9) || (hr ==10))

 document.write("Good Morning!")

 if (hr ==11)

 document.write("11AM...What are you doing surfing JavaScript pages so early??")

 if (hr ==12)

 document.write("NOON! Great, it must be time for me to eat breakfast!")

 if (hr ==14)

 document.write("It's 2PM. Have you eaten lunch yet??")

 if ((hr==15) || (hr==16) || (hr==13))

 document.write("Good Afternoon!")

 if ((hr==17) || (hr==18) || (hr==19) || (hr==20) || (hr==21) || (hr==22))

 document.write("Good Evening! Welcome to prime time on the web!")

 if (hr==23)

 document.write("It's almost midnight...Aren't you sleepy yet?")

 if (hr==0)

 document.write("It's midnight... do you ever sleep?")

 document.write("</font></center>")

 //--->

 </script></p>

------------------------------------------------

MESSAGE ON STATUS BAR

EXAMPLE

Look at the bottom of your screen and you should see "Welcome to Computer Hope; helping you with ALL your computer Questions."

SOURCE CODE

<SCRIPT LANGUAGE="JavaScript">
<!-- //hide script

messageNum = 0;
//first message to be displayed in 3 seconds
setTimeout("messageChanger();", 3000);

//second message
function messageChanger() {
if (messageNum ==0) {
defaultStatus = "Welcome to Computer Hope";
messageNum = 1;
} else {
defaultStatus = "Helping you with ALL Computer Questions.";
messageNum = 0;
}

//Schedule the next message
setTimeout("messageChanger();", 3000);
}

// --> </SCRIPT>

-------------------------------------------------------

EASY PASSWORD FOR SITE

EXAMPLE

As shown when the page opened. This script will encounter issues if placed on the same page as the destination page (such as we have done on this page). When implementing this we recommend you place this on a page of its own and direct the correct password users to another page.

Keep in mind that this password is not a recommended method for sites that need to be 100% secure as experienced users can easily bypass this.

If you are looking for a 100% secure method of implementing passwords you will need to create a .htaccess file on the server containing the security information. Additional information on how to do this can be found through your ISP (if supported).

SOURCE CODE

<script language="Javascript">

<!--

var password = "please"
var x = prompt("Enter in the password "," ")
if (x.toLowerCase() == password) {
alert("Come right in \n \n You've entered in the right password")
location = "index.htm"
}

else {
location = "bad.htm"
}

//-->

</script>

-------------------------------------------

MOUSE OVER PROMPT

This allows you to prompt the person when there mouse is over a particular link or picture, great for letting someone know what a picture is, if the image is small.

Source:

<CENTER><TABLE WIDTH="40%"><TR><TD><A HREF=""
ONMOUSEOVER = "alert('Welcome to ComputerHope')")>
<IMG SRC="title.gif" BORDER="0" WIDTH="134" HEIGHT="64"></A></TD>
<TD ALIGN=RIGHT><A HREF=""
ONMOUSEOVER = "alert('Produced by Computer Hope')")>
Who is responsible?</A></TD></TR></TABLE></CENTER>

What it looks like:

USER CHOOSES BACKGROUND COLOR

Because we have an image as the background unfortunately we cannot demonstrate what this will look like on this page however click HERE to view demo.

SOURCE:

<center>
<a href="" onmouseover="document.bgColor='turquoise'">C</a>
<a href="" onmouseover="document.bgColor='pink'">h</a>
<a href="" onmouseover="document.bgColor='blue'">o</a>
<a href="" onmouseover="document.bgColor='red'">o</a>
<a href="" onmouseover="document.bgColor='yellow'">s</a>
<a href="" onmouseover="document.bgColor='green'">e</a>
<a href="" onmouseover="document.bgColor='white'">your</a>
<a href="" onmouseover="document.bgColor='greem'">o</a>
<a href="" onmouseover="document.bgColor='seagreen'">w</a>
<a href="" onmouseover="document.bgColor='magenta'">n</a>
<a href="" onmouseover="document.bgColor='fusia'">b</a>
<a href="" onmouseover="document.bgColor='purple'">a</a>
<a href="" onmouseover="document.bgColor='navy'">c</a>
<a href="" onmouseover="document.bgColor='royalblue'">k</a>
<a href="" onmouseover="document.bgColor='Skyblue'">g</a>
<a href="" onmouseover="document.bgColor='brown'">r</a>
<a href="" onmouseover="document.bgColor='almond'">o</a>
<a href="" onmouseover="document.bgColor='coral'">u</a>
<a href="" onmouseover="document.bgColor='olivedrab'">n</a>
<a href="" onmouseover="document.bgColor='teal'">d</a>
<a href="" onmouseover="document.bgColor='black'">color!</a></h2>
</center>

Another Choose your background

Because we have an image as the background unfortunately we cannot demonstrate what this will look like on this page however click HERE to view demo.

<form>Change the background color:
<select name="backGround" size="1" onChange=(document.bgColor=backGround.options[backGround.selectedIndex].value)>
<option value="000000">[Black]
<option value="730200">[Dark Red]
<option value="231800">[Brown]
<option value="044302">[Dark Green]
<option value="0D09A3">[Dark Blue]
<option value="444444">[Gray]
<option value="FF0400">[Red]
<option value="EFE800">[Yellow]
<option value="05EF00">[Green]
<option value="0206FF">[Blue]
<option value="AE08EF">[Violet]
<option value="FF8C8A">[Mauve]
<option value="FFCCCC">[Peach]
<option value="FFCC99">[Orange]
<option value="D5CCBB">[Tan]
<option value="DDDDDD">[Light Gray]
<option value="FBFF73">[Light Yellow]
<option value="7CFF7D">[Light Green]
<option value="A6BEFF">[Light Blue]
<option value="FFFFFF" selected>[White]
</select></form>

YOUR OWN PROMPT

This allows the person viewing your page to prompt them self, we really could think of anything that this could be used for except for the person to talk to them self however kind of cool.

Source:

<CENTER><FORM>
<TEXTAREA NAME="text" ROWS="3" COLS="30"></TEXTAREA><p>
<INPUT TYPE="button" VALUE="Say it!"
onClick="alert(this.form.text.value)"> <INPUT TYPE="reset" NAME="cancel" VALUE="Clear Prompt">
</FORM></CENTER><P>

What it looks like:

OTHER COOL THINGS

Current population
Current U.S. national debt

CURRENT POPULATION

The current population is:

To put this on your page copy and cut the following:

<CENTER>
The current population is:
<IMG ALIGN=middle SRC="http://sunsite.unc.edu/lunarbin/pop.gif"></CENTER>

NATIONAL DEBT

The current national debt is:

To put this on your page copy and cut the following:

<CENTER>The current national debt is:
<IMG SRC="http://www.brillig.com/debt_clock/debtc.gif" WIDTH=150 HEIGHT=16>
</CENTER>

INDEX Help

Category:
 
HTML Help

Companies:

None

Related Pages:

 

RESOLVED Help

Were you able to locate the answer to your questions?

 

---------------------------------------------

 Cool Tricks


Here are some cool tricks you can use on your site. They use various languages such as CSS, Javascript, and even just plain HTML. Remember that although they may seem pretty cool to you, not everyone is using a browser that can see these tricks. In other words, have fun with them, but don't rely on them to work for everyone.


Non-underlined Links
How do I make my HTML code viewable?
How do I make my links change color when I move my mouse over them?
Mailto link with subject
Icon for your site's bookmark in IE5 (favicon.ico)
Page Transitions


Non-underlined Links
This is quite easy, and looks very professional when used correctly. Add the following code between your </TITLE> and </HEAD> tags:


<STYLE TYPE="text/css">
<!--
A:link {text-decoration:none}
A:visited {text-decoration:none}
--></STYLE>



How do I make HTML code viewable?
What happens when you want to make HTML code visible to someone visiting your page? For instance, let's say that you wanted to show your visitors the code to center text. You can't just type this:

<CENTER>My favorite TV show is South Park.</CENTER>


If you type that, your result will be "My favorite TV show is South Park." actually centered. The code in the brackets will not be visible to your visitor at all. To make it visible, you'll have to use ASCII character codes. I know, it sounds scary, but it's really quite easy. Here's the code:

&lt;CENTER&gt;My favorite TV show is South Park.&lt;/CENTER&gt;


&lt; is the ASCII code for the left angle bracket, and &gt; is the ASCII code for the right angle bracket. Use those two codes like in the above example, and this is what you'll get:

<CENTER>My favorite TV show is South Park.</CENTER>



How do I make my links change color when I move my mouse over them?
This trick looks pretty cool, but unfortunately it only works with newer versions of MSIE, and doesn't work at all with Netscape. To add this to your page, just add the following code to your page between the </TITLE> and </HEAD> tags:

<STYLE TYPE="text/css">
<!--
A:link{ text-decoration: none; color:"#COLORCODE" }
A:visited{ text-decoration: none; color="#COLORCODE" }
A:hover{ text-decoration: none; color="#COLORCODE" }
--<
</STYLE>

Now, all that's left to do is insert the color codes in place of "COLORCODE." You can find a long list of the colors you can use here.

Note: The code here has the links non-underlined. If you want your link underlined, simply remove all instances of "text-decoration: none;" from your code.


Mailto link with subject
This one's really easy. If you can make a mailto link, you can make this. I'll just give you an example.

Regular mailto link:

<a href="mailto:billg@microsoft.com">Email Billy Boy</a>


Mailto link with subject:

<a href="mailto:billg@microsoft.com?Subject=Heya">Email Billy Boy</a>


Icon for your site's bookmark in IE5 (favicon.ico)
There's a new feature in IE5 that lets webmasters create a small 16x16 icon for their website that will appear right to the left of your site's title in IE5's Favorites list. It's not mandatory, but it's pretty cool to have. To make an icon for your site, download some icon creation software from Download.com (there's tons of it there) or use the java-based icon creator at favicon.com. Make sure it is saved as favicon.ico and upload it to every directory in your site that contains HTML files.


Page Transitions
Transitions are a nice, fun little novelty that not too many people know about. This is done by adding a simple META tag between the and tags instead of using Javascript or something of that nature, so it's not that much of a pain to your visitors. Transitions can only be seen if you're using a later version of Internet Explorer. The tag structure is like this:


<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=3,Transition=0)">

Where it says "Duration=3", this is where you specify how long you want the transition to last. With the 3 there, it is set to last 3 seconds. Where it says "Transition=0", replace the zero with the number of the transition you'd like to use. I've made a list of transitions below with thier numbers. Click on the name of a transition to see an example of it.

privet