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 4 of 4
  1. #1
    New Coder
    Join Date
    May 2007
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    image rollovers in CSS-based nav bar?

    I have a navigation bar for my site here and I was wondering if there was an easy way to replace the images on rollover using CSS. Basically, I just want to replace the item they have their mouse over with a colored or otherwise emphasized version. This would apply to both the horizontal menu items, and each of their sub-menu items. Thanks in advance.

  • #2
    New Coder cheat's Avatar
    Join Date
    Nov 2006
    Location
    England, Britain
    Posts
    74
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok first off you would be better posting in the javascript forum.
    so anyway the best way to do a image rollover is with this:
    <script type="text/javascript">
    var revert = new Array();
    var inames = new Array('smirk');

    // Preload
    if (document.images) {
    var flipped = new Array();
    for(i=0; i< inames.length; i++) {
    flipped[i] = new Image();
    flipped[i].src = "media/"+inames[i]+"2.gif";
    }
    }

    function over(num) {
    if(document.images) {
    revert[num] = document.images[inames[num]].src;
    document.images[inames[num]].src = flipped[num].src;
    }
    }
    function out(num) {
    if(document.images) document.images[inames[num]].src = revert[num];
    }
    </script>

    put that in the <head> tag

    then to insert the images do

    <img src="image url here" name="image" onMouseOver="over(0)" onMouseOut="out(0)">

    just put that where you want it to run the rollover.

    hope this helps.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,918
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    No, this isn’t the best way, and no, the JavaScript forum is the wrong place for a CSS rollover question. Wellstyled has a nice article on how to do CSS image rollovers without preloading (althoug I prefer the images above one antoher, not next to each other).
    I don’t have the time for long explanations now. I’ve recently done a site with advanced usage of that technique, maybe you can learn from that (by checking out the relevant stylesheet).

  • #4
    New Coder
    Join Date
    Feb 2007
    Location
    Albany, Oregon
    Posts
    66
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Does anyone know of a fix for an <a> element not displaying width properly? I have a series of links and images all in one line, but the anchored tags are not appearing at all.

    Code:
    <div id="navigation">
    <img alt="left" src="images/left.jpg" /><a id="index" href="index.html"></a><img alt="divider1" src="images/divider1.jpg" /><a id="about" href="about.html"></a><img alt="divider2" src="images/divider2.jpg" /><a id="gallery" href="gallery.html"></a><img alt="divider3" src="images/divider3.jpg" /><a id="contact" href="contact.html"></a><img alt="right" src="images/right.jpg" />
    </div>
    Code:
    a#index {
      background-image: url(images/home.jpg);
      height: 50px;
      width: 70px;
      }
    
    a#index:hover {
      background-image: url(images/home.jpg);
      background-position: 0 -50px;
      }
    
    a#about {
      background-image: url(images/about.jpg);
      height: 100px;
      width: 80px;
      }
    
    a#about:hover {
      background-image: url(images/about.jpg);
      background-position: 0 -50px;
      }
    
    a#contact {
      background-image: url(images/contact.jpg);
      height: 100px;
      width: 100px;
      }
    
    a#contact:hover {
      background-image: url(images/contact.jpg);
      background-position: 0 -50px;
      }
    
    a#gallery {
      background-image: url(images/contact.jpg);
      height: 100px;
      width: 100px;
      }
    
    a#gallery:hover {
      background-image: url(images/gallery.jpg);
      background-position: 0 -50px;
      }


  •  

    Posting Permissions

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