+ Post New Thread
Results 1 to 7 of 7
Coding Thread, I need help making a menu in Coding and Web Development; ...
  1. #1
    andy_nic's Avatar
    Join Date
    Jun 2008
    Location
    Peterborough
    Posts
    445
    Thank Post
    31
    Thanked 39 Times in 33 Posts
    Rep Power
    19

    I need help making a menu

    Hi,All

    I want to make a menu like below for the VLE we use. Which as you move your cursor over Images 1, 2 and 3 it changes X to a different Image and then back to a default Image once the cursor is not on any of them. Iíve tried in Flash and Dreamweaver with no success. I need some sort of JavaScript I think. someone help Please .


    LOGO XXXXXXXXXXXXX
    LOGO XXXXXXXXXXXXX
    LOGO XXXXXXXXXXXXX
    11111 22222 33333333

  2. #2
    gibbo_ap's Avatar
    Join Date
    Nov 2007
    Location
    Staffs, UK
    Posts
    937
    Thank Post
    233
    Thanked 81 Times in 64 Posts
    Rep Power
    36
    in dw click insert > image object > roll over image

  3. #3

    rush_tech's Avatar
    Join Date
    Jul 2006
    Location
    Nottingham
    Posts
    1,410
    Thank Post
    111
    Thanked 265 Times in 201 Posts
    Rep Power
    194
    Flash will do it, create the basic shape of your button and then convert it to a symbol button. Double clicking on that symbol will allow you to edit the button, You will the have 4 states of the button up over down and hit

    The Four Button States
    Up
    The appearance of the button when the pointer is not over it.

    Over
    The appearance of the button when you place the pointer over it.

    Down
    The appearance of the button when you click on it.

    Hit
    Defines the area that will respond to a click of the mouse.


    Just gotta have a play.

  4. #4

    Hightower's Avatar
    Join Date
    Jun 2008
    Location
    Cloud 9
    Posts
    4,920
    Thank Post
    494
    Thanked 690 Times in 444 Posts
    Rep Power
    241
    Simple Google search should bring up some easy to follow tutorials:

    Linky

  5. #5
    andy_nic's Avatar
    Join Date
    Jun 2008
    Location
    Peterborough
    Posts
    445
    Thank Post
    31
    Thanked 39 Times in 33 Posts
    Rep Power
    19
    i don't want the buttons to change i want the image next to the Logo to change by moving the cursor over the buttons 1, 2 and 3

  6. #6

    Join Date
    May 2008
    Location
    Cheshire
    Posts
    292
    Thank Post
    48
    Thanked 27 Times in 24 Posts
    Rep Power
    18
    I think the following will do the trick

    HTML Code:
    <html>
    <head>
    <script>
    function SwapImg(ImageName, ImageLocation)
    {
      document[ImageName].src = ImageLocation;
    }
    </script>
    </head>
    <body>
    <a href="#" onmouseover="SwapImg('pic01', 'image1.jpg')">Test 1</a><br />
    <a href="#" onmouseover="SwapImg('pic01', 'image2.jpg')">Test 2</a><br />
    <a href="#" onmouseover="SwapImg('pic01', 'image3.jpg')">Test 3</a><br />
    <br /><br />
    <img src="image1.jpg" name="pic01" />
    </body></html>
    Last edited by Pashers; 12th May 2009 at 12:41 PM.

  7. Thanks to Pashers from:

    andy_nic (12th May 2009)

  8. #7

    Join Date
    Feb 2009
    Location
    Norfolk, England
    Posts
    12
    Thank Post
    0
    Thanked 2 Times in 2 Posts
    Rep Power
    12
    That won't work, because the image will not reset when the mouse leaves the link. Try something like this.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Javascript Menu</title>
        <script type="text/javascript">
            //
            //  Set the Logo Image to the required state
            //
            function SetLogo(name) {
                var e = document.getElementById("menuImage");           // Get the element with the ID 'menuImage'
                e.src = name;                                           // Set its src attribute to the required value
            }
        </script>
    </head>
    <body>
        <!-- Put two images side by side - the logo and the image used for the menu. default is the 'not over' image.
             I have only put height and width in here because the images I used to test it were different sizes ! -->
        <img src="logo.gif" />
        <img id="menuImage" src="default.gif" width="100px" height="100px"/>
        <br />
     
        <!-- All these are the same. No link is set (here). On mouseover the function is called to set the image to
             that appropriate for the link (can be any file name), on mouseout (e.g. leaving) the image is set back to 
             the default. I have used text links but you can use images if you wish. --> 
     
        <a href="#" onmouseover="SetLogo('img1.gif')" onmouseout="SetLogo('default.gif')">Image 1 here</a>
        <a href="#" onmouseover="SetLogo('img2.gif')" onmouseout="SetLogo('default.gif')">Image 2 here</a>
        <a href="#" onmouseover="SetLogo('img3.gif')" onmouseout="SetLogo('default.gif')">Image 3 here</a>
    <br /></body>
    </html>

SHARE:
+ Post New Thread

Similar Threads

  1. Cable making
    By Dom_ in forum Hardware
    Replies: 10
    Last Post: 11th February 2009, 10:38 PM
  2. Making a new security Group / Menu visible for one account
    By FN-GM in forum EduGeek Joomla 1.0 Package
    Replies: 1
    Last Post: 20th March 2008, 10:34 AM
  3. Create menu & sub-menu with Edugeek Joomla
    By FN-GM in forum EduGeek Joomla 1.0 Package
    Replies: 24
    Last Post: 8th December 2007, 11:48 PM
  4. Making an online community ?
    By callumtuckey in forum General Chat
    Replies: 5
    Last Post: 16th November 2007, 10:02 PM
  5. making passwords help
    By browolf in forum Scripts
    Replies: 7
    Last Post: 26th August 2005, 09:49 AM

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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