Re: [css-d] href's and images
Sam Leathers wrote: I know I can use background: url(/path/to/image.gif), but whats the best way to have a different image for each href? .. URL: http://irc.gentux.org:8000/Contact-pg.html Sam Sam, I always trip on answering good questions. I do not know the best way to solve the problem. Personally, whatever it is, I think I'd forget it. And concentrate on delivering content instead of bells whistles. A simple vertical menu that users can scale will buy you a lot more. Ten images that are slow to load on cable Internet with no content appearing on the page is a bit much, me thinks...? Regards, ~dL -- David Laakso http://www.dlaakso.com __ 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/
Re: [css-d] href's and images
Sam, There is an interesting article at http://alistapart.com/articles/imagemap/that takes the old html image map concept and adapts it to the modern world of CSS. The idea is to use a single image for your menu and place absolutely positioned div's over each menu item. Worth a look. Jim On 9/20/05, Sam Leathers [EMAIL PROTECTED] 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 __ 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/
Re: [css-d] href's and images
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 Georg -- http://www.gunlaug.no __ 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/
Re: [css-d] href's and images
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 liimg 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/
Re: [css-d] href's and images
Zoe M. Gillenwater wrote: If you want images to be clickable, then they are content, not decoration, and you should include them in the HTML source of your 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 A solution that follows these lines: http://www.tjkdesign.com/articles/tip.asp /plug Thierry | www.TJKDesign.com __ 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/
[css-d] href's and images
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 Sam -- in life, direction is everything, distance is secondary--so keep your bearings! [KJV] Luke 5:16 And he withdrew himself into the wilderness, and prayed. Get Firefox!!! http://www.spreadfirefox.com/?q=affiliatesamp;id=13731amp;t=1 __ 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/
