HTML, JavaScript, and picture tricks

• Celsius into Fahrenheit.
• Time and date.
• Make people stay.
• JavaScript bookmark.
• Letter by letter scroll.
• Date countdown.
• 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 quote.
• 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.
• Pop-up message box.

• Mouse over prompt.
• User chooses background color.
• Custom prompt.

Mouse over prompt

A mouse over can display a dialog box when over a link give more information about the picture.

Source

<table class="tab"> 
 <tr>
  <td><img height="82" src="/cdn/computer-hope.jpg" width="412" alt="Computer Hope"></td>
  <td align="right"><a href="" onmouseover="alert('Created by Computer Hope')">Who is responsible?</a></td>
 </tr>
</table>

What it looks like

User chooses background color

Allow your users to choose their background color using JavaScript by adding the below code to your page.

Source

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

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

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.

Source

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

What it looks like