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 12 of 12
  1. #1
    New Coder
    Join Date
    Oct 2004
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Rollover effect with images and no preload

    Do you guys know of a way to get rid of the annoying delay when using images as a bg on a menu and an image as the rollover on the menu?

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there jpalazzi,

    you may find this thread of interest

    coothead

  • #3
    New Coder
    Join Date
    Oct 2004
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up interesting

    That is a neat trick. I am not sure how the rollover works though.
    I want an image as teh background color and then i want another image as the rollover color.

    How does it change the actual color?

    Thanks

  • #4
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Like mine:
    http://www.igotyourhouse.com

    You have one major image that has the rollover as the top or bottom, and vice versa:
    http://www.igotyourhouse.com/images/links.png

    Then you just code it so that when someone rolls over the link, the background shifts up or down:
    Code:
    #navbar a{
    	font: normal 14px/26px helvetica, verdana, arial, sans-serif;
    	text-align: center;
    	color: #666;
    	display: block;
    	text-decoration: none;
    	background: transparent url(images/myrollover.png) no-repeat scroll 0px 0px;
    }
    #navbar a:hover{
    	color: white;
    	background: transparent url(images/myrollover.png) no-repeat scroll 0px -25px;
    }
    Make sense? You can even hide the text and just do images, but text + images is a lot more sane -- though, sometimes not needed.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,694
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there jpalazzi,

    as bradyj said or in my example from right to left
    The major advantage apart from no preload problems is no javascript

    coothead

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Credit where its due: http://wellstyled.com/css-nopreload-rollovers.html

    And an interesting variation I've not played with myself: http://devilock.mine.nu/pixie/

  • #7
    New Coder
    Join Date
    Oct 2004
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    not picking it up?

    Brady J
    background: transparent url(images/myrollover.png) no-repeat scroll 0px 0px;
    }
    #navbar a:hover{
    color: white;
    background: transparent url(images/myrollover.png) no-repeat scroll 0px -25px;


    seems to me you are using the same image? Do you set the intial background in the html or something?

  • #8
    Regular Coder
    Join Date
    May 2004
    Location
    Minneapolis, MN, USA
    Posts
    904
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes... note that the position of it is shifting by exactly the height of the container...

    Also CLICK THE LINKS ABOVE...

  • #9
    New Coder
    Join Date
    Oct 2004
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts

    i am just not getting this



    #nav a
    {
    width: 95px;
    display: block;
    color: black;
    text-decoration: none;
    background-color: #D5D5D5;
    border: 1px solid #000000;
    padding: 4px;
    font:12px verdana; /* N6 needs this to cascasde the font style */
    background-image: url(menubg2.jpg);

    }

    /* BMH for IE 5 */

    * html #nav a
    {
    width: 92px;
    w\idth: 92px;
    }

    #nav li
    {
    float: left;
    width: 93px; /* width of the individual bars */
    position: relative;

    }

    #nav li ul
    {
    position: absolute;
    left: -999em;
    width: 95px;
    }

    #nav li a:hover
    {
    color: #FFFFFF;
    background-color: #B40820;
    background-image: url(menubg3.jpg);

    }

    #nav li:hover ul, #nav li.sfhover ul
    {
    left: auto;
    }

    #nav ul
    {
    text-align: center;
    display: block;
    }



    That's my style sheet...can someone tell me what to edit...I have tried all the things you suggest, but no of them work right.

    Thanks to anyone who can help.

  • #10
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, did you put this on your site yet? Look at your code right there, I can see problems, but I cannot test it affectively. I'll give an example -- say you have this list:
    Code:
    <ul id="nav">
    <li><a href="index.html">Home</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>
    Now you'd like to style those links:
    Code:
    #nav li a {
    width: 100px;
    height: 20px;
    display: block;
    background: transparent url(image/image.png) no-repeat 0px 0px;
    }
    #nav li a:hover {
    background: transparent url(image/image.png) no-repeat -20px 0px;
    }
    That will shift the background image -25px when someone rolls their mouse over the link. So you would have created an image that is 40px tall, top half being 20px of the rollover image, the bottom half being the original state. You could even make a larger image and do visited or active or all that stuff
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...

  • #11
    New Coder
    Join Date
    Oct 2004
    Posts
    36
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OHHHHH
    So i take both images i use now...image1.jpg and image2.jpg and combine them into one image. then just shift it up and down!
    Gotcha!
    Man i am sorry about that...Brain Fart.

  • #12
    Senior Coder
    Join Date
    Apr 2003
    Location
    San Francisco, CA
    Posts
    2,469
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jpalazzi
    OHHHHH
    So i take both images i use now...image1.jpg and image2.jpg and combine them into one image. then just shift it up and down!
    Gotcha!
    Man i am sorry about that...Brain Fart.
    Bingo It's cool, I didn't really get it at first either, it's rather contradictory to what we're accustomed to.
    // Art is what you can get away with. <-- Andy Warhol
    ...:.:::: bradyjfrey.com : htmldog : ::::.:...


  •  

    Posting Permissions

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