Creating Mouseovers


This first dynamic HTML example demonstrates the use of dynamic styles by using the onmouseover attribute to handle mouse rollovers. In this example, positioning the mouse over some text changes the text’s size, enlarging it. You can see this example, mouseOver.html, in Figure 11.1.

image from book
Figure 11.1: The mouseOver application

When you position the mouse over the text in this application, that text gets enlarged, as shown in Figure 11.2.

image from book
Figure 11.2: Enlarging text with dynamic styles

This example simply uses the onmouseover attribute of a <span> element to change the font size:

 <html>     <head>         <title>             Using Dynamic Styles         </title>     </head>     <body>          <center>              <h1>                  Using Dynamic Styles              </h1>              <span onmouseover="this.style.fontSize = '48'">                 Move the mouse over this text to make it bigger.             </span>         </center>     </body> </html>

If you want to change the font size (or style) back when the mouse leaves, use the onmouseout attribute. Here’s an example where the text in an <h1> header turns red when the mouse is positioned over it, and goes back to black when the mouse leaves:

 <html>     <head>         <title>             Using Dynamic Styles         </title>     </head>     <body>         <center>            <h1 onmouseover="this.style.color = 'red';"                onmouseout="this.style.color = 'black';">                Turn this text red with the mouse.            </h1>         </center>     </body> </html>

In fact, if you’re only interested in creating mouseover effects, you can use the hover attribute, now supported in browsers such as Microsoft Internet Explorer and Mozilla Firefox. Here’s an example, hover.html, that displays two hyperlinks whose styles change when the mouse rolls over them. You can see this application in Figure 11.3.

image from book
Figure 11.3: The hover application

When you let the mouse roll over a hyperlink, that hyperlink’s style changes, as shown in Figure11.4.

image from book
Figure 11.4: Using the mouse to set a new style

Here’s how it works. This application starts by setting up various styles for the <a> element, including one for the hover attribute:

 <html>     <head>         <title>             Using The hover Attribute         </title>         <style>             a {font-family: verdana;               font-weight: normal; color: blue}             a:hover {font-weight: bold; color: red;               font-size: 24}             a:active {font-weight: bold; color: red;             background-color: darkgray}             a:visited {font-weight: bold; color: gray;             background-color: darkgray}         </style>     </head>         .         .         .

Then all you have to do is to create two new <a> elements and you’re done:

 <body>     <center>         <h1>            Using The hover Attribute         </h1>     </center>         <a href="http://www.ajaxsuperpower.com">             Roll the mouse over me         </a>         <a href="http://www.ajaxsuperpower.com">             No, over me!         </a> </body>



Ajax Bible
Ajax Bible
ISBN: 0470102632
EAN: 2147483647
Year: 2004
Pages: 169

Similar book on Amazon
HTML, XHTML, and CSS Bible
HTML, XHTML, and CSS Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
JavaScript Bible
PHP and MySQL Web Development (4th Edition)
PHP and MySQL Web Development (4th Edition)

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net