SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Image Swapping

    I've been working on a personal website for someone and have been trying to implement CSS throughout the process. Here is the site:

    http://home.comcast.net/~janick1/ming/index.html

    If you notice what I'm doing in the header graphic's 5 photos, I'm having a different color transition from black-and-white to color for each page. Right now (for layout purposes) there are just 5 unique header graphics for each page (#header1, #header2, etc.), but each one is approximately 70kB in size. Too big. This works fine on my T1 in work, but I know it would be a nightmare on a 56K modem.

    What I'd like to do, but I'm not quite sure how, is break the header down into the smaller photo images, which would be about 10kB each. Basically I would have 10 small images preloaded: 5 black-and-white and 5 color. For example, page 1 would display color1, bw2, bw3, bw4, bw5, and page 2 would display bw1, color2, bw3, bw4, bw5. Can this be easily accomplished? Can this be done with just absolute positioning or do I also have to figure in z-index? Any suggestions?

  2. #2
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this

    http://www.adaptivepath.com/

    (the face rollovers)

  3. #3
    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 can just swap the image links with css using one of the varied css rollover techniques about.

    Obviously on each page you would just show the upstate of each image to reflect the page. The other images could simply just be changed in the hover of the anchor element.

    here are a couple examples of simple and not so simple css rollovers:

    http://www.pmob.co.uk/temp/disjointedrollover2.htm
    http://www.pmob.co.uk/temp/disjointedcssrollover.htm
    http://www.pmob.co.uk/temp/cssrollover4.htm
    http://www.pmob.co.uk/temp/cssrollover5.htm

    If you see something useful and can't work it out then shout and I'll talk you through it.

    Paul

  4. #4
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, I used a modification of your second example (above) which I've posted here which uses my header graphic. I'll post the code below. This is what I'm trying to do.

    Working from your example, I figured out the rollover part, but now I'd like to do the following:

    1. Have a "current" id state for each page, where the corresponding color block is always displayed while on that page. Is there a way to do this just by creating one new id state or do I have to create something unique for each rollover?

    2. Is there a way to do this in CSS without using ANY img tags in the HTML, like assigning a background image for each individual span class? I can't seem to get that to work.

    Well, if I can get #1 down, I should be OK. Then, of course, I have to apply it to the site I originally mentioned, which is positioned in a relative container. I have a feeling this will cause me some problems.

    Thanks for your help! ~John

  5. #5
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is my code...

    Quote Originally Posted by code
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="en">
    <HEAD>
    <TITLE>Page 1</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    <style type="text/css">
    span {
    display:none;
    }
    a:hover {
    background: #FF0;
    }
    #imagecontainer {
    position:absolute;
    left:50px;
    top:0px;
    width:760px;
    height:175px;
    z-index:0;
    }
    a:hover span {
    display:block;
    position:absolute;
    top:-152px;
    height:125px;
    z-index:1;
    }
    a:hover span.a {
    left:0px;
    width:178px;
    }
    a:hover span.b {
    left:180px;
    width:92px;
    }
    a:hover span.c {
    left:274px;
    width:182px;
    }
    a:hover span.d {
    left:458px;
    width:206px;
    }
    a:hover span.e {
    left:666px;
    width:94px;
    }
    #links
    {
    position:absolute;
    left:50px;
    top:200px;
    }
    </style>
    </head>

    <body>
    <div id="imagecontainer"><img src="http://home.comcast.net/~janick1/cssrollovers/images/header4.jpg" alt="header"></div>

    <div id="links">
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/http://home.comcast.net/~janick1/cssrollovers/index.html">link 1
    <span class="a"><img src="http://home.comcast.net/~janick1/cssrollovers/images/1.jpg" alt="new image"></span></a></div>
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/2.html">link 2
    <span class="b"><img src="http://home.comcast.net/~janick1/cssrollovers/images/2.jpg" alt="new image"></span></a></div>
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/3.html">link 3
    <span class="c"><img src="http://home.comcast.net/~janick1/cssrollovers/images/3.jpg" alt="new image"></span></a></div>
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/4.html">link 4
    <span class="d"><img src="http://home.comcast.net/~janick1/cssrollovers/images/4.jpg" alt="new image"></span></a></div>
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/5.html">link 5
    <span class="e"><img src="http://home.comcast.net/~janick1/cssrollovers/images/5.jpg" alt="new image"></span></a></div>
    </div>
    </body>
    </html>
    Last edited by m2k; Feb 10, 2004 at 09:12. Reason: relative links

  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,
    Have a "current" id state for each page, where the corresponding color block is always displayed while on that page. Is there a way to do this just by creating one new id state or do I have to create something unique for each rollover?
    The easiest way is just to create an active class which you place in the active element on each page that it refers to. This is the way that most rollover menus are constructed and is the simplest method. It's hardly any extra work.

    There are other ways such as giving id's to the body of each page etc but you still have to put and id in the body so on each page so why not put it in the anchor instead.

    Is there a way to do this in CSS without using ANY img tags in the HTML, like assigning a background image for each individual span class? I can't seem to get that to work.
    You just need to move the image from the span and into the a :hover span:
    e.g.
    Code:
    a:hover span {
    display:block;
    position:absolute;
    top:-152px;
    height:125px;
    z-index:1;
    background: url(image.gif);
    }
    Of course you will need to set up classes for each different image.

    Here is an example that uses 2 background images that may be useful:

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

    The positioning shouldn't be too much of a problem (I hope).

    I'm just off out now but if you have any problems I'll get back later this evening and offer some proper code .

    Hope that helps.

    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)
    Hi,

    Something like this might work:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="en">
    <HEAD>
    <TITLE>Page 1</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    <style type="text/css">
    span {
    display:none; 
    } 
    a:hover {
    background: #FF0;
    }
    #imagecontainer {
    position:absolute;
    left:50px;
    top:0px;
    width:760px;
    height:175px;
    z-index:0;
    }
    a:hover span {
    display:block;
    position:absolute;
    top:-152px;
    height:125px;
    z-index:1;
    }
    a:hover span.a {
    left:0px;
    width:178px;
    background: url(http://home.comcast.net/~janick1/css...s/images/1.jpg) no-repeat left top;
    }
    a:hover span.b {
    left:180px;
    width:92px;
    background:url(http://home.comcast.net/~janick1/css...s/images/2.jpg) no-repeat left top;
    }
    a:hover span.c {
    left:274px;
    width:182px;
    background:url(http://home.comcast.net/~janick1/css...s/images/3.jpg) no-repeat left top;
    }
    a:hover span.d {
    left:458px;
    width:206px;
    background:url(http://home.comcast.net/~janick1/css...s/images/4.jpg) no-repeat left top;
    }
    a:hover span.e {
    left:666px;
    width:94px;
    background:url(http://home.comcast.net/~janick1/css...s/images/5.jpg) no-repeat left top;
    }
    #links
    {
    position:absolute;
    left:50px;
    top:200px;
    }
    </style>
    </head>
    <body>
    <div id="imagecontainer"><img src="http://home.comcast.net/~janick1/css...es/header4.jpg" alt="header"></div>
    <div id="links">
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/http://home.comcast.net/~janick1/cssrollovers/index.html">link 1
    <span class="a"></span></a></div>
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/2.html">link 2
    <span class="b"></span></a></div>
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/3.html">link 3 
    <span class="c"></span></a></div>
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/4.html">link 4
    <span class="d"></span></a></div>
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/5.html">link 5 
    <span class="e"></span></a></div>
    </div>
    </body>
    </html>
    Paul

  8. #8
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Can you take one more look at my updated page?

    Using the technique you described, I now have no img tags in my html. Here's all that's left to the html code:
    Quote Originally Posted by html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="en">
    <HEAD>
    <TITLE>Page 1</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" href="css/roll.css">
    </head>
    <body>
    <div id="imagecontainer"></div>
    <div id="links">
    <div>link 1</div>
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/2.html">link 2
    <span class="b"></span></a></div>
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/3.html">link 3
    <span class="c"></span></a></div>
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/4.html">link 4
    <span class="d"></span></a></div>
    <div><a href="http://home.comcast.net/~janick1/cssrollovers/5.html">link 5
    <span class="e"></span></a></div>
    </div>
    <div id="currenta"></div>
    </body>
    </html>
    And here is the CSS:
    Quote Originally Posted by css
    span {
    display:none;
    }
    a:hover {
    background: #FF0;
    }
    #imagecontainer {
    position:absolute;
    left:50px;
    top:0px;
    width:760px;
    height:175px;
    background:url(http://home.comcast.net/~janick1/css...es/header4.jpg) no-repeat left top;
    z-index:0;
    }
    a:hover span {
    display:block;
    position:absolute;
    top:-152px;
    height:125px;
    z-index:1;
    }
    a:hover span.a {
    left:0px;
    width:178px;
    background: url(http://home.comcast.net/~janick1/css...s/images/1.jpg) no-repeat left top;
    }
    a:hover span.b {
    left:180px;
    width:92px;
    background:url(http://home.comcast.net/~janick1/css...s/images/2.jpg) no-repeat left top;
    }
    a:hover span.c {
    left:274px;
    width:182px;
    background:url(http://home.comcast.net/~janick1/css...s/images/3.jpg) no-repeat left top;
    }
    a:hover span.d {
    left:458px;
    width:206px;
    background:url(http://home.comcast.net/~janick1/css...s/images/4.jpg) no-repeat left top;
    }
    a:hover span.e {
    left:666px;
    width:94px;
    background:url(http://home.comcast.net/~janick1/css...s/images/5.jpg) no-repeat left top;
    }
    #links {
    position:absolute;
    left:50px;
    top:200px;
    }
    #currenta {
    position:absolute;
    left:50px;
    top:48px;
    width:178px;
    height:175px;
    background:url(http://home.comcast.net/~janick1/css...s/images/1.jpg) no-repeat left top;
    z-index:2;
    }
    #currentb {
    position:absolute;
    left:230px;
    top:48px;
    width:92px;
    height:175px;
    background:url(http://home.comcast.net/~janick1/css...s/images/2.jpg) no-repeat left top;
    z-index:2;
    }
    #currentc {
    position:absolute;
    left:324px;
    top:48px;
    width:182px;
    height:175px;
    background:url(http://home.comcast.net/~janick1/css...s/images/3.jpg) no-repeat left top;
    z-index:2;
    }
    #currentd {
    position:absolute;
    left:508px;
    top:48px;
    width:206px;
    height:175px;
    background:url(http://home.comcast.net/~janick1/css...s/images/4.jpg) no-repeat left top;
    z-index:2;
    }
    #currente {
    position:absolute;
    left:716px;
    top:48px;
    width:94px;
    height:175px;
    background:url(http://home.comcast.net/~janick1/css...s/images/5.jpg) no-repeat left top;
    z-index:2;
    }
    As you can see, it DOES do what I want it to do now. Looking at my CSS, do you think I did it right or is there a shorter way? I just made a separte #current state for each rollover.

    Thanks for all your help again. If you don't mind, I will probably have questions after I attempt to apply this to the site I'm designing. I don't know if you remember advising me on that one, but now I'll be dealing with relative containers and other levels of z-indexes, which I'll probably screw up.

  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)
    Hi,

    I think that's the easiest way to go about it and its quite easy to see whats going on etc.

    You could loose about 16 lines of code if you merge the last ones a bit .
    e.g.
    Code:
    #currenta, #currentb, #currentc, #currentd, #currente {
    position:absolute;
    top:48px;
    height:175px;
    z-index:2;
    }
    #currenta {
    left:50px;
    width:178px;
    background:url(http://home.comcast.net/~janick1/css...s/images/1.jpg) no-repeat left top;
    }
    #currentb {
    left:230px;
    width:92px;
    background:url(http://home.comcast.net/~janick1/css...s/images/2.jpg) no-repeat left top;
    }
    #currentc {
    left:324px;
    width:182px;
    background:url(http://home.comcast.net/~janick1/css...s/images/3.jpg) no-repeat left top;
    }
    #currentd {
    left:508px;
    width:206px;
    background:url(http://home.comcast.net/~janick1/css...s/images/4.jpg) no-repeat left top;
    }
    #currente {
    left:716px;
    width:94px;
    background:url(http://home.comcast.net/~janick1/css...s/images/5.jpg) no-repeat left top;
    }
    Thanks for all your help again. If you don't mind, I will probably have questions
    No problem That's what we are here for.

    Paul

  10. #10
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    Thanks for your help The CSS is now working as I had envisioned.

    I discovered Sitepoint right around the time I decided to make a move towards building full-fledged CSS sites, and thanks to the guidance I've received in here, I've really become hooked. No tables, no IMG tags, no breaks... as someone who's always coded by hand, I sometimes find myself just staring at these clean, basic pages in my editor like a kid who's cleaned his room for the first time in years.

    IMO, getting pointed in the right direction with examples and suggestions, taking the time to understand it, and then applying it, has been the best way to learn, as opposed to just asking for the answers. Thanks again!

  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)
    IMO, getting pointed in the right direction with examples and suggestions, taking the time to understand it, and then applying it, has been the best way to learn, as opposed to just asking for the answers. Thanks again!
    Couldn't have said it better myself

  12. #12
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a new take on the same concept

    OK,
    now I'm trying to do something similar which I cant' quite figure out. Here is the link to my attempt at a NEW CSS header. I'm trying to do the same thing as the original CSS header from this thread, but now instead of using a vertical menu of text links, I want to use a horizontal menu with images.

    I couldn't get it to work, so I put a temporary vertical menu on the page, just to show want I want to do. I don't get it. Once you roll over the vertical links, THEN the horizontal menu works.

    Here is the HTML for the index page:

    Quote Originally Posted by html
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <HTML lang="en">
    <HEAD>
    <TITLE>HBG</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" href="css/hbg.css">
    </head>
    <body>
    <div id="bannertop"></div>
    <div id="headercontainer"></div>
    <div id="menucontainer"></div>
    <div id="links">
    <div><a href="index.html">about
    <span class="a"></span></a></div>
    <div><a href="attorneys.html">attorneys
    <span class="b"></span></a></div>
    <div><a href="practice.html">practice areas
    <span class="c"></span></a></div>
    <div><a href="events.html">upcoming events
    <span class="d"></span></a></div>
    <div><a href="pubs.html">publications
    <span class="e"></span></a></div>
    <div><a href="contact.html">contact
    <span class="f"></span></a></div>
    </div>
    <div id="currenta"></div>
    <div id="currenta_image"></div>
    </body>
    </html>
    and here is the CSS:

    Quote Originally Posted by css
    body {
    background-color: #ccc; font-family: trebuchet ms, Verdana, Arial, Helvetica, sans-serif; color: #fff;
    }
    span {
    display:none;
    }
    a:hover {
    background: #FF0;
    }
    #bannertop {
    /* dark blue top banner */
    position:absolute;
    left:50px;
    top:0px;
    width:760px;
    height:43px;
    background:url(../images/bannertop.gif) no-repeat left top;
    z-index:0;
    }
    #headercontainer {
    /* container with grayscale header */
    position:absolute;
    left:50px;
    top:44px;
    width:760px;
    height:155px;
    background:url(../images/header.jpg) no-repeat left top;
    z-index:0;
    }
    #menucontainer {
    /* container to hold menu buttons */
    position:absolute;
    left:50px;
    top:172px;
    width:760px;
    height:26px;
    background:#fff;
    z-index:0;
    }

    /* dark blue menu buttons mouse out state
    ----------------------------------------------- */
    span.a, span.b, span.c, span.d, span.e, span.f{
    position:absolute;
    top: 172px;
    height:26px;
    }
    span.a{
    left:50px;
    width:98px;
    background:url(../images/about.gif) no-repeat left top;
    }
    span.b{
    left:50px;
    width:98px;
    background:url(../images/attorneys.gif) no-repeat left top;
    }
    span.c{
    left:50px;
    width:98px;
    background:url(../images/practice.gif) no-repeat left top;
    }
    span.d{
    left:50px;
    width:98px;
    background:url(../images/events.gif) no-repeat left top;
    }
    span.e{
    left:50px;
    width:98px;
    background:url(../images/pubs.gif) no-repeat left top;
    }
    span.f{
    left:50px;
    width:98px;
    background:url(../images/contact.gif) no-repeat left top;
    }

    /* white menu buttons for hover state
    ----------------------------------------------- */
    a:hover span {
    display:block;
    position:absolute;
    top:-78px;
    height:26px;
    z-index:1;
    }
    a:hover span.a {
    left:0px;
    width:98px;
    background: url(../images/about_hover.gif) no-repeat left top;
    }
    a:hover span.b {
    left:99px;
    width:85px;
    background:url(../images/attorneys_hover.gif) no-repeat left top;
    }
    a:hover span.c {
    left:185px;
    width:113px;
    background:url(../images/practice_hover.gif) no-repeat left top;
    }
    a:hover span.d {
    left:299px;
    width:165px;
    background:url(../images/events_hover.gif) no-repeat left top;
    }
    a:hover span.e {
    left:465px;
    width:99px;
    background:url(../images/pubs_hover.gif) no-repeat left top;
    }
    a:hover span.f {
    left:565px;
    width:195px;
    background:url(../images/contact_hover.gif) no-repeat left top;
    }
    #links {
    position:absolute;
    left:50px;
    top:250px;
    }

    /* light blue menu buttons for current page state
    ----------------------------------------------- */
    #currenta, #currentb, #currentc, #currentd, #currente, #currentf {
    position:absolute;
    top:172px;
    height:26px;
    z-index:2;
    }
    #currenta {
    left:50px;
    width:98px;
    background:url(../images/about_current.gif) no-repeat left top;
    }
    #currentb {
    left:149px;
    width:85px;
    background:url(../images/attorneys_current.gif) no-repeat left top;
    }
    #currentc {
    left:235px;
    width:113px;
    background:url(../images/practice_current.gif) no-repeat left top;
    }
    #currentd {
    left:349px;
    width:165px;
    background:url(../images/events_current.gif) no-repeat left top;
    }
    #currente {
    left:515px;
    width:99px;
    background:url(../images/pubs_current.gif) no-repeat left top;
    }
    #currentf {
    left:615px;
    width:195px;
    background:url(../images/contact_current.gif) no-repeat left top;
    }

    /* color images for current pages
    ----------------------------------------------- */
    #currenta_image, #currentb_image, #currentc_image, #currentd_image, #currente_image, #currentf_image {
    position:absolute;
    top:44px;
    height:127px;
    z-index:2;
    }

    #currenta_image {
    left:50px;
    width:98px;
    background:url(../images/currenta.jpg) no-repeat left top;
    }

    #currentb_image {
    left:149px;
    width:85px;
    background:url(../images/currentb.jpg) no-repeat left top;
    }
    #currentc_image {
    left:235px;
    width:113px;
    background:url(../images/currentc.jpg) no-repeat left top;
    }
    #currentd_image {
    left:349px;
    width:165px;
    background:url(../images/currentd.jpg) no-repeat left top;
    }
    #currente_image {
    left:515px;
    width:99px;
    background:url(../images/currente.jpg) no-repeat left top;
    }
    #currentf_image {
    left:615px;
    width:195px;
    background:url(../images/currentf.jpg) no-repeat left top;
    }
    I may be close, or I may be way off on this. Not sure. Can anyone point me in the right direction? Thanks, John

  13. #13
    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 John,

    I think this is what you are trying to do.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="en">
    <head>
    <title>HBG</title>
    <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
    <style>
    body {
     background-color: #ccc; font-family: trebuchet ms, Verdana, Arial, Helvetica, sans-serif; color: #fff;
    }
    a:hover {
     background: #FF0;
    }
    #bannertop {
     /* dark blue top banner */
     position:absolute;
     left:50px;
     top:0px;
     width:760px;
     height:43px;
     background:url(http://home.comcast.net/~janick1/tem.../bannertop.gif) no-repeat left top;
     z-index:0;
    }
    #headercontainer {
     /* container with grayscale header */ 
     position:absolute;
     left:50px;
     top:44px;
     width:760px;
     height:155px;
     background:url(http://home.comcast.net/~janick1/temp/images/header.jpg) no-repeat left top;
     z-index:0;
    }
    #menucontainer {
     /* container to hold menu buttons */
     position:absolute;
     left:50px;
     top:172px;
     width:760px;
     height:26px;
     background:#fff;
     z-index:0;
    }
    /* dark blue menu buttons mouse out state 
    ----------------------------------------------- */
    span.a, span.b, span.c, span.d, span.e, span.f{
     position:absolute;
     top: 172px;
     height:26px;
    }
    span.a{
     left:50px;
     width:98px;
     background:url(http://home.comcast.net/~janick1/temp/images/about.gif) no-repeat left top;
    }
    span.b{
     left:149px;
     width:98px;
     background:url(http://home.comcast.net/~janick1/tem.../attorneys.gif) no-repeat left top;
    }
    span.c{
     left:235px;
     width:185px;
     background:url(http://home.comcast.net/~janick1/tem...s/practice.gif) no-repeat left top;
    }
    span.d{
     left:349px;
     width:165px;
     background:url(http://home.comcast.net/~janick1/temp/images/events.gif) no-repeat left top;
    }
    span.e{
     left:515px;
     width:98px;
     background:url(http://home.comcast.net/~janick1/temp/images/pubs.gif) no-repeat left top;
    }
    span.f{
     left:615px;
     width:195px;
     background:url(http://home.comcast.net/~janick1/tem...es/contact.gif) no-repeat left top;
    }
    /* white menu buttons for hover state
    ----------------------------------------------- */
    a:hover span.a {
     background: url(http://home.comcast.net/~janick1/tem...bout_hover.gif) no-repeat left top;
    }
    a:hover span.b {
     background:url(http://home.comcast.net/~janick1/tem...neys_hover.gif) no-repeat left top;
    }
    a:hover span.c {
     background:url(http://home.comcast.net/~janick1/tem...tice_hover.gif) no-repeat left top;
    }
    a:hover span.d {
     background:url(http://home.comcast.net/~janick1/tem...ents_hover.gif) no-repeat left top;
    }
    a:hover span.e {
     background:url(http://home.comcast.net/~janick1/tem...pubs_hover.gif) no-repeat left top;
    }
    a:hover span.f {
     background:url(http://home.comcast.net/~janick1/tem...tact_hover.gif) no-repeat left top;
    }
    #links {
     margin-left:50px;
     margin-top:250px;
    }
    /* light blue menu buttons for current page state
    ----------------------------------------------- */
    #currenta, #currentb, #currentc, #currentd, #currente, #currentf {
    position:absolute;
    top:172px;
    height:26px;
    z-index:2;
    }
    #currenta {
     left:50px;
     width:98px;
     background:url(http://home.comcast.net/~janick1/tem...ut_current.gif) no-repeat left top;
    }
    #currentb {
     left:149px;
     width:85px;
     background:url(http://home.comcast.net/~janick1/tem...ys_current.gif) no-repeat left top;
    }
    #currentc {
     left:235px;
     width:113px;
     background:url(http://home.comcast.net/~janick1/tem...ce_current.gif) no-repeat left top;
    }
    #currentd {
     left:349px;
     width:165px;
     background:url(http://home.comcast.net/~janick1/tem...ts_current.gif) no-repeat left top;
    }
    #currente {
     left:515px;
     width:99px;
     background:url(http://home.comcast.net/~janick1/tem...bs_current.gif) no-repeat left top;
    }
    #currentf {
     left:615px;
     width:195px;
     background:url(http://home.comcast.net/~janick1/tem...ct_current.gif) no-repeat left top;
    }
    /* color images for current pages
    ----------------------------------------------- */
    #currenta_image, #currentb_image, #currentc_image, #currentd_image, #currente_image, #currentf_image {
    position:absolute;
    top:44px;
    height:127px;
    z-index:2;
    }
    #currenta_image {
     left:50px;
     width:98px;
     background:url(http://home.comcast.net/~janick1/tem...s/currenta.jpg) no-repeat left top;
    }
    #currentb_image {
     left:149px;
     width:85px;
     background:url(http://home.comcast.net/~janick1/tem...s/currentb.jpg) no-repeat left top;
    }
    #currentc_image {
     left:235px;
     width:113px;
     background:url(http://home.comcast.net/~janick1/tem...s/currentc.jpg) no-repeat left top;
    }
    #currentd_image {
     left:349px;
     width:165px;
     background:url(http://home.comcast.net/~janick1/tem...s/currentd.jpg) no-repeat left top;
    }
    #currente_image {
     left:515px;
     width:99px;
     background:url(http://home.comcast.net/~janick1/tem...s/currente.jpg) no-repeat left top;
    }
    #currentf_image {
     left:615px;
     width:195px;
     background:url(http://home.comcast.net/~janick1/tem...s/currentf.jpg) no-repeat left top;
    }
     
    </style>
    </head>
    <body>
    <div id="bannertop"></div>
    <div id="headercontainer"></div>
    <div id="menucontainer"></div>
    <div id="links"> 
      <div><a href="index.html">about <span class="a"></span></a></div>
      <div><a href="attorneys.html">attorneys <span class="b"></span></a></div>
      <div><a href="practice.html">practice areas <span class="c"></span></a></div>
      <div><a href="events.html">upcoming events <span class="d"></span></a></div>
      <div><a href="pubs.html">publications <span class="e"></span></a></div>
      <div><a href="contact.html">contact <span class="f"></span></a></div>
    </div>
    <div id="currentc"></div>
    <div id="currentc_image"></div>
    </body>
    </html>
    if you are placing the foreground image in the span as well as the background image on hover then you can't set the span to display:none otherwise it won't show.

    Also if you nest absoloutely placed elements in an absolutely placed element then the positioning will be relative to the parent.

    Paul

  14. #14
    SitePoint Addict m2k's Avatar
    Join Date
    Oct 2003
    Location
    Philadelphia
    Posts
    209
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    Makes sense after you explained it. Thanks!
    (link is updated if anyone is following along...)
    Last edited by m2k; Feb 17, 2004 at 07:47. Reason: added link

  15. #15
    SitePoint Member
    Join Date
    Apr 2004
    Location
    PA USA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image only rollover...

    paul / m2k / anyone else reading along...

    is there any way to do something like the faces mentioned above at http://www.adaptivepath.com/ without text-links? can you just have hover image swapping?

  16. #16
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by philaphil
    paul / m2k / anyone else reading along...

    is there any way to do something like the faces mentioned above at http://www.adaptivepath.com/ without text-links? can you just have hover image swapping?
    Just put your <img /> tag inside of the link (the <a> tag). Or do you want the link/image to change on mouseover too?

  17. #17
    Il condottiere Francesco Sforza's Avatar
    Join Date
    Mar 2004
    Location
    Cracow - Poland
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's yet another solution. I don't know if it's been posted here before. It's pure css rollover images with no need to preload them.
    So here it goes. First of all you need to prepare one image that represents both states - off and hover. For example, if the button is supposed to be 100x25 size you create a single image 100x50 size with both states.
    Now all you have to do is put it between <a></a> with:

    display block;
    width: 100px;
    height: 25px;
    background-image: url(myimage.gif);
    background-position: 0 0;

    and now for hover state - exactly the same except:

    background-position: 0 25px;

    Here's another version of this solution:

    http://www.pixy.cz/blogg/clanky/cssn...rs/update.html

    Hope this helps
    Regards

  18. #18
    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,

    And if you don't want the flickering hourglass that Francesco's method incurs in IE then try this one.

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

    It doesn't have any flicker at all and no hourglass appears (as with all background images). The drawback is that the one image must be in the foregorund (i.e.in the html) and it is this image that is hidden to reveal theimage that is already underneath.

    This incurs virtually no time delay (once the image is first loaded) and does not icur ie's annoying flickering hourglass.

    The background position method that Francesco described is still a good method and probably the best of the bunch if it wan't for that annoying hourglass flicker

    Paul

  19. #19
    SitePoint Member
    Join Date
    Apr 2004
    Location
    PA USA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    great!

    paul and vgarcia,

    problem solved. thank you! image now swaps on hover, and also has a popup announcing what it is / where it goes...

    is there anyway you can have a popup menu that includes further links w/css?

    philaphil

  20. #20
    SitePoint Member
    Join Date
    Apr 2004
    Location
    PA USA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    Hey again from me! Thanks again for your help in the past. I have another question for you...

    http://home.comcast.net/~tipupp/photoh.html

    check out the above link. i have two columns of thumb nails either side of an image of a computer monitor. on 'hover', i want a larger version of the thumb nail to show up 'on' the monitor. I have gotten quite close, but two problems exist and i can't get by them!

    1. in explorer, the thumbnails show up surrounded by an extra 15 or so px to either side. these px are background colored the same as the header with the tabs and i've no idea why. if you view the page in mozilla or netscape the thumbs show up as they should. i was able to set up just the monitor, thumbs, and 'hover' spans, and explorer displayed all as i had wished. buy when the tabbed header becomes involved, all goes haywire!!!

    2. at some point along the way, i seem to have lost control over the positioning of my 'hover' spans. i can no longer change the position that they will pop-up into. why is this?

    i also posted this message on the end of your string with m2k etc that contained much of the info i read prior to creating this page in case others wished to follow along...

    thanks for your help, Paul. (or anyone else who has the answer, for that matter!)

    Phil

  21. #21
    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,

    Answer 1)
    Not this:
    Code:
    div#tabs a:link, a:visited {
     background-color: #000066;
     color: #ffffff;
     text-decoration: none;
     padding: 0 1em 0 1em;}
    But This :
    Code:
    div#tabs a:link, div#tabs a:visited {
     background-color: #000066;
     color: #ffffff;
     text-decoration: none;
     padding: 0 1em 0 1em;}


    Haven't looked at problem 2 yet

    Paul

  22. #22
    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,

    Answer 2)

    You can change the positoning here:
    Code:
    #popupl a:hover span {
     position: absolute;
     top: 10px;
     left: 250px;
    }
    #popupr a:hover span {
     position: absolute;
     top: 10px;
     right:-35px;
    }
    Also you might want to add this for the red border in ie on hover:
    Code:
    .popup a:hover img {
     border:2px solid red;
    }
    Hope that helps.

    paul

  23. #23
    SitePoint Member
    Join Date
    Apr 2004
    Location
    PA USA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    doh! and whoa!

    so, answer 1 is great. i missed that - actually i hadn't realized that when using a comma one needs to repeat the descendancy of the selector.

    i may just be a fool, but could you answer #2 again for me? i tried what you suggested, and got the following result...

    http://home.comcast.net/~tipupp/photoh.html

    thanks!

    Phil

  24. #24
    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've changed the wrong things. You altered the id's not the classes.


    Code:
    #popupl {
     position: absolute;
     top: 183px;
     left: 100px;
     z-index: 150;
    }
    #popupr {
     position: absolute;
     top: 183px;
     left: 600px;
     z-index: 150;
    }
    .popupl a:hover span {
     position: absolute;
     top: 10px;
     left: 250px;
    }
    .popupr a:hover span {
     position: absolute;
     top: 10px;
     right:-35px;
    }
    Paul

  25. #25
    SitePoint Member
    Join Date
    Apr 2004
    Location
    PA USA
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    classes?

    paul,

    i wasn't aware that i had a class of popupl or popupr - do they read automatically from the div of class popup and id popupr?

    i now have the pop-up spans popping up in the middle of the thumbnails and pushing the other thumbs down the page...

    css now looks like:

    Code:
    
    .popup {	
    	width: 50px;
    	height: 300px;
    	background: orange;
    }
    .popup a {
    	width: 45px;
    	background: green;
    }
    .popup a span {
    	display: none;
    	}
    .popup a:hover {
    	color: #F00;
    	text-indent: 0;
    	}
    .popup span img {
    	width: 250px;
    	height: 250px;
    }
    .popup a:hover span {
    	display: block;
    	width: 340px;
    	height: 258px;
    	margin: 0px;
    	border: 0px;
    	color: red;
    }
    #popupl {
     position: absolute;
     top: 183px;
     left: 100px;
     z-index: 150;
    }
    #popupr {
     position: absolute;
     top: 183px;
     left: 600px;
     z-index: 150;
    }
    .popupl a:hover span {
     position: absolute;
     top: 10px;
     left: 100px;
    }
    .popupr a:hover span {
     position: absolute;
     top: 10px;
     right:-35px;
    }


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
  •