On Mouse Hover Image Button - Help!

by 10 replies
12
Greetings Warriors!

The button works well only that on the first click, it will be gone a bit and come back right away. Just on the first click.. http://thesuperchargedagency.com/Uto...using-css.html

Here's my code:

Did I miss something? How can I make that the button won't be gone on the first click.

Thanks a lot!

G.B.
#website design #button #hover #image #mouse
  • Anyone, please?
  • I can't see any problem. What is your browser?
    • [1] reply
    • I tested it in both Chrome and Rockmelt. On your first click, it seems like the button blinks. But later on, everything is fine.
  • It's not blinking it is loading the image. And there is no solution for that. Maybe you can search css split image.
    • [ 1 ] Thanks
    • [1] reply
  • Like I said, there is no problem but still you can use the css split.
    Here is the sample : Edit this Fiddle - jsFiddle
    • [ 1 ] Thanks
    • [1] reply
    • Thanks a lot, you rock. The css split works..
      • [ 1 ] Thanks
  • It may be helpful to others reading this to explain a bit more about what's happening and how to do it. Its a very useful technique to learn and use. The method is usually referred as using "CSS Sprites".

    The beauty of this technique is that it does not require javascript and reduces http requests resulting in speedier sites and happier site visitors

    Its very useful for displaying rollover images as well as common graphics that are used across a site. You download a master sprite image containing all of your images in one file and then you can use the css background-position property to show/hide images that make up the sprite.

    This eliminates the extra http requests required to load each image as individual files and effectively preloads the hover image in the background so that its immediately available when called into view.

    For example, in the jsfiddle, here's the complete image (a single image) that the demo utilizes to create the rollover effect as if it were two images:

  • I've only been able to do this using Javascript. Here's a small tutorial on how to,

    <html>
    <head>
    <script type="text/javascript">
    function swap() { window.document.pic.src='pic2.png'; }
    </script>
    </head>

    <body>
    <img src="pic1.png" name="pic" onhover="swap()">
    </body>
    </html>
  • In my opinion, there's no error in the program. Some of the codes are in need of splitting or you can try the basic structure for the html. Like bhmseoservices posted here. There's so many procedures you can try to make sure that the program will work.
Join the discussion

Next Topics on Trending Feed