Image replacement for menu
So your client wants menu with images and it cant be solved with background images and text on top. Though luck. There is a solution though which doesn't destroy all your accessability
We'll use image replacement technique to have accessability links as text and page id number for css id and have css change the text to a image
First we need image which holds all the links and their hover state:
All links have been created in one image inlucding their hover state, this removes flickering as whole image is loaded in one GET (Images full height is 200px and width 500px. First link width is 100px and height 50px)
Now we need indication in menu for the links so we edit menumanager template to inlude id for each menu item. Add following code in the template for each li tag that will be replaced with image
<li id="i{$node->id}">
Now menu has id="i1" if page ID is 1 and we can use that to map our image with the menu, our test html looks like this
<ul id="nav">
<li id="i1"><a href="#">First</a></li>
<li id="i2"><a href="#">Second</a></li>
<li id="i3"><a href="#">Third</a></li>
<li id="i4"><a href="#">Last</a></li>
</ul>
and it renders as
Well need some css to place links according to the image links
Image for the ul and some height and width properties
ul#nav_styled {width: 500px;
height: 50px;
margin:0;
padding:0;
background: url('image_replacement_menu.png');
position:relative;
}
We want li as block and to be as tall as image
ul#nav_styled li {display:block;
height:50px;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
top: 0;
}
a should also be block and 50px tall
ul#nav_styled li a {display:block;
height:50px;
}
This is the boring part, every link has to be positioned according to the image
li#i1 {left: 0px;
width: 100px;
}
li#i2 {
left: 100px;
width: 150px;
}
li#i3 {
left: 250px;
width: 150px;
}
li#i4 {
left: 400px;
width: 100px;
}
Now we have basic horisontal menu with our image as background and links forced to right positions (try hovering the links they will change background color)
Great, now we need hover state images on the links. We have already positioned all the links so we just give them a bg according to the position and lose the text links
background: transparent url(image_replacement_menu.png) 0 -50px no-repeat;
}
#i2 a:hover {
background: transparent url(image_replacement_menu.png) -100px -50px no-repeat;
}
#i3 a:hover {
background: transparent url(image_replacement_menu.png) -250px -50px no-repeat;
}
#i4 a:hover {
background: transparent url(image_replacement_menu.png) -400px -50px no-repeat;
}
and for hiding the text
ul#nav li a {text-indent:-9000px; background-color:transparent; }
So there you have it, images as links and still accessible from text browsers and most screenreaders. only problem is that you must create a new image if you want more links
appropiate glory goes to Mike Rundle and Dave Shea thanks
