Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Atlanta, GA.
    Posts
    313
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Dual/Tri/Quad state rollovers

    I have seen this quesion asked in various forms but the general idea of the question is "How do I make a rollover image clickable". Usually the asker wants to have the image stay on when clicked. Here is a little script that will do that and more..

    This is the main code that goes in the HEAD section of your document.

    Code:
    <script type="text/javascript">
    <!--
    /**
      * Dual/Tri/Quad state rollovers from www.javascript-fx.com
      * posted at and available from www.codingforums.com
      * You may use this code on any website but please 
      * leave this comment intact.
      */
    var img	= new Array();
    var di	= document.images;
    var currOn	= null;
    
    function Rollover(imgName, imgOut, imgOver, imgClick, imgClickOut)
    {
    	if(imgClick    == null)	imgClick 	= imgOver;
    	if(imgClickOut == null)	imgClickOut	= imgClick;
    
    	var roll = new Object;
    
    	roll.out	= imgOut;
    	roll.over	= new Image();
    	roll.over.src	= imgOver;
    	roll.click	= new Image();
    	roll.click.src	= imgClick;
    	roll.click_out	= new Image();
    	roll.click_out.src = imgClickOut;
    
    	img[imgName] = roll;	
    }
    function mOver(imgName)
    {
    	di[imgName].src = (imgName != currOn) ? img[imgName].over.src : img[imgName].click.src;
    }
    function mOut(imgName)
    {
    	di[imgName].src = (imgName != currOn) ? img[imgName].out : img[imgName].click_out.src;
    }
    function mClick(imgName)
    {
    	if(currOn != null) di[currOn].src = img[currOn].out;
    	currOn = imgName;
    	di[currOn].src = img[currOn].click.src;
    }
    function mSelect(imgName)
    {
    	mClick(imgName);
    	mOut(imgName);
    }
    /*** End the rollover code ***/
    //-->
    </script>
    This is the code to define rollovers and is also placed in the HEAD of your document
    Code:
    <script type="text/javascript">
    <!--
    Rollover("home",   "images/home_off.gif",   "images/home_on.gif");
    Rollover("email",  "images/email_off.gif",  "images/email_on.gif");
    Rollover("script", "images/script_off.gif", "images/script_on.gif");
    Rollover("links",  "images/links_off.gif",  "images/links_on.gif");
    Rollover("special","images/special_off.gif","images/special_on.gif");
    //-->
    </script>
    Where the syntax is
    Rollover(Name, offImage, onImage);

    Then to use the code in a rollover image the HTML in the BODY of your page should look like this
    Code:
    <A HREF="#"
    	onClick="mClick('home');"
    	onMouseOver="mOver('home');"
    	onMouseOut="mOut('home');"><img name="home"
    		src="images/home_off.gif" border=0></A><br>
    NOTE: The name if the image must match the Rollover name
    --- <img name="home"
    --- Rollover("home", "images/home_off.gif", "images/home_on.gif");

    If you use the script in this form you will get something like this demo
    Dual State Rollovers
    ------------------------------------------------------------------------
    If you want the clicked image to be a third image you define the rollovers as follows :-
    Code:
    <script type="text/javascript">
    <!--
    Rollover("home",   "images/home_off.gif",  "images/home_on.gif",    "images/home_clk.gif");
    Rollover("email",  "images/email_off.gif",  "images/email_on.gif",  "images/email_clk.gif");
    Rollover("script", "images/script_off.gif", "images/script_on.gif", "images/script_clk.gif");
    Rollover("links",  "images/links_off.gif",  "images/links_on.gif",  "images/links_clk.gif");
    Rollover("special","images/special_off.gif","images/special_on.gif","images/special_clk.gif");
    //-->
    </script>
    Where the syntax is
    Rollover(Name, offImage, onImage, clickedImage)

    Which results in this demo
    Tri State Rollovers
    ------------------------------------------------------------------------------------
    If you want to have a clicked image and have that clicked image also have a (different) rollover effect you define the rollovers as follows :-
    Code:
    <script type="text/javascript">
    <!--
    Rollover("home",   "images/home_off.gif",   "images/home_on.gif",   "images/home_clk.gif",   "images/home_clk_off.gif");
    Rollover("email",  "images/email_off.gif",  "images/email_on.gif",  "images/email_clk.gif",  "images/email_clk_off.gif");
    Rollover("script", "images/script_off.gif", "images/script_on.gif", "images/script_clk.gif", "images/script_clk_off.gif");
    Rollover("links",  "images/links_off.gif",  "images/links_on.gif",  "images/links_clk.gif",  "images/links_clk_off.gif");
    Rollover("special","images/special_off.gif","images/special_on.gif","images/special_clk.gif","images/special_clk_off.gif");
    //-->
    </script>
    Where the syntax is
    Rollover(Name, offImage, onImage, clickedImage, clickedOverImage)
    Which results in these demos
    Quad State Rollovers 1
    Quad State Rollovers 2
    The answer does not come from thinking outside the box, it comes from realizing the truth :-
    "There Is No Box". [JavaScript Gadgets'n'Gizmos][JavaScript-FX]

  • #2
    New Coder
    Join Date
    Feb 2009
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Exclamation How to set the default?

    How do I get one of these images to be "on" by default?

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    How do I get one of these rollovers to be selected "overstate" when page loads?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •