Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Rollovers with onmouseover and onmouseout - JavaScript(Js)

Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - JavaScript: Events

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Rollovers with onmouseover and onmouseout - JavaScript(Js)

Two more events fired by mouse movements are onmouseover and onmouseout.

Rollovers with onmouseover and onmouseout

 

Two more events fired by mouse movements are onmouseover and onmouseout. When the mouse cursor moves into an element, an onmouseover event occurs for that element. When the cursor leaves the element, an onmouseout event occurs. Figure 13.5 uses these events to achieve a rollover effect that updates text when the mouse cursor moves over it. We also introduce a technique for creating rollover images.

 

        <?xml version = "1.0" encoding = "utf-8"?>

 

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <!-- Fig. 13.5: onmouseoverout.html -->

 

    <!-- Events onmouseover and onmouseout. -->

 

    <html xmlns = "http://www.w3.org/1999/xhtml">

 

    <head>

 

    <title>Events onmouseover and onmouseout</title>

 

      <style type = "text/css">

 

      body  { background-color: wheat }

 

table { border-style: groove;

text-align: center;

td  font-family: monospace;

font-weight: bold }

{ width: 6em }

 

      <script type = "text/javascript">

      <!--

 

      image1 = new Image();

 

      image1.src = "heading1.gif";

 

      image2 = new Image();

 

      image2.src = "heading2.gif";

 

      function mouseOver( e )

{

if ( !e )

         var e = window.event;

                            

         var target = getTarget( e );      

                            

// swap the image when the mouse moves over it

if ( target.id == "heading" )

{                      

          target.src = image2.src;         

         return;

} // end if

                            

// if an element's id is defined, assign the id to its color

// to turn hex code's text the corresponding color

if ( target.id )

              target.style.color = target.id;  

} // end function mouseOver

      function mouseOut( e )

{

if ( !e )

var e = window.event;

         

var target = getTarget( e );

         

// put the original image back when the mouse moves away

if ( target.id == "heading" )

{        

         target.src = image1.src;

return;

} // end if

// if    an element's id is defined, assign id to innerHTML   

// to    display the color name  

if ( target.id )  

         target.innerHTML = target.id;     

} // end function mouseOut  

      // return either e.srcElement or e.target, whichever exists

 

      function getTarget( e )

{

if ( e.srcElement )

         return e.srcElement;

else

         return e.target;   

} // end function getTarget

      document.onmouseover = mouseOver;

 

      document.onmouseout = mouseOut;

      // -->

 

      </script>

 

      </head>

 

      <body>

 

      <img src = "heading1.gif" id = "heading" alt = "Heading Image" />

 

      <p>Can you tell a color from its hexadecimal RGB code

 

      value? Look at the hex code, guess its color. To see

 

      what color it corresponds to, move the mouse over the

 

      hex code. Moving the mouse out of the hex code’s table

 

      cell will display the color name.</p>

 

      <table>

<tr>

<td id = "Black">#000000</td>

<td      id =  "Blue">#0000FF</td>

<td      id =  "Magenta">#FF00FF</td>

      <td id = "Gray">#808080</td>

 

      </tr>

<tr>

<td id = "Green">#008000</td>

<td      id =  "Lime">#00FF00</td>

<td      id =  "Maroon">#800000</td>

      <td id = "Navy">#000080</td>

 

      </tr>

      <tr>

       <td id = "Olive">#808000</td>

 

       <td id = "Purple">#800080</td>

 

       <td id = "Red">#FF0000</td>

 

       <td id = "Silver">#C0C0C0</td>

       </tr>

       <tr>

 

       <td id = "Cyan">#00FFFF</td>

 

       <td id = "Teal">#008080</td>

 

       <td id = "Yellow">#FFFF00</td>

 

       <td id = "White">#FFFFFF</td>

</tr>

        </table>

 

        </body>

 

</html>






Fig. 13.5 | Events onmouseover and onmouseout.

To create a rollover effect for the image in the heading, lines 20–23 create two new JavaScript Image objects—image1 and image2. Image image2 displays when the mouse hovers over the image. Image image1 displays when the mouse is outside the image. The script sets the src properties of each Image in lines 21 and 23, respectively. Creating Image objects preloads the images (i.e., loads the images in advance), so the browser does not need to download the rollover image the first time the script displays the image. If the image is large or the connection is slow, downloading would cause a noticeable delay in the image update.

Functions  mouseOver  and  mouseOut  are  set  to  process  the  onmouseover  and onmouseout events, respectively, in lines 74–75. Both functions begin (lines 25–28 and 45–48) by getting the event object and using function getTarget to find the element that received the action. Because of browser event model differences, we need getTarget (defined in lines 66–72) to return the DOM node targeted by the action. In Internet Explorer, this node is stored in the event object’s srcElement property. In Firefox, it is stored in the event object’s target property. Lines 68–71 return the node using the cor-rect property to hide the browser differences from the rest of our program. We must use function getTarget instead of this because we do not define an event handler for each specific element in the document. In this case, using this would return the entire document. In both mouseOver and mouseOut, we assign the return value of getTarget to variable target (lines 30 and 50).

 

Lines 33–37 in the mouseOver function handle the onmouseover event for the heading image by setting its src attribute (target.src) to the src property of the appropriate Image object (image2.src). The same task occurs with image1 in the mouseOut function (lines 53–57).

 

The script handles the onmouseover event for the table cells in lines 41–42. This code tests whether an id is specified, which is true only for our hex code table cells and the heading image in this example. If the element receiving the action has an id, the code changes the color of the element to match the color name stored in the id. As you can see in the code for the table (lines 86–111), each td element containing a color code has an id attribute set to one of the 16 basic XHTML colors. Lines 61–62 handle the onmouseout event by changing the text in the table cell the mouse cursor just left to match the color that it represents.

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.