Anchored Images - When image is a CSS background for an <li>

[el-roboto]

Hello

The main navigation on this site I'm working on uses a list for the main navigation, where the list tags each have a unique class to render them as different 'button's - each of these classes has unique image is specified in the background:; property.

There is a mouseover effect on the navigation buttons which is achieved using a javascript code which changes an elements class (by referencing the id) hence the li tags have both class and id.

Within the <li> tags is an anchor. Within the anchor is a text alternative to the button with a span class which states display:block; and visibility:hidden;

The idea is that the navigation buttons have a mouseover effect which works cross browser, and successfully link to the desired pages.

The problem is with IE (6) on PC: The mouseover effects work fine but the anchored text isn't being recognised, so if you click on a button, it goes nowhere.

Im baffled as to why so I hope you can help. here's the code involved.

A SNIPPET OF THE NAV IN HTML
<ul class="egomenu">
<li id="MENU1" class="egohome"><a href="somewhere/" accesskey="1" title="HOME"><span class="hiddenNav">HOME</span></a></li>
<li id="MENU2" class="egofun"><a href="somewhere/" accesskey="2" title="FUN"><span class="hiddenNav">FUN</span></a></li>
<li id="MENU3" class="egoshop"><a href="somewhere/" accesskey="3" title="SHOP"><span class="hiddenNav" >SHOP</span></a></li></ul>

A SNIPPET OF THE CSS
.egohome {display:inline; float: left; width: 52px; height:19px; background: url(../img/navhome.jpg) top left no-repeat;margin:0; padding:0; cursor:pointer;}
.egohome-on {display:inline; float: left; width: 52px; height:19px; background: url(../img/navhome-on.jpg) top left no-repeat;margin:0; padding:0; cursor:pointer;}
.egofun {display:inline; float: left; width: 46px; height:19px; background: url(../img/navfun.jpg) top left no-repeat;margin:0; padding:0; cursor:pointer;}
.egofun-on {display:inline; float: left; width: 46px; height:19px; background: url(../img/navfun-on.jpg) top left no-repeat;margin:0; padding:0; cursor:pointer;}
.egoshop {display:inline; float: left; width: 53px; height:19px; background: url(../img/navshop.jpg) top left no-repeat;margin:0; padding:0; cursor:pointer;}
.egoshop-on {display:inline; float: left; width: 53px; height:19px;background: url(../img/navshop-on.jpg) top left no-repeat;margin:0; padding:0; cursor:pointer;}

.hiddenNav{display:block; visibility:hidden; height:19px;}

SNIPPET OF JS
function changeClass( idref, classname ) {
var el = document.getElementById(idref);
var attributeNode = el.getAttributeNode("class");
if( attributeNode ) { attributeNode.value = classname; }
else { el.setAttribute("class", classname); }
}
window.onload = function(){
var MENU1 = document.getElementById('MENU1');
MENU1.onmouseover = function(){changeClass('MENU1','egohome-on');};
MENU1.onmouseout = function(){changeClass('MENU1','egohome');};

var MENU2 = document.getElementById('MENU2');
MENU2.onmouseover = function(){changeClass('MENU2','egofun-on');};
MENU2.onmouseout = function(){changeClass('MENU2','egofun');};

var MENU3 = document.getElementById('MENU3');
MENU3.onmouseover = function(){changeClass('MENU3','egoshop-on');};
MENU3.onmouseout = function(){changeClass('MENU3','egoshop');}; }

:confused: :confused:

[Centauri]

There seems to be a LOT of unnecessary classes, id's, spans and javascript for a basic menu - do you have this uploaded with the graphics somewhere ? or post a zip file of the graphics ? - this can be done very simply.

Cheers
Graeme

[el-roboto]

I know it could be done quite simply if I just embeded the navigation images in the html but I'm trying to keep all of my graphic elements that aren't part of the page's main content out of my HTML

I've set up a temporary access,
http://www.egostudios.net/blog/
u:test
p:test

[el-roboto]

decided to just go with the easy option above

[Centauri]

The first step in simpifying this is to combine the normal and rollover graphics into one - normal on top and rollover image below it. Attached to this post is a zip file of said modified images.

The div enclosing the menu ul is not needed - the <ul> can be styled directly. As the javascript is no longer needed, neither are the id's on the <li>s. The classes are applied to the <a> elements, and the link text is left within the <a>, with the <spans> removed (the text can be rendered invisible in the css). So the html reduces to <ul id="egonav">
<li><a href="http://www.egostudios.net/blog" accesskey="1" title="Home" class="egohome">HOME</a></li>
<li><a href="http://www.egostudios.net/fun" accesskey="2" title="Fun" class="egofun">FUN</a></li>
<li><a href="https://www.egostudios.net/shop" accesskey="3" title="Shop" class="egoshop">SHOP</a></li>
<li><a href="http://www.egostudios.net/info" accesskey="4" title="Info" class="egoinfo">INFO</a></li>
<li><a href="http://www.egostudios.net/contact" accesskey="5" title="Contact" class="egocontact">CONTACT</a></li>
<li><a href="http://www.egostudios.net/links" accesskey="6" title="Links" class="egolinks">LINKS</a></li>
<li><a href="http://www.egostudios.net/guestbook" accesskey="7" title="Guestbook" class="egoguestbook">GUESTBOOK</a></li>
</ul>


To style this, the <ul> #egonav is given the size and positioning, whilst the <li>s are floated left with list style removed. The <a> elements are set to block display and 19px height globally. The <a> text size is reduced to 1 pixel high and indented way off the left of the page so that it cannot be seen (except for screen readers, search engine spiders etc). Each individual <a> class is only given its own width and background image. To complete this, a hover on the <a> shifts the background down, revealing the rollover section of the graphic. So the css is * {
margin: 0;
padding: 0;
}
body {
color: #5c5c5c;
font: 12px georgia, verdana, tahoma, sans-serif;
background: #eeeeee url(../img/body-bgd.jpg) top left repeat-x;
}
#egonav {
position:absolute;
top:83px;
left:379px;
width:450px;
height:19px;
}
#egonav li {
float: left;
list-style: none;
}
#egonav a {
display: block;
height: 19px;
font-size: 1px;
text-indent: -1000px;
background-position: left top;
}

#egonav a:hover {background-position: left bottom;}

.egohome {width: 52px; background: url(../img/navhome.jpg);}

.egofun {width: 46px; background: url(../img/navfun.jpg);}

.egoshop {width: 53px; background: url(../img/navshop.jpg);}

.egoinfo {width: 50px; background: url(../img/navinfo.jpg);}

.egocontact {width: 72px; background: url(../img/navcontact.jpg);}

.egolinks {width: 57px; background: url(../img/navlinks.jpg);}

.egoguestbook {width: 90px; background: url(../img/navguestbook.jpg);}

Note the global zeroing of margin and padding at the start of the css - this defeats browser defaults and saves zeroing individual elements.

So, there it is - no javascript, accessible, all images in the css, and works cross-browser.

Cheers
Graeme

[el-roboto]

I'm gobsmacked....

That was absolutely brilliant :eek:

thankyou very much!