homepage Welcome to WebmasterWorld Guest from 54.211.50.5
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Subscribe to WebmasterWorld
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Image replacement and links
bohboh




msg:3240498
 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




msg:3241134
 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




msg:3242677
 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




msg:3244278
 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




msg:3244544
 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