Web Analytics Made Easy -
StatCounter Image flashes on css rollover - CodingForum

Announcement

Collapse
No announcement yet.

Image flashes on css rollover

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Image flashes on css rollover

    Hello Everyone!

    when i view this link:

    http://www.michelbayard.bobos.ca/lbp/index.html

    it seems that when I go over the "english" or "french" button that for a moment the image flashes. I thought perhaps this was due to pre-loading, so I added a pre-loader, but it doesn't seem the rectify this flashing.

    Any advise or help would be greatly appreciated,

    mbay

  • #2
    It's the image loading; not that you can really see the difference between the 2 images.

    Some advice - get rid of the rollovers. Make one big image with an image map or positioned links.
    Forget style. Code to semantics. Seperate style from structure, and structure from behaviour.
    I code to specs, and test only in Firefox (unless stated otherwise).

    Comment


    • #3
      or combine the original img and the rollover img, to make one big image then a:hover just change the background position.
      ||||If you are getting paid to do a job, don't ask for help on it!||||

      Comment


      • #4
        Hi Hemebond!

        Thanks for the advise! Image map or positioned links? Honestly, not too familiiar with those, but I will do some research.

        Thanks again!

        --

        Hi Aerospace!

        Thanks for the advise too! Change the background position? Hmm, interesting concept. Won't that cause the image to be heavier if it's bigger? I don't know much about it to comment othersiwe, but I will research it too!

        Thanks again!

        Comment


        • #5
          No it would be less size more than likely. It would take care of the flicker. It wouldn't have to make another server called either. For an example of what I'm talking about check out the navigation on this page.
          The home image is only 3.13kb, this is with both the on and off images combined. Now the individual image is 2.61kb, and if you double that you have a little over 5kb in filesize total.
          Attached Files
          ||||If you are getting paid to do a job, don't ask for help on it!||||

          Comment


          • #6
            Hi Aerospace!

            So from I what I can see of the example and the attached images, it seems that your just move the image according to the state (e.g. mouseover)? Interesting. But by moving the image, wouldn't the other button show since it is attached and after all the same image?

            Comment


            • #7
              No not if the height of its containing element is just enough to show part of the image in this case half. I don't even use home-off.gif that was just use to compare file size.
              ||||If you are getting paid to do a job, don't ask for help on it!||||

              Comment


              • #8
                Hi Aerospace!

                Yes, i presumed the other gif was to show the comparison, which was much grander than the 2 together. I did not that since the element size is half in this case that the other half is not show. This is a good to know. Thanks you very much. I will try this immediately with my example.

                Thanks again for all your help and advice!

                Comment


                • #9
                  Good suggestion _Aerospace_Eng_ - I was actually experiencing a similar problem but it was a low priority thing for me until I worked out more important things.

                  I tried out this idea and it worked out great while I ran it locally but as soon as I implemented it to the live application it still has a slight flicker in IE. If I have three tabs and I hover over one they all go blank for a split second. Hmmm I'll have to look into this more.
                  Last edited by webmarkart; Aug 4, 2005, 10:43 AM.
                  -WebMark Art
                  Programming is 80% thinking and 20% spelling

                  Comment


                  • #10
                    There shouldn't be any flicker unless you are using more than one image for the rollover.
                    ||||If you are getting paid to do a job, don't ask for help on it!||||

                    Comment


                    • #11
                      Here is the image I'm using:

                      It worked perfectly until I loaded it into the application I'm building. As a standalone html doc it worked great. I'm going to have to dig deeper into the code but I use the same css and everything for the standalone... I don't get it.


                      /*--------------------- Format Active Tab Navigation ---------------------*/
                      .taba {background:url(../images/tabs3x.gif) no-repeat; background-position:top center; width:146px; height:22px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px; color:#ffffff !important; font-weight:bold; text-align:center; padding-right:2px;}
                      .taba a {display:block; height:22px; color:#ffffff !important; text-decoration:none}
                      .taba a:hover {color:#ffffff !important; text-decoration:underline;}
                      /*--------------------- Formats Nonactive Tab Navigation ---------------------*/
                      .tabn {background:url(../images/tabs3x.gif) no-repeat; background-position:bottom center; width:146px; height:22px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px; color:#2F553B !important; font-weight:bold; text-align:center; padding-right:2px;}
                      .tabn a {display:block; height:22px; color:#2F553B !important; text-decoration:underline; text-align:100%;}
                      .tabn a:hover {color:#2F553B !important; text-decoration:none;}
                      /*--------------------- Formats Hover Tab Navigation ---------------------*/
                      .tabhover {background:url(../images/tabs3x.gif) no-repeat; background-position:center center; width:146px; height:22px; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:10px; color:#ffffff !important; font-weight:bold; text-align:center; padding-right:2px;}
                      .tabhover a {display:block; height:22px; color:#2F553B !important; text-decoration:underline; text-align:-100%;}
                      .tabhover a:hover {color:#2F553B !important; text-decoration:none;}


                      <table cellpadding="0" cellspacing="0" id="tabtable" align="center">
                      <tr>
                      <td class="taba">Add New Account</td>
                      <td class="tabn" onMouseOver="this.className='tabhover';" onMouseOut="this.className='tabn';"><a href="account_search.html">Search Accounts</a></td>
                      <td class="tabn" onMouseOver="this.className='tabhover';" onMouseOut="this.className='tabn';"><a href="account_search.html">Search Accounts</a></td>
                      <td class="tabn" onMouseOver="this.className='tabhover';" onMouseOut="this.className='tabn';"><a href="account_search.html">Search Accounts</a></td>
                      <td><img src="images/white1.gif" alt="" border="0"></td>
                      </tr>
                      </table>
                      -WebMark Art
                      Programming is 80% thinking and 20% spelling

                      Comment


                      • #12
                        Ugh CSS all on one line, a little hard to read IMO. You have some excess CSS that you don't need. And the onmouseout and onmouseover, thats not needed either. Quite frankly the menu shouldn't even be inside of a table. You should be using an unordered or ordered list.
                        Code:
                        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dli">
                        <html lang="en">
                        <head>
                        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                        <style type="text/css">
                        #tabmenu {
                        margin:0 auto;
                        padding:0;
                        list-style:none;
                        width:700px; /*make this the width of your menu plus your white1.gif*/
                        }
                        #tabmenu li {
                        float:left;
                        }
                         /*--------------------- Format Active Tab Navigation ---------------------*/
                        #tabmenu .taba a, #tabmenu .taba a:link, #tabmenu .taba a:visited, #tabmenu .taba a:active {
                        background:url(tabs3x.gif) no-repeat; 
                        width:146px;
                        height:22px;
                        font-family:Verdana,Arial,Helvetica,sans-serif;
                        font-size:10px;
                        color:#ffffff;
                        font-weight:bold;
                        text-align:center;
                        padding-right:2px;
                        display:block;
                        text-decoration:none;
                        }
                        #tabmenu .taba a:hover {
                        cursor:default;
                        }
                        /*--------------------- Formats Nonactive Tab Navigation ---------------------*/
                        #tabmenu li a, #tabmenu li a:link {
                        background:url(tabs3x.gif) bottom no-repeat;
                        width:146px;
                        height:22px;
                        font-family:Verdana,Arial,Helvetica,sans-serif;
                        font-size:10px;
                        color:#2F553B;
                        text-decoration:underline;
                        font-weight:bold;
                        text-align:center;
                        padding-right:2px;
                        display:block;
                        }
                        #tabmenu li a:hover {
                        background-position:center;
                        color:#2F553B;
                        text-decoration:none;
                        }
                        </style>
                        <title></title>
                        </head>
                        <body>
                        <ul id="tabmenu">
                        <li class="taba"><a href="#">Add New Account</a></li>
                        <li><a href="account_search.html">Search Accounts</a></li>
                        <li><a href="account_search.html">Search Accounts</a></li>
                        <li><a href="account_search.html">Search Accounts</a></li>
                        <li><img src="images/white1.gif" alt="" border="0"></li>
                        </ul>
                        </body>
                        </html>
                        ||||If you are getting paid to do a job, don't ask for help on it!||||

                        Comment


                        • #13
                          sorry for the css on one line but that's how I prefer it - Thanks for taking the time to look at this for me. As far as being within a table I would love to get them out but there is existing code I have to consider. I'll see if I can possibly do a global change if this works well.


                          Two questions question with your example...

                          1.The tabs are generated manually so I will not necessarily know the width. The white1.gif was a shim to take up whatever remaining space was needed to fill the table width. Do I have to set the width?

                          2. I noticed when I tried to make the tabs a block element even with my table structure the text gets pushed to the top. I've tried everything I can to get it to valign middle again but it doesn't budge. Any suggestions?
                          -WebMark Art
                          Programming is 80% thinking and 20% spelling

                          Comment


                          • #14
                            Well then do you even need the white gif? If you don't know the width of the links then your background image may not be seen to its fullest. They are a set width just because the full background images need to show. Add padding-top to the links and adjust the height, so for example if you added a 5px top padding your new height for the links would be 17px
                            ||||If you are getting paid to do a job, don't ask for help on it!||||

                            Comment


                            • #15
                              I suppose we could do come backend processing to calculate the width but no link will exceed the 146px of the tabs - I just don't know how many tabs there will be.

                              I must not be doing something correctly - when I add padding-top:5px; the whole tab expands and I see part of the other tabs states.

                              I tried pasting in exactly what you posted and it really screws up the pg layout for me. Things start overlapping and it just looks bad...

                              see for yourself:

                              Original code with tables

                              your code with following content
                              -WebMark Art
                              Programming is 80% thinking and 20% spelling

                              Comment

                              Working...
                              X