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 PROTECTED]
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/
