HTML, JavaScript, and picture tricks

Quick links

JavaScript
HTML

JavaScript

Celsius into Fahrenheit
Time and date
Make people stay
JavaScript bookmark
Letter by Letter scroll
Date count down
Make a new small window of another web page
Button to refresh your page
Send viewer back to page they came from
Change background color depending on the time of day
Random color every 5 seconds
Random color that can be stopped
Flashing colors when opening page
Allow visitors to see history of visiting your page
Random quotes
Message displayed by time of day
Message on status bar
Random images and links
Onmouse over
Creating a Password on your page
Disable mouse right-click

HTML

Mouse over prompt
User chooses background color
Your own prompt

Mouse over prompt

This allows you to prompt the person when their 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="http://cdn.computerhope.com/computer-hope.jpg" 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:

Computer HopeWho is responsible?

User chooses background color

Allow your users to choose their background color using JavaScript by adding the below code to your page. 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='green'">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

Instead of using links this example uses a form drop down menu that allows the user to select their background color. The source code for this example is shown below. Click here to view demo page.

<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 themselves. We really couldn't think of anything that this could be used for except for the person to talk to themselves; 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:

Additional information

  • See our JavaScript definition for further information and related links on this term.