SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to use CSS+backgroundimages+links with 5 images in a row

    Ok, I hope that subject wasn't confusing.

    if you to this site

    http://www.aeroindustries.com/contact/contact.php

    you will notice those links rollover. Well, I want to find the CSS solution to this, using <a> and background images. I have tried following what zeldman and Farhner have talked about, but I get lost, because these are 6 images all in a row!

    I have thought about doing something like this but it isn't working

    Code:
    <!--row with 6 images-->
    <div id="row">
    <span id="img1"></span><a href="about.htm"><span id="img2"></span></a> etc......
    </div>
    then my css would be like this

    Code:
    div#row {
    height: 52px;
    }
    span#img1 {
    width: 124px;
    height: 52px;
    background-image: url(images/img1.jpg);
    background-repeat: no-repeat;
    }
    #img2 {
    width: 122px;
    height: 52px;
    background-image: url(images/img2-hover.jpg); /*preload hover */
    }
    a#img2:link {
    background-image: url(images/img2-regular.jpg);
    }
    a#img2:hover {
    background-image: url(images/img2-hover.jpg;
    }
    Now, naturally I want to use display: block; but that just puts it on a new line.

    Any recommendations here.

    Thanks
    Bryan

  2. #2
    SitePoint Zealot CatsEyeDesigns's Avatar
    Join Date
    Dec 2003
    Location
    Florida
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not quite sure I understand what you want to do. If I understand correctly, you want to have a background image change and a link color change when a menu link is pointed to? If that's the case, that's much more simple than what you've got here. For example, the left side menu code on http://DigitalBundle.com looks something like this....

    <style>
    a.menu{
    color:black;
    background-image: url(images/box.gif);
    background-position: left center;
    background-repeat: no-repeat;
    width: 150px;
    height: 15px;
    }
    a.menu:hover{
    background-image: url(images/boxover.gif);
    }
    </style>

    <a class="menu" href="#">Menu Item 1</a>
    <a class="menu" href="#">Menu Item 2</a>
    <a class="menu" href="#">Menu Item 3</a>


    Hope that helps. If not... see if you can clarify what you're trying to do.

  3. #3
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry, I should have clarified. According to Zeldman in his book, you can have a containing element, like

    div id="box" that might have attribute like height: 52px, width: 120;

    instead of using <img src...>, you can just set a background image to the same size as div id="box", that way it appears as a normal image would

    Basically, you have code that appears like this

    <div id="box"><a id="insidebox" href="/"></a>
    </div>

    now, by having

    #box {
    margin: 0;
    width: 600px
    height: 120px;
    background-image: url(images/img-over.gif

    #insidebox {
    display: block;
    background-image: url(images/img.gif);
    width: 600px;
    height: 120px;
    }
    then

    a#insidebox:hover {
    background-image: url(images/img-over.gif);
    }

    This allows you to have a rollover-image link without using actual img tags.

    Now thats easy to accomplish for 1 image, but if you have 6 that are in 1 row together, that I don't know what to do.

    span seems to not make the images appear.

    I hope all that made sense

  4. #4
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about using a styled list, as found on Listamatic?

  5. #5
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried it, but I am still having problems getting the images to show up.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You didnn't mean something as simple as this did you?
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
     #navlist ul {
     margin-left: 0;
     padding-left: 0;
     white-space: nowrap;
    }
    #navlist li {
     display: inline;
     list-style-type: none;
    }
    #navlist a { padding: 3px 10px; }
    #navlist a:link, #navlist a:visited
    {
    color: #fff;
    background-color: #036;
    text-decoration: none;
    }
    #navlist a:hover {
    color: #fff;
    background-color: #369;
    text-decoration: none;
    }
    #navlist a.img1:hover  {
     background-image: url(img1.gif);
     background-repeat: no-repeat;
     background-position: center center;
    }
    #navlist a.img2:hover  {
     background-image: url(img2.gif);
     background-repeat: no-repeat;
     background-position: center center;
    }
    #navlist a.img3:hover  {
     background-image: url(img3.gif);
     background-repeat: no-repeat;
     background-position: center center;
    }
    #navlist a.img4:hover  {
     background-image: url(img4.gif);
     background-repeat: no-repeat;
     background-position: center center;
    }
    #navlist a.img5:hover  {
     background-image: url(img5.gif);
     background-repeat: no-repeat;
     background-position: center center;
    }
    -->
    </style>
    </head>
    <body>
    <div id="navcontainer"> 
      <ul id="navlist">
    	<li><a class="img1" href="#" title="link 1">link 1</a></li>
    	<li><a class="img2" href="#" title="link 2">link 2</a></li>
    	<li><a class="img3" href="#" title="link 3">link 3</a></li>
    	<li><a class="img4" href="#" title="link 4">link 4</a></li>
    	<li><a class="img5" href="#" title="link 5">link 5</a></li>
      </ul>
    </div>
    </body>
    </html>
    Or have i misread the question again

    Paul

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Or have i misread the question again
    Yes I have.

    I think you mean something like this:

    http://www.pmob.co.uk/temp/cssrolloverjag.htm

    Is that what you mean?

    Paul

  8. #8
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that is what I mean Aw, my own little example, how cute

    Thanks paul

    Now all I have to do is dicipher the code.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Now all I have to do is dicipher the code.
    Just shout if you need any help but basically you just put a background image in the div and then a background image in the link.

    Because you want 5 images you need five classes so that you can have a different background image in each. Then all you need to do is make the link image transparent on hover and the image underneath shows through.

    I put text in the span (link1 etc) in case the images don't show in older browers and for screenreaders who won't see the background images. You could always hide the text with display:none etc but it would still be there for screenreaders and the like.

    This method of two background images is ok but changing a bg image (even making it transparent) incurs the ie hourglass even though its very quick. I usually use a foreground image for the link and then just set that to display:none (or visibility:hidden) and that incurs no hourglass. (Even using the method of shifting the background position incurs the hourglass).

    However some people don't like images in there html and would rather text only. In my example you can have both as the span is absolutely placed and the text can sit on top of an image.

    Anyway I've strayed from the question now

    Paul

  10. #10
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it would still be there for screenreaders and the like.
    Actually, I have heard this method causes some screenreaders to ignore it. True?

    I will definitly try your method, thanks paul

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Actually, I have heard this method causes some screenreaders to ignore it. True?
    Screenreaders will not see anything if both images are in the background but they will see the text in the foreground. (I'm not sure what they do if text is set to display;none though I assume they would read it as it is there in the html which they read. However perhaps someone more knowledgable about screenreaders can answer that question.)

    Paul

  12. #12
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Instead of making the image Transparent for a:hover, could you just set it to visability: hidden ?

    Thanks
    Bryan

  13. #13
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul, you know what.

    That example you provided doesn't work in Safari for the mac Just noticed this. I will try it with Mac IE 5.2........ Just tried it, works dandy there

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hey Paul,

    Instead of making the image Transparent for a:hover, could you just set it to visability: hidden ?

    Thanks
    Bryan
    Try it and see! (it should have the same effect)

    I haven't got access to a mac so I can't test on that but I'm sure you should be able to get it working with a bit of fiddling around. (It's probably just one thing it doesn't like.)

    Paul

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Adding the visibility:visible makes the image flicker which is why I changes it to transparent.

    Here's another method I mentioned earlier using a foreground image.

    http://www.pmob.co.uk/temp/cssrollover4.htm

    You could try that out on the mac and see if it works. The example is only using one image so you'd ghave to set it up like my other example.

    Paul
    Last edited by Paul O'B; Dec 22, 2003 at 10:39.


Bookmarks

Posting Permissions

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