[SOLVED] smoother and more compatible rollover

[scottybwoy]

Any one know what way I can go about replacing some javaScript func's that change some images during rollover.  You can see what I'm trying to achieve in this link here :

 

http://www.mri.co.uk/company-info/terms-of-business2.htm

 

At the moment, I'm using some very messy business like so : (is just a snippet for explanatory purposes)

<li>
<a class="drop r" href="http://www.mri.co.uk/news/index.htm" onmouseout="MM_swapImage('mri_head_r2_c2','','http://www.mri.co.uk/header/mri_head_c.png',1); MM_swapImage('tab1','','http://www.mri.co.uk/header/grey.gif',1);" onmouseover="MM_swapImage('mri_head_r2_c2','','http://www.mri.co.uk/header/mri_head_r_up.png',1); MM_swapImage('tab1','','http://www.mri.co.uk/header/ru.gif',1);" title='News'>News</a>
<img name="tab1" src='http://www.mri.co.uk/header/grey.gif' alt="" />
</li>
<li>
<a class="drop y" href="http://www.mri.co.uk/products/index.htm" onmouseout="MM_swapImage('tab1','','http://www.mri.co.uk/header/grey.gif',1); MM_swapImage('tab2','','http://www.mri.co.uk/header/grey.gif',1);" onmouseover="MM_swapImage('tab1','','http://www.mri.co.uk/header/yd.gif',1); MM_swapImage('tab2','','http://www.mri.co.uk/header/yu.gif',1);" title='Products'>Products<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul id='yellow' onmouseout="MM_swapImage('tab1','','http://www.mri.co.uk/header/grey.gif',1); MM_swapImage('tab2','','http://www.mri.co.uk/header/grey.gif',1);" onmouseover="MM_swapImage('tab1','','http://www.mri.co.uk/header/yd.gif',1); MM_swapImage('tab2','','http://www.mri.co.uk/header/yu.gif',1);">
<li>

 

Is there some way of arranging my list links to encompass the images and maybe put them one over the other or something like that, do you know what I mean?

 

Or any other ideas would be greatful, thanks.

[wildteen88]

CSS would be better a option. Most browsers nowadays support CSS pseudo classes for links. Visit this site for learning how to create CSS menus.

 

Javascript is so "old-school" for doing hover effects.

[scottybwoy]

Thanks Wildteen,

 

However I did not find anything of use from that site u gave me.  If you take a look at my code and the page I linked to, you will see that most of the nav bar is using css.  However at either side of the link there are some images to be swapped, or possibly just layered over each other, just not sure how to go about that bit.  If you have another quick look I'd be greatfull.

[scottybwoy]

OK let me narrow this down.

 

I have a list + css type nav.

 

When the mouse rolls over the anchor of the list I want it to change 3 images.  One to the left, one to the right and all in the middle.

 

I have this working with Javascript, is there a way to do it purely in css?

 

Please look at the horizontal nav on this page

[link]http://www.mri.co.uk/company-info/terms-of-business2.htm[/link] for an example.

 

Would it be done using layers?

 

[scottybwoy]

I have half solved this issue.

 

What I have done is created an extra <li> that goes over the initial <li>.  This second <li> holds the images on either side, this gives the appearance I am looking for.  However it only half works in IE 6.  Can anyone tell me why that is and how I can get around it.

 

Here is the html :

<ul>
<li>
<img name="mri_head_r2_c2" src="http://www.mri.co.uk/header/mri_head_c.png" style='left:-11.9%; width:16px;' id="mri_head_r2_c2" alt='navigation image' />
<a class="r" href="http://www.mri.co.uk/news/index.htm" title='News'>News</a>
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style='top:0px;' id='red'>
<li style='width:100%; height:17px;'><img alt="" src='http://www.mri.co.uk/header/mri_head_r_up.png' style='left:6px; width:16px; z-index:203; margin:0px; padding:0px;' /><img alt="" src='http://www.mri.co.uk/header/ru.gif' style='right:-2px; width:16px; z-index:203; margin:0px; padding:0px;' /></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<img name="tab1" src='http://www.mri.co.uk/header/grey.gif' alt="" />
</li>
<li>
<a class="y" href="http://www.mri.co.uk/products/index.htm" title='Products'>Products<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul style='top:0px;' id='yellow'>
<li style='width:100%; height:17px;'><img alt="" src='http://www.mri.co.uk/header/yd.gif' style='left:1px; width:16px; z-index:203; margin:0px; padding:0px;' /><img alt="" src='http://www.mri.co.uk/header/yu.gif' style='right:-2px; width:16px; z-index:203; margin:0px; padding:0px;' /></li>
<li><a href="http://www.mri.co.uk/products/Controllers/index.htm" title="Storage Controller Cards">Controller Cards ><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
etc...

