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

    Am I approaching rollover buttons the right way?

    Hi all,

    This is the first time I'm trying to use imported graphics as buttons. I have a bunch of .png images for inactive buttons and rollover state buttons.

    In my html I have each button area coded as follows:
    Code:
    <div id="nav"><a href="MainPage.html"><img alt="click here for homepage" src="images/navbarimages/inactbuts_03.png"></a>
    <a href="productinfo.html"><img alt="click here for product info" src="images/navbarimages/inactbuts_07.png"></a>
    and so forth...

    Then in my CSS, I have the images for the nav div styled as such:

    Code:
    #nav img {
      margin: 4.5%;
      visibility: visible;
      top: 122px;
      left: 23px;
      height: 53px;
      border-style: none;

    The graphics look great and position themselves just perfectly, but now I don't know how to make them change when I hover my mouse over them

    do I need to create a #nav img:hover statement for each button? And then change the background image png for each?


    I'm really having trouble wrapping my head around this.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello RKic,
    Your CSS is be a little off, you are using top and left coordinates but you don't position the img.

    The anchor you have in your markup works as a linked image but not so well as a rollover.

    Have a look at a simple CSS rollover example here and see if that helps you. That example is a 3-state rollover but the theory is the same for just a 2-state.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I hate to admit it, but I'm still very much a beginner, and kind of need things spelled out to me sometimes. I'm not really sure what is going on at the example site.

    I mean, what should the CSS be doing here? Is it telling the HTML to switch between two stored images? Or am I styling the link <a>?


    I'm not grasping something fundamental here.


  •  

    Posting Permissions

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