free hosting   image hosting   hosting reseller   online album   e-shop   famous people 
Free Website Templates
Free Installer

Triple Rollover
From Single Image



This script lets you do a triple rollover using only one image.

Furthermore, the clicked image will retain its appearance until another image is clicked.

Hence, with this script you can create a menu with 3 states per image:
  • normal
  • mouseover
  • on Click
    • So if you have 5 menu items, all you need are 5 graphics, one per item.

    Unfortunately, this only works with IE, since Netscape doesn't support filters (yet).


    Paste the code below in the head section of your page:

    Now place the code below into the body section:

    How It Works

    Style-sheet filters are applied to each image:
  • alpha for the normal image
  • no filter for the mouseover image
  • invert for the clicked image
    • The alpha filter reduces the image's brightness, while the invert filter changes the image's colour values.

    For more information on this, see Single Image Rollover II and Single Image Rollover III.


    The alpha filter is applied to all images in the style section.

    On mouseover, function over checks to see if the image - elmnt - has been clicked on.

    If so, its current filter setting will be invert:
    function over(elmnt)
    {
    if (elmnt.style.filter != "invert()")
    {
    elmnt.style.filter=false
    }
    else elmnt.style.filter="invert()"
    }
    If so, the invert filter will continue to be applied.

    Otherwise, the filter will be removed.


    On mouseout, function out does a similar check:
    function out(elmnt)
    {
    if (elmnt.style.filter!="invert()")
    {
    elmnt.style.filter="alpha(opacity=50)"
    }
    else elmnt.style.filter="invert()"
    }
    If the image has been clicked on, the invert filter will still be applied on mouseout.

    Otherwise, the alpha filter will be applied.


    Function clicked does something a little different:
    function clicked(elmnt)
    {
    i=0
    for (i=0; i<3; i++)
    {
    pic[i].style.filter="alpha(opacity=50)"
    }
    elmnt.style.filter="invert()" }
    Since all images have the name pic, they form an array, pic[i].

    So in the example below, the first image is pic[0], the second is pic[1] and the third is pic[2].


    When an image is clicked, counter i resets all pic image filters to the normal alpha setting.

    Then the image that has been clicked - elmnt - has its filter set to invert.


    Try It Out





    © 2001 CyberSchool