A Flash Developer Resource Site

Results 1 to 6 of 6

Thread: mouse over has to be visible as long as user is within the section

  1. #1
    Senior Member
    Join Date
    Nov 2004
    Posts
    114

    mouse over has to be visible as long as user is within the section

    hi

    i have a navigation with mouse overs, works fine...

    i used the following code:
    <a href="#"
    onmouseover="changeImages('index_04', 'images/index_04-over.jpg'); return true;"
    onmouseout="changeImages('index_04', 'images/index_04.jpg'); return true;"
    onmousedown="changeImages('index_04', 'images/index_04-over.jpg'); return true;"
    onmouseup="changeImages('index_04', 'images/index_04-over.jpg'); return true;">
    <img name="index_04" src="images/index_04.jpg" alt="1"></a>

    (slicing and i used divs, no tables)

    but what i want is that the mouse over state has to be visible as long as the user is within the section of choice.

    working with dreamweaver... i guess its image swap restore, but maybe somebody has a quicker, cleaner way?

    regards
    emel

  2. #2
    Retired Mod aversion's Avatar
    Join Date
    Jun 2000
    Location
    insomnia
    Posts
    7,917
    So what you want is an 'active' state for the button that relates to the section you're currently in that shows the rollover state? The easiest thing to do in your situation is to simply remove the javascript on the button that should be 'active' and just show the rollover image. The only situation you wouldn't be able to do this would be if your navbar isn't reloaded with each page, if it's targeting a frame for example.

    However, in modern coding you don't need javascript for rollovers, CSS will do the same thing with a single image. The advantage is lighter code, less HTTP calls and the rolllovers will still work if the user has javascript turned off.

    If you look at this site, shorecg.com, you'll see the menu is made of this single image:



    All that is used here is CSS to create the rollovers and to set which one is 'active' at any time.

  3. #3
    Senior Member
    Join Date
    Nov 2004
    Posts
    114
    too complexed, can't figure out what they did
    i can see this:

    <div id="nav">
    <ul>
    <li id="home"><a href="index.htm" class="active">Home</a></li>
    <li id="services"><a href="services.htm">Services</a></li>
    <li id="industries"><a href="industries.htm">Industries</a></li>
    <li id="profile"><a href="profile.htm">Profile</a></li>
    <li id="contact"><a href="contact.htm">Contact</a></li>
    </ul>
    </div>

  4. #4
    Retired Mod aversion's Avatar
    Join Date
    Jun 2000
    Location
    insomnia
    Posts
    7,917
    Yeah, this is the whole point of CSS, you use it to style the page outside of the HTML, which should really only be used to structure the page.

    If you look in the CSS document for that site (here) you'll see the following code:

    Code:
    /* nav */
    #nav {
    	background-color: #dee6e8;
    }
    #nav ul {
    	overflow: hidden;
    	width: 700px;
    	background: transparent url(../i/navbg.jpg) no-repeat left 5px;
    	list-style: none;
    	margin: 5px 5px 0 5px;
    }
    #nav ul li {
    	float: left;
    	margin: 5px 0 0 0;
    }
    #nav ul li a {
    	display: block;
    	width: 100px;
    	height: 45px;
    	text-indent: -5000px;
    	text-decoration: none;
    }
    
    /* link hover positions */
    #home a:hover, body#ahome #home a {
    	background: transparent url(../i/navbg.jpg) left -60px no-repeat;
    }
    #services a:hover, body#aservices #services a {
    	background: transparent url(../i/navbg.jpg) -100px -60px no-repeat;
    }
    #industries a:hover, body#aindustries #industries a {
    	background: transparent url(../i/navbg.jpg) -200px -60px no-repeat;
    }
    #profile a:hover, body#aprofile #profile a {
    	background: transparent url(../i/navbg.jpg) -300px -60px no-repeat;
    }
    #contact a:hover, body#acontact #contact a {
    	background: transparent url(../i/navbg.jpg) -400px -60px no-repeat;
    }
    The first part sets up the nav bar and the second determines what shows when the user rolls over the A tag, shifting the image (which is set in the bg) by different amounts to show the appropriate button. The active state is decided by an ID on the body tag, for example,

    body#ahome #home a {.... means if there's an ID of 'ahome' on the body tag then show these styles for the a tag within the element with ID 'home'.

    Once you get used to it this kind of CSS is pretty easy, and easy to reuse, but for your present project the simplest solution would just be to remove the JS on the active button.

  5. #5
    Senior Member
    Join Date
    Nov 2004
    Posts
    114
    thank you for your extended tutorial! great stuff. hope i can make it work

  6. #6
    Junior Member
    Join Date
    Dec 2007
    Posts
    1

    Unhappy need some help

    hi ... my first time here ...
    needing some help in this page i'm working on ...
    same kind as the above , tried css but have some problems...
    same thing with the buttons , would like them to stay ...active ???
    this is the page in case someone want to help me , please
    http://www.authenticportugal.co.uk/about.html
    thanks

Posting Permissions

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




Click Here to Expand Forum to Full Width

HTML5 Development Center