Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Senior Member
    Join Date
    Oct 2007
    Posts
    241
    Member #
    15910
    my need is simple

    i have a menu that will have images for buttons... then when mouse is over any button, that image will turn into a different image and when mouse is not on it anymore it should go back...how can i achieve this?
    important note: the image files for each button for both onmouse and no mouse situations are different. i.e. if there are 6 buttons, there are 6x2=12 image files (one set is for regular button display, other set is for mouseover of a button)

  2.  

  3. #2
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    1) Have two arrays, one for the onmouseovers and one for the onmouseouts.
    2) When you hover over an image pass in an ID. This ID should be the correct index. For example if I hover an image with the id of 3 then I want to show the 4th (arrays start at zero) image
    3) When you mouse out an image do the opposite.

    Something like

    HTML Code:
    <script type="text/javascript">
    
    arrayHover = new Array();
    arrayHover[0] = "image.jpeg";
    arrayHover[1] = "image1.jpeg";
    arrayHover[2] = "image2.jpeg";
    
    arrayNoHover = new Array();
    arrayNoHover[0] = "different-image.jpeg";
    arrayNoHover[1] = "different-image1.jpeg";
    arrayNoHover[2] = "differemt-image2.jpeg";
    
    imageHover = function( imageID )
    {
        document.getElementById( imageId ).src = arrayHover[imageId];
    }
    
    imageNoHover = function( imageId )
    {
        document.getElementById( imageId ).src = arrayNoHover[imageId];
    }
    
    </script>
    
    <!-- And to call it, something like... -->
    
    <img src="default-image.jpeg" width="x" height="y" id="0" onmouseover="imageHover(0);" onmouseout="imageNoHover(0);" />
    Untested but thats one way to do it.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:29 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com