Forum Moderators: open
Not sure if this falls under CSS or Javascript.
I have a list based navigation bar like so:
<ul>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ul>
I have used an image replacement technique to display images rather than plain text. This all works ok.
The problem is that, because the image replacement moves the text out of the way. The links no longer work. Instead i have used javascript to create li.onclick functions for each list item.
Is this the way to do it? How do you use image replacement in navigation AND have the links work?
You need another object to separate the text from the link. That is going to cause a minor warning on html validation [<A>nchors are not supposed to contain other elements, just images or text.) If you can live with this then here is one solution to the issue.
in html
<ul id=menu>
<li><a href=""><span>TEXT</span><a></li>
</ul>
In your css
turn the anchor into a block with the size of the image and insert the image into the anchor as a background
ul#menu a {
display: block;
width: image width;
height: image height;
background-image:url('/image.png');
}
ul#menu a span {
visibility: hidden;
}
The span is used to turn off the text and let the image show through.
I am sure there are more ways to do this and this is all untested code.
The problem is that, because the image replacement moves the text out of the way. The links no longer work.
Hhhhmmm, it kinda sounds as if you are 'moving' your entire anchor out the way, rather than just the text node within your anchor?
Just a side issue... why is this commonly called 'image replacement', when it is actually 'text' you are replacing (with an image)?
Must be a better way to make it validate. Anyway, it works. Maybe i am taking it a bit far, but this is an exercise to see if what people preach and heavily designed sites can go together.
Thanks again.
