js_2 – rollover

I think you will like this one.

There are many programming languages used on the web. HTML is the code used to create and format Web pages; JavaScript is a scripting language used to control the way Web pages appear and behave. It can also be use to add some neat effects to your pages.

  • In this exercise, you will create a simple HTML page that displays the word Hello World with a mouse-over effect

In a mouseover, the text in the Web page changes appearance as the mouse cursor rolls over the text.  You don’t usually see rollovers any more. Why?  … because of touch screens – though possible – it is hard to have a “finger over” effect.

  1. Create a new document in Notepad++ and type in the following HTML code, as shown here:

<HTML>

<HEAD>

<TITLE> Mouse Rollover </TITLE>

<style>

a:link { background: #088; color: #fff; font-family: arial, sans-serif; text-decoration: none; font-weight: bold;}

a:hover { background: #403; color: #fff; font-family: arial, sans-serif; text-decoration: none; font-weight: bold; }

</style>

</HEAD>

<body>

<p style=”text-align:center”>

<a href=”hello-world.com/”> Hello World! </a>

</p>


</body>

</HTML>

  1. Save the HTML file as home3.html.
  2. Open your file with a web browser to preview it – and roll your mouse over the text.
  3. Notice that the text’s background changes to a different color. The change is caused by the “mouseover” code.

____________________________________________________________________________________________________

ASSIGNMENT

After working through the above examples…

Use Notepad++ or some such program and create an HTML javascript that:

  • uses the code from above
  • has text and a hyperlink of your own choice

Save your script file as home3.html and run it to test it.  Then hand in your code as a .txt file.

____________________________________________________________________________________________________