Welcome to WebmasterWorld Guest from 54.221.87.97

Forum Moderators: open

Message Too Old, No Replies

Image replacement and links

     

bohboh

10:33 am on Feb 2, 2007 (gmt 0)

5+ Year Member



Hi

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?

Al_Anderson

7:56 pm on Feb 2, 2007 (gmt 0)

5+ Year Member



wow, you are dedicated to having it all. Accessibility and fancy navigation.

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.

penders

1:31 am on Feb 5, 2007 (gmt 0)

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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)?

bohboh

4:35 pm on Feb 6, 2007 (gmt 0)

5+ Year Member



Thanks, managed to get it to work using your example.

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.

cmarshall

8:46 pm on Feb 6, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Al_Anderson's manner should validate. I use a very similar technique all the time, and I am absolutely anal about validating XHTML 1.1/WAI AAA