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 15 of 15
  1. #1
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    How to combine image rollovers and disjointed images?

    I've seen some tutorials for both, but I can't figure out how to combine the effects. What I need is a 5-button vertical nav list with three different images for each button state: normal, hover, and selected (i.e., image rollover). Also, I need a default icon image elsewhere to change to a different icon image when each button is in its hover state (i.e., disjointed image). Any ideas on how I can do this?
    Last edited by BB Iverson; 02-17-2008 at 10:52 AM.

  • #2
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    The nav list rollover is easily implemented in pure CSS using the Pixy technique (one background image with three sub-images; the background position is modified to suit).

    The disjointed rollover will need scripting. You need an onmouseover function that will change the (background) image your other target.

    You cannot use CSS to change the image outside the current anchor unless there is a precise (pixel-perfect) positioning relationship between them.

    John

  • #3
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Actinia View Post
    You cannot use CSS to change the image outside the current anchor unless there is a precise (pixel-perfect) positioning relationship between them.
    I will have a precise positioning relationship between the images. The button images have three states (normal, hover, and selected), while the icon images have two (normal and hover). How can I combine this effect with CSS? Because they're images, do I need a separate class for each of the 5 buttons?

  • #4
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    You need to give more information. can you post a link to your site, or post your code (use the # icons above to wrap your code in code tags).

    John

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,864
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Have a look at
    Keeping Navigation Current With PHP or http://www.codingforums.com/showthread.php?t=131742.
    Build a simple effect(using bakcground-color & color) and post your code/link to get more help.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I don't actually have any viable code yet. Several times, I started out attempting to make the vertical nav list using snippets from image rollover and disjointed image tutorials online. However, I always hit a dead end when attempting to combine the two effects.

    I can somewhat understand how to accomplish this by wrapping each individual button in its own div (or class even), but that seems to be a convoluted mess of coding. I was hoping for a cleaner way to get this done.

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Okay, so I'm presuming here that your nav list is a background rather than a whole specific image (i.e., there's no text so it's not specific.)
    Code:
    <style>
    #nav a {
      background: url(nav.png); /* change URI to location of normal image */
      width: 100px; /* modify to suit */
      height: 30px; /* modify to suit */
      display: block;
    }
    #nav a:hover {
      background: url(nav_hover.png); /* change URI to location of hover image */
    }
    #nav a.selected {
      background: url(nav_selected.png); /* change URI to location of selected image */
    }
    #nav li, #nav ul {
      width: 100px;
    }
    </style>
    <ul id="nav">
      <li><a href="/" class="selected">Home</a></li>
      <li><a href="/blog/">Blog</a></li>
      <li><a href="/about/">About</a></li>
      <li><a href="/contact/">Contact</a></li>
    </ul>

  • Users who have thanked Apostropartheid for this post:

    BB Iverson (02-17-2008)

  • #8
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That would work, with a bit of modification, but something that displays the disjointed icon image would have to be added. Regarding the rollovers, I came up with something from a tutorial. First, the CSS for the #nav container div:
    Code:
    #nav img { border: none; }
    #nav li { display: inline; list-style:none; }
    #nav li a { float: left; display:block; width: 115px; height: 35px; }
    #nav li a img {  border:none; vertical-align:bottom; /* for IE6 */}
    #nav li a:hover { visibility:visible; }
    #nav li a:hover img { visibility:visible; }
    #nav li a:hover img/**/ { visibility:hidden; /* hide from IE5.0/win */}
    The 5 buttons all use different images on rollover so I defined each with a different ID on the anchor element:
    Code:
    #one { background: url(one.jpg) no-repeat left bottom; }
    #two { background: url(two_green.jpg) no-repeat left bottom; }
    #three { background: url(three_green.jpg) no-repeat left bottom; }
    #four { background: url(four_green.jpg) no-repeat left bottom; }
    #five { background: url(five_green.jpg) no-repeat left bottom; }
    The XHTML:
    Code:
    <div id="nav">
    <ul>
    <li>
    <a title="" href="#" id="one">
    <img src="one_gray.jpg" alt="" /></a>
    </li>
    <li>
    <a title="" href="#" id="two">
    <img src="two_gray.jpg" alt="" /></a>
    </li>
    <li>
    <a title="" href="#" id="three">
    <img src="three_gray.jpg" alt="" /></a>
    </li>
    <li>
    <a title="" href="#" id="four">
    
    <img src="four_gray.jpg" alt="" /></a>
    </li>
    <li>
    <a title="" href="#" id="five">
    
    <img src="five_gray.jpg" alt="" /></a>
    </li>
    </ul>
    </div>
    Now I still need to have an absolute positioned icon image displayed above the vertical nav bar that changes to a different icon image upon hover of each button in the vertical nav bar. Any ideas on how to achieve that effect?

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Code:
    <style>
    .icon {
     display: none;
    }
    a:hover .icon {
     display: block;
     position: relative;
    }
    a#one:hover .icon {
     bottom: 35px; /* plus the height of the icon */
    }
    a#two:hover .icon {
     bottom: 70px; /* you get the idea */
    }
    </style>
    <ul>
    <li>
     <a href="/" id="one">
       <img src="one_gray.jpg" alt="Home"/> <!-- You shouldn't be using JPEGs for this sort of thing -->
       <img src="one_icon.png" alt="" class="icon"/>
     </a>
    </li>
    <!-- and so on -->
    Last edited by Apostropartheid; 02-17-2008 at 06:56 PM.

  • #10
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I'm trying to incorporate all I'm learning here, but I'm doing something wrong, obviously. The image swap isn't working on button hover. (I stopped after the second button effect didn't work.)

    I set up the pertinent vertical nav list portion of the page I'm working on here.

    Can someone take a look at it and help me figure out what should be done to get the rollover and image swap working together?
    Last edited by BB Iverson; 02-18-2008 at 06:10 PM.

  • #11
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    A heavily jettisoned version of your code works.

    Edit: Well, at least it would if it pasted. Hang on, gonna put it as an attachment...
    Attached Files Attached Files
    Last edited by Apostropartheid; 02-18-2008 at 08:36 PM.

  • Users who have thanked Apostropartheid for this post:

    BB Iverson (02-19-2008)

  • #12
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Almost there! That looks good in IE, but it borks in FF, as can be seen here. (I positioned the nav elements where they'll be on the whole "About Me" page I'm working on.)

    How can I stabilize it for Firefox?

  • #13
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Although the thing jumps up and down a bit in FF, I guess a partial solution would be to filter this out so only IE sees it:
    Code:
    a:hover .hover {
    margin-top: -19px; /* with this IE is stable, without this FF is nearly-stable */
    }
    How do I do that?
    Last edited by BB Iverson; 02-20-2008 at 11:02 AM.

  • #14
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Code:
    <!--[if IE]>
    <style>a:hover .hover {
    margin-top: -19px; /* with this IE is stable, without this FF is nearly-stable */
    }</style>
    <![endif]-->

  • #15
    New Coder
    Join Date
    Feb 2008
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I finally fixed it, without having to put that IE filter in the markup. I got rid of that negative margin bit and changed the display to inline. That made it display the same in IE and FF. Thanks everyone for your help!


  •  

    Posting Permissions

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