Can you apply image replacement a ul?

[rubyfruit]

Hi,


Can one apply the Gilder/Levin Method of image replacement to a ul? I want to replace the whole list with one background, on top of which I will then place images to be used as links as part of the navigation system.

I've tried the following coding but the image is not showing up, only the ul.

I've googled the problem, but everywhere refers to headers and not ul's.

Thanks,

R

HTML: Select all

<div id='sidebar'>
   <ul id="navigation">
   <span></span>    
         
      <li><a href="index.html"title="Home">Home</a></li>
      <li><a href="sculpture.html"title="Sculpture">Sculpture</a></li>
      <li><a href="press.html"title="Press">Press</a></li>
      <li><a href="biography.html"title="Biography">Biography</a></li>
      <li><a href="commissions.html"title="Comissions">Commission</a></li>
      <li><a href="exhibitions.html"title="Exhibitions">Exhibitions</a></li>
      <li><a href="contact.html"title="COntact">Contact</a></li>
   </ul>
      
  </div> <!-- End of sidebar -->

Code: Select all

#sidebar {  height:420px; width: 75px; background-color: pink; float: left; border-right: 2px solid black; }

ul {list-style: none; font-size: 0.9em; inside; position: absolute; margin: 0px; line-height: 2em; } /* if image fails */
 
#navigation { width: 75px; height: 420px; position relative; }
#navigation span { background: url(navigator.gif} no-repeat; position: absolute; width: 100%; height: 100%; }

[ukgeoff]

Clue me in here. Are you saying that whatever li is hovered over, you want the background of the whole navigation block to change?

BTW. The title attribute is meant to be descriptive and provide additional information, particularly for people using assistive technology and the like, not just a repeat of the link text.

[rubyfruit]

Hi Geoff,

The problem is an extension of the problem I posed a few weeks back, basically my friend wants the navigation bar to look similar to:



My plan is to hide this ul so that you only see it or touch it if the background image fails.

When the image works you will see the background image which will just be white with possibly the person's name.

Floating over the background image will be the name of each page. Each page's name will be a separate image and will act as the link.


---------

Re the 'title' should it say something like 'Link to Biography', or should it be even more elaborate?

Thanks for this tip and for all your advice .

Ruby

[ukgeoff]

I can't get my head around any way of doing this without involving JavaScript. Exactly how I haven't figured yet.

By image fails I assume you mean fails to load? Keeping in mind that a correctly coded page tells the browser how much space to allocate to an image and if the image is not available for any reason, you get the familiar white block with the little cross in it, somehow you have to detect this situation and bring your <ul> in front of that empty block.

Why do you think this is likely to happen?

Regarding the 'title'. Never start with 'link to...' The reason for this is that screen readers automatically add those words, so the user would hear, 'link to link to...' Gets a bit confusing.

Assuming that the site is about a particular artist for example, the link might say something like; 'a biography of ... who specialises in oil painting'.

[Ryan Fait]

Unless you have an unreliable server, there really isn't much point in providing a fail-safe for a background image that doesn't load.