HTML, JavaScript, and picture tricks

Updated: 11/10/2017 by Computer Hope



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 web 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 web page
Allow visitors to see history of visiting your web page
Random quotes
Message displayed by time of day
Message on status bar
Random images and links
Onmouse over
Creating a password on your web page
Disable mouse right-click


Mouse over prompt
User chooses background color
Custom prompt

Mouse over prompt

A mouse over 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.


<div style="text-align:center">
  <table style="width:40%"> 
      <td><img height="64" src="" width="134" alt="Computer Hope"></td><td align="right"><a href="" onmouseover="alert('Produced by Computer Hope')">Who is responsible?</a></td>

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.


<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>

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. View the background demo.

  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]

Custom prompt

Crate a prompt of any inputted text to learn how the JavaScript alert function works and what a prompt looks like in your browser.


  <div style="text-align:center">
      <textarea cols="30" name="text" rows="3"></textarea>
  <div style="text-align:center"> 
       <input onclick="alert(this.form.text.value)" type="button" value="Say it!">
       <input name="cancel" type="reset" value="Clear Prompt">

What it looks like:

Additional information

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