Previous Message
Next Message

href's and images

Sent by Zoe M. Gillenwater on 21 September 2005 15:03


Gunlaug Sørtun wrote:

> Sam Leathers wrote:
>
>> I'm working on a website where I have a standard <ul> list for links
>> in display: block; Currently, the links are <img> tags, but I'd like
>> to use css to display the image. I know I can use background: 
>> url("/path/to/image.gif"), but whats the best way to have a different
>>  image for each href? Do I need to have each href in a different
>> class to achieve this? Also, if it makes any difference, I do plan on
>> using the hover tag to do an image swap.
>>
>> URL: http://irc.gentux.org:8000/Contact-pg.html
>
>
> You can achieve this -- including hover-change -- by creating one, large
> image and position it differently based on a class and the state for
> each href. It just sound complex -- it really isn't ;-)
>
> Think this is the info you need:
> <http://www.alistapart.com/articles/sprites>


Please, please don't use this method as-is.  Click on any of the 
examples and try turning off images.  The links are still there, but 
your user has no way of knowing it because there is just a big empty 
space where the images used to be.  Now, turn images back on, but turn 
CSS off.  Not only are the images gone, but the links are too.  This is 
extremely inaccessible.

If you want images to be clickable, then they are content, not 
decoration, and you should include them in the HTML source of your page 
using the img element.  Like this:

<ul>
<li><img src="home.gif" width="200" height="20" alt="home"></li>
....
</ul>

The other alternative is to use an image replacement technique.  The 
advantage of this over sprites is that there is real text for each of 
the buttons, so when images or CSS are turned off, there is still 
something to see and click on.  You can also achieve hover effects this 
way, because your images are back in the CSS as backgrounds.

Zoe

-- 
Zoe M. Gillenwater
Design Specialist
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: