12 {{ upvoteCount | shortNum }}
12 {{ upvoteCount | shortNum }}

On Mouse Hover Image Button - Help!

by Go4DBest
10 replies
  • WEB DESIGN
    • |
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:

<div>

<style type="text/css">
a.rollover {
display: block;
width: 308px;
height: 70px;
background-image: url('http://thesuperchargedagency.com/UtopiaGraphix/wp-content/uploads/2012/11/Start-Designing.png');
}

a.rollover:hover {
background-image: url('http://thesuperchargedagency.com/UtopiaGraphix/wp-content/uploads/2012/11/Start-Designing-hover.png');
}
</style>

<a href="#" class="rollover"></a>
</div>
Did I miss something? How can I make that the button won't be gone on the first click.

Thanks a lot!

G.B.
#button #hover #image #mouse
  • Profile picture of the author Go4DBest
    Anyone, please?
    Signature
    We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
    {{ DiscussionBoard.errors[7398815].message }}
  • Profile picture of the author AdWordsUzmani
    I can't see any problem. What is your browser?
    {{ DiscussionBoard.errors[7398842].message }}
    • Profile picture of the author Go4DBest
      Originally Posted by AdWordsUzmani View Post

      I can't see any problem. What is your browser?
      I tested it in both Chrome and Rockmelt. On your first click, it seems like the button blinks. But later on, everything is fine.
      Signature
      We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
      {{ DiscussionBoard.errors[7398940].message }}
  • Profile picture of the author AdWordsUzmani
    It's not blinking it is loading the image. And there is no solution for that. Maybe you can search css split image.
    {{ DiscussionBoard.errors[7399009].message }}
    • Profile picture of the author Go4DBest
      Originally Posted by AdWordsUzmani View Post

      It's not blinking it is loading the image. And there is no solution for that. Maybe you can search css split image.
      Thanks for the input, pal.

      I recorded my screen, please check, http://thesuperchargedagency.com/Uto...11-28_2235.swf

      Thanks,
      G.B.
      Signature
      We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
      {{ DiscussionBoard.errors[7399118].message }}
  • Profile picture of the author AdWordsUzmani
    Like I said, there is no problem but still you can use the css split.
    Here is the sample : Edit this Fiddle - jsFiddle
    {{ DiscussionBoard.errors[7399218].message }}
    • Profile picture of the author Go4DBest
      Originally Posted by AdWordsUzmani View Post

      Like I said, there is no problem but still you can use the css split.
      Here is the sample : Edit this Fiddle - jsFiddle
      Thanks a lot, you rock. The css split works..
      Signature
      We setup and design wordpress sites using the Divi theme for roughly 200 USD. Let's talk.
      {{ DiscussionBoard.errors[7399310].message }}
  • Profile picture of the author clickbump
    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:

    Signature
    {{ DiscussionBoard.errors[7400613].message }}
  • Profile picture of the author bhmseoservices
    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>
    Signature
    webdesign company| seo services | Search engine optimization company
    {{ DiscussionBoard.errors[7400807].message }}
  • Profile picture of the author nawshale
    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.
    {{ DiscussionBoard.errors[7402128].message }}

Trending Topics