Scribd Logo
Upload

Welcome to Scribd!

  • 8 views

    Making Disjoint Rollover

    Uploaded by

    tettst6

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Making Disjoint Rollover

    Uploaded by

    tettst6
    8 views5 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    8 views5 pages

    Making Disjoint Rollover

    Uploaded by

    tettst6

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 5

    Making Disjoint Rollover

    Making Disjointed Rollovers Disjointed rollovers are a type of JavaScript


    rollover effect where multiple images change when the user hovers over a
    particular area. Disjointed rollovers can be created using a variety of
    techniques, including using the mouseover and mouseout events, as well as
    the swapImage() method. To create a disjointed rollover,
    1. You would first need to create the images that you want to use. These
    images should be the same size and shape, and they should be named in a way
    that is easy to identify.
    2. You will need to use the mouseover and mouseout events. These events are
    triggered when the user hovers the mouse over or out of an element.
    3. You will need to create two images. The first image will be the original
    image, and the second image will be the rollover image. You will then need to
    assign the mouseover and mouseout events to the original image.
    When the user hovers over the original image, the mouseover event will be
    triggered. The mouseover event will then replace the original image with the
    rollover image. When the user hovers out of the original image, the mouseout
    event will be triggered. The mouseout event will then replace the rollover
    image with the original image.

    Example:
    <!DOCTYPE html>
    <html>
    <head>
    <title> Disjoint Rollover </title>
    <script type="text/javascript" language="javascript">
    function f1()
    {
    document.getElementById('s1').src="img1.jpg";
    }

    function f2()
    {
    document.getElementById('s1').src="img2.jpg";
    }
    function f3()
    {
    document.getElementById('s1').src="img3.jpg";
    }

    function f4()
    {
    document.getElementById('s1').src="img4.jpg";
    }

    function f5()
    {
    document.getElementById('s1').src="img.jpg";
    }
    </script>
    </head>
    <body>
    <table>
    <tr>
    <td colspan="4" align="center"><img src="img.jpg" id="s1" width="200px"
    height="200px"></td>
    </tr>
    <tr>
    <td><img src="img1.jpg" width="200px" height="200px" onmouseover="f1()"
    onmouseout="f5()"></td>
    <td><img src="img2.jpg" width="200px" height="200px" onmouseover="f2()"
    onmouseout="f5()"></td>
    <td><img src="img3.jpg" width="200px" height="200px" onmouseover="f3()"
    onmouseout="f5()"></td>
    <td><img src="img4.jpg" width="200px" height="200px" onmouseover="f4()"
    onmouseout="f5()"></td>
    </tr>
    </table>
    </body>
    </html>
    Output:
    Default Image

    After Trigggered Mouse Over Event on Image 1


    After Trigggered Mouse Over Event on Image 2

    After Trigggered Mouse Over Event on Image 3


    After Trigggered Mouse Over Event on Image 4

    You might also like