Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    85
    Thanks
    3
    Thanked 0 Times in 0 Posts

    CSS Rollovers & Alt Tags w/ background-image

    I have recently managed to avoid using javascript for navigation rollovers by using the simple method of making the on/out states one joined image, and using css code like this:

    Code:
    div#navigation ul li div {
    	display:block;
    	background-position:bottom;
    }
    div#navigation ul li div a {
    	display:block;
    	overflow:hidden;
    	background-position:top;
    }
    div#navigation ul li div a:hover {
    	background-image:none;
    }
    div.navbg-home, div.navbg-home a {
    	background-image:url(images/nav1.gif);
    	width:72px;
    	height:27px;
    }
    So both the a tag and it's containing div has the same image set as their background-image, just set at different positions - and when the a tag is rolled over, it's background-image is changed to none, revealing the "on" state situated on the div below.

    Works a treat.

    But how do I get the alt attribute into this equasion, since my html looks like this:

    Code:
    <div class="navbg-home"><a href="index.html" title="Home"></a></div>
    There's nothing to put the alt tag on here, as all the imagery is handled via css. I'm not to worried about SEO as I have text links sitting on the bottom of the page, but I do want some text to appear if a user have show images turned off on their browsers.

    So, any ideas how I would incorporate the alt attribute here?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Why do you need an alt there?
    Code:
    <a href="index.html" title="Home">Your link text here</a>
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Nov 2006
    Posts
    246
    Thanks
    13
    Thanked 26 Times in 24 Posts
    They explained why...just in case the visitor has images or CSS disabled.

    Unfortunately, there is no way to add alternative (alt) text. The only way you could do it is by inserting it inside the anchor like:

    Code:
    <div class="navbg-home"><a href="index.html" title="Home">Home</a></div>
    But of course that would show over the background image. There's a way to fix it for people that have CSS disabled, but this wont work if they just have images disabled:

    Code:
    div.navbg-home a span {
        display: none;
    }
    Code:
    <div class="navbg-home"><a href="index.html" title="Home"><span>Home</span></a></div>
    I don't have a solution for people that have images disabled. To be honest, the way you have it set up, I don't think there is one.
    Last edited by Majoracle; 01-22-2008 at 08:20 AM.

  • #4
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    There is no need to even have alt text if you are using this method. The "alt" text is the text in the A tag. Just make sure when you put text in there and replace with images, you give your A tag this style:

    Code:
    text-indent: -9999px;

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,486
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by sobrien79 View Post
    There is no need to even have alt text if you are using this method. The "alt" text is the text in the A tag. Just make sure when you put text in there and replace with images, you give your A tag this style:

    Code:
    text-indent: -9999px;
    You should read the question(s) properly before replying as the OP wants text to show up when images are disabled (that includes background images) and this questions has been answered before with a result that yours canít satisfy either.

    However, pinkshiro, you are really encouraged to put text into your links as having empty elements is semantically questionable (i.e. thereís nothing to see/click on if styles in general are disabled). Also, there are numerous CSS image replacement methods compared on http://www.mezzoblue.com/tests/revis...e-replacement/ which arenít directly tested on links (I know some wonít work in IE) but you might find one that satisfies you.
    However, none of them is 100% satisfying in one or another way, you always have to make compromises.

  • #6
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    my mistake...


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •