homepage Welcome to WebmasterWorld Guest from 54.197.110.151
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Image replacement and links
bohboh

5+ Year Member



 
Msg#: 3240496 posted 10:33 am on Feb 2, 2007 (gmt 0)

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

5+ Year Member



 
Msg#: 3240496 posted 7:56 pm on Feb 2, 2007 (gmt 0)

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

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



 
Msg#: 3240496 posted 1:31 am on Feb 5, 2007 (gmt 0)

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

5+ Year Member



 
Msg#: 3240496 posted 4:35 pm on Feb 6, 2007 (gmt 0)

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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3240496 posted 8:46 pm on Feb 6, 2007 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved