PDA

Click to See Complete Forum and Search --> : mouse over has to be visible as long as user is within the section



m_lardenoye
03-13-2007, 06:16 AM
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

aversion
03-13-2007, 09:41 AM
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 (http://www.shorecg.com/), you'll see the menu is made of this single image:

http://www.shorecg.com/i/navbg.jpg

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

m_lardenoye
03-13-2007, 11:00 AM
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>

aversion
03-13-2007, 12:39 PM
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 (http://www.shorecg.com/css/style.css)) you'll see the following 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.

m_lardenoye
03-13-2007, 03:22 PM
thank you for your extended tutorial! great stuff. hope i can make it work

assinox
12-12-2007, 01:15 PM
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