As you can see the first one is a bit different from the second, however the rest are the same.

 

And the css:

.menu {
position: relative;
width: auto;
height: auto;
margin: 0px 140px 0px 192px;
padding: 0px;
font-family: arial, sans-serif;
text-align: center;
vertical-align: middle;
font-size: 9pt;
z-index: 100;
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
position: relative;
padding: 0px;
margin: 0px;
list-style-type: none;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {
position: relative;
float: left;
width: 11.9%;
margin-right: 15px;
font-weight: bold;
}

/* style the links for the top level */
.menu a, .menu a:visited {
display: block;
height: 17px;
background-image: url(http://www.mri.co.uk/header/greyd.gif);
text-align: center;
color: #c00;
font-size: 9pt;
text-decoration: none;
overflow: hidden;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility: hidden;
position: absolute;
top: 0px;
left: -16px;
width: 110px;
}

.menu ul ul li {
display: block;
clear: both;
}

 

Thanks for having a look

[scottybwoy]

OK have it working now anyone else had this trouble here is a working version.  It's a mess I know, but if anyone has a better idea, please share.

 

html

<div class="menu">
<ul>
<li style='left:-8px; width:16px; margin:0px; padding:0px; z-index:150;'><img src="http://www.mri.co.uk/header/mri_head_c.png" style='left:-11.9%; width:16px;' alt='navigation image' /></li>
<li class='ff ie6'>
<a class="r" href="http://www.mri.co.uk/news/index.htm" title='News'>News<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table style='top:0px; z-index:203;'><tr><td><![endif]-->
<ul style='top:0px;' id='red'>
	<li style='width:100%; height:17px; z-index:203;'><img alt="" src='http://www.mri.co.uk/header/mri_head_r_up.png' style='width:16px; z-index:203;' class='ff ie6' /><img alt="" src='http://www.mri.co.uk/header/ru.gif' style='right:-2px; width:16px; z-index:203; margin:0px; padding:0px;' /></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
<img src='http://www.mri.co.uk/header/grey.gif' alt="" />
</li>
<li>
<a class="y" href="http://www.mri.co.uk/products/index.htm" title='Products'>Products<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table style='top:0px; z-index:203;'><tr><td><![endif]-->
<ul style='top:0px;' id='yellow'>
<li style='width:100%; height:17px; z-index:203;'><img alt="" src='http://www.mri.co.uk/header/yd.gif' style='left:1px; width:16px; z-index:203; margin:0px; padding:0px;' /><img alt="" src='http://www.mri.co.uk/header/yu.gif' style='right:-2px; width:16px; z-index:203; margin:0px; padding:0px;' /></li>
<li><a href="http://www.mri.co.uk/products/Controllers/index.htm" title="Storage Controller Cards">Controller Cards ><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
		<li><a href="http://www.mri.co.uk/products/Controllers/sata.htm" title="RAID and Non-RAID SATA Controllers">SATA</a></li>
		<li><a href="http://www.mri.co.uk/products/Controllers/scsi.htm" title="Ultra Wide SCSI Controllers">SCSI</a></li>
		<li><a href="http://www.mri.co.uk/products/Controllers/ide.htm" title="RAID and Non-RAID IDE Controllers">IDE</a></li>
	</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="http://www.mri.co.uk/products/InputOutput/index.htm" title="I/O Devices">I/O Devices ><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
		<li><a href etc...

 

css

/* bitch hack */
li.ff {
margin-left: 6px;
}

img.ff {
left: 0px;
}

the rest is the same as above.