www.webdeveloper.com
Results 1 to 13 of 13

Thread: Mouse over menu image...

  1. #1
    Join Date
    Aug 2009
    Posts
    11

    Mouse over menu image...

    Hi,

    I have a navigation menu (Home, About, Products, etc) included from a header.php file throughout every page. I'm using a mouseover image script for the menus, i.e. when the mouse hovers over a menu, it changes to a different image.

    However what I need to do now is for the menu to stay as that second image for the corresponding page. i.e. when you click into 'products', the products image stays as the second image, but you;ll still be able to use mouseover script on the other menus.

    And even if you browse through the products, which will have several pages, the products menu image will stay as the second image.

    I've looked on the internet and script sites, but haven't been able to find what I'm looking for.

    Can someone please help me out?

  2. #2
    Join Date
    Jul 2009
    Location
    Falls Church, Va.
    Posts
    780
    One common way to do what you want is to create sections in your site each with a unique section ID. To determine what section the user in is just add the section ID as an argument in the URL, or maybe set a session cookie, etc.

    I chose the former method for the working/tested demo below. It displays two sections as menus, you can click to move from section to section, the code automatically handles the rollover and currently selected menu. I even added two CSS classes for the "on" vs. "off" image currently being displayed (on=current section user is in - default is home, off=all others).

    Just download the attached images, put them in a sub-directory named "images" and run the script. I included comments to explain each portion of the code. You can easily add more sections to the menu array and just remember to create the proper on/off images.

    PHP Code:
    // Create an array used for base name of sections, images, rollover and title/alt tags for each menu item - this controls everything...
    $menu_arr=array("Home""Products");

    // Loop through our menu array, 0=Home, 1=Products and so on...
    for($counter=0$counter<count($menu_arr); $counter++) {

        
    // Determine menu type (on/off) set to on if no section ID in url (Home) or if it section ID matches the current menu counter value...
        
    $type=((!isset($_GET['section_id']) && $counter==0) || (isset($_GET['section_id']) && intval(trim($_GET['section_id']))==$counter)) ? "on" "off";
        
        
    // Create the rollover HTML so only non-active menu items will rollover (i.e. Home_off.gif becomes Home_on.gif)...
        
    $rollover_html=($type=="off") ? "
                    onMouseOver=\"document.rollover_
    $menu_arr[$counter].src='images/$menu_arr[$counter]_on.gif'\"
                    onMouseOut=\"document.rollover_
    $menu_arr[$counter].src='images/$menu_arr[$counter]_off.gif'\"
                    " 
    "";

        
    // Wrap each menu item with a div assigned with class menu_on or menu_off based on type so you can customize look/feel...
        // Then display the menu image i.e. if type=on and we're at the home page (section ID 0), use "Home_on.gif"...
        
    print "<div class='menu_$type$rollover_html>
                <a href='test.php?section_id=
    $counter' title='$menu_arr[$counter]'>
                <img name='rollover_
    $menu_arr[$counter]' src='images/$menu_arr[$counter]_$type.gif' alt='$menu_arr[$counter]' border='0' />
                </a>
               </div>"
    ;

    In your stylesheet add these two styles and edit as you see fit:

    Code:
    .menu_off {
        float: left;
    }
    .menu_on {
        float: left;
    }
    There are a million ways to do this kind of thing. Some folks work with CSS rollovers, text overlay blank background images, others CSS sprites, others pure Javascript with image pre-loading which I didn't bother to do here. The key thing in this demo is the simplicity of it all - just edit that array with all your section names, create the on/off section images, adjust the CSS, done. Very small amout of code. The naming convention I used ties into everything quite conveniently, but to each their own.

    This is intended to teach you the concepts and inspire your own creativity - this is not production quality and the images are not fancy. Be sure to test it before responding!

    Thanks.

    -jim
    Attached Images Attached Images
    Last edited by SrWebDeveloper; 11-13-2009 at 09:37 AM. Reason: Fixed file attachment only

  3. #3
    Join Date
    Aug 2009
    Posts
    11
    Quote Originally Posted by SrWebDeveloper View Post
    One common way to do what you want is to create sections in your site each with a unique section ID. To determine what section the user in is just add the section ID as an argument in the URL, or maybe set a session cookie, etc.

    I chose the former method for the working/tested demo below. It displays two sections as menus, you can click to move from section to section, the code automatically handles the rollover and currently selected menu. I even added two CSS classes for the "on" vs. "off" image currently being displayed (on=current section user is in - default is home, off=all others).

    Just download the attached images, put them in a sub-directory named "images" and run the script. I included comments to explain each portion of the code. You can easily add more sections to the menu array and just remember to create the proper on/off images.

    There are a million ways to do this kind of thing. Some folks work with CSS rollovers, text overlay blank background images, others CSS sprites, others pure Javascript with image pre-loading which I didn't bother to do here. The key thing in this demo is the simplicity of it all - just edit that array with all your section names, create the on/off section images, adjust the CSS, done. Very small amout of code. The naming convention I used ties into everything quite conveniently, but to each their own.

    This is intended to teach you the concepts and inspire your own creativity - this is not production quality and the images are not fancy. Be sure to test it before responding!

    Thanks.

    -jim

    Hi Jim,

    I can't seem to get the code to work and I can't figure out why. I get this when I view the file in the browser:
    PHP Code:
    $menu_arr[$counter]   "; } }; ?> 
    I'm definitely missing something here but I don't know what it is!

    Anyho, thank you very much for the reply! I think I'm getting what you're saying, and it really opens up a whole new door for me, I can see many uses for this already!

  4. #4
    Join Date
    Jul 2009
    Location
    Falls Church, Va.
    Posts
    780
    That's not my code. Just create a test.php, copy/paste my code between <?php and ?> as any script requires. Are you new to PHP?

  5. #5
    Join Date
    Oct 2009
    Posts
    86
    why not just use css to change the image on hover, then you could set an active class for the active link on each page, and for that class set the background image as the hover image.
    Would be far simpler.
    If you want to use php, generate your navigation using php and set the class on the li using php.

  6. #6
    Join Date
    Jul 2009
    Location
    Falls Church, Va.
    Posts
    780
    Feel free to post example code, lukaz.

  7. #7
    Join Date
    Oct 2009
    Posts
    86
    I dont see how giving someone code really helps.

    I would do something like,

    PHP Code:
    /*an example page in the body tags*/
    $page_active 'home';
    include(
    'navigation.php');
    //Rest of the page
    /* End example page */ 


    PHP Code:
    /*navigation.php included file*/
    function checkActiveLink($page,$link){
        echo (
    $page == $link) ? 'class="active"' 'class="unactive"';
    }

    echo 
    '<div class="navigation">
        <ul class="nav-list">
            <li><a href="home.php" '
    .checkActiveLink($page_active'home').'>Home</a></li>
            <li><a href="about.php" '
    .checkActiveLink($page_active'about').'>About</a></li>
        </ul>
    </div>'

    There are plenty of tutorials online for using images as navigation with css, i suggest following one that changes the position of the image rather than changes the image with css. ie, you have both the active and unactive images as one file, one above the other, then move the y axis to display the active image.

    Im sure there are a few syntax errors but i wrote the code on the fly and its late.

  8. #8
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    Wouldn't it be more convenient to just do this with html and css?
    If this option could work for you, I'll post a sample.
    ...but stupidity is terminal.

  9. #9
    Join Date
    Jul 2009
    Location
    Falls Church, Va.
    Posts
    780
    Million ways to do this as I said earlier and "feel free" doesn't mean one has to post code! heh

  10. #10
    Join Date
    Oct 2009
    Posts
    86
    @Opifex, my idea is ment to be mainly html/css, the html for the links is generated via a php include so that if there are multiple pages with that link set on them, you dont need to code each set of links for each page, also makes modifications easier,e.g 20 pages of hard coded html links is 20 pages of modifications, or 1 page if you use the include. All the styling for my links would be in css. There are just so many good tutorials about for css links with images I feel like people should hunt around a bit before someone writes the code for them.
    Cheers
    Lukaz

  11. #11
    Join Date
    Sep 2008
    Location
    Mexico
    Posts
    786
    OK... very simple using ONLY html + css

    example html
    HTML Code:
    <body id="index">
    
    <div id="link">
    <ul>
    <li><a href="index.html" class="index">Welcome</a></li>
    <li><a href="club.html" class="club">Club</a></li>
    <li><a href="show.html" class="show">Show</a></li>
    <li><a href="location.html" class="location">Location</a></li>
    <li><a href="contact.html" class="contact">Contact</a></li>
    <li><a href="story.html" class="story">About Us</a></li>
    </ul>		
    </div>
    </body>
    example css
    HTML Code:
    #link ul {
    	float:right;
    	font:bold 16px  Arial,  sans-serif;
    	margin:-8px 1px;
    	padding-right:32px;
    	padding-top:2px;
    	list-style:none;
    	padding-left: 10px;	
    }
    
    #link li {
        float:left;
    	width:120px;
    	text-align:center;
    	margin:0;
           padding:5px;
    }
    
    #link a, #link a:link, #link a:visited {
           display:block;
    	margin:0;
           padding:5px; 
    	font-size:15px;
    	font-weight:bold;
    	text-align:center;
    	text-decoration:none;
    	color:red;
    	border:none;
    }
    
    
    #link a:hover, #index a.index, #club a.club, #show a.show, #location a.location, #story a.story, #contact a.contact  {
       color:blue;
       font-size: 17px;
       font-weight:bolder;
       margin-left: -4px;
       margin-right:-4px;
       margin-top:-2px;
       margin-bottom:-4px;
       border:none;
    }
    
    #link a:active {
    	border:none;
            outline:none;
    }
    The menu is the same for every page and be used as an include in php making site maintenance a little easier. The bodytag id of each page is changed to indicate the location in the menu. Live example here.
    Last edited by opifex; 11-17-2009 at 05:45 AM.
    ...but stupidity is terminal.

  12. #12
    Join Date
    Aug 2009
    Posts
    11
    Hi SrWebDeveloper , no I'm not new to php, I did user php tags around those codes, but it generated that result and I'm not sure why? I would love to see how those codes work live. I would ask if you could test it out and see what's wrong..but I don;t want to hassle you, so maybe you can just show me where you got the codes from and I'll to work my way around there?

    Hi lukaz, I did hunt around for codes before posting here. I agree, there are so many mouse over image script, but I don't know how to narrow down my question in the search (My initial post of the question is the shortest way I know to ask ....). Still, thank you very much for your input, I think I get what you're saying! Is it possible for you to give me a link to a website with what you're saying? I would love to take a look.

    Hi opifex, thank you for your codes, the live example looks like exactly what I need. Your signature "ignorance is curable, but stupidity is terminal" made my day :P

    Thank you everyone so so so much!!

  13. #13
    Join Date
    Oct 2009
    Posts
    86
    this tutorial is how i would do the image navigation.

    http://ghettocooler.net/2007/05/31/s...e-replacement/

    If you want the navigation on the active page to look like that, add my php code and then you can use the active class to have a constant background image with modified position.

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
  •  
HTML5 Development Center



Recent Articles