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/
