www.webdeveloper.com
Results 1 to 3 of 3

Thread: Rollover Button w/ Pulsing Hover

  1. #1
    Join Date
    Oct 2011
    Posts
    2

    Question Rollover Button w/ Pulsing Hover

    Hey there folks,

    I've been trying to figure out how to do this for some time now without using flash and I'm getting nowhere.

    So, I have a rollover button with the 2 button images in the same image, using negative height in CSS to perform the rollover (just like the button here). I would love it if the rolled-over image would pulse while the mouse is hovered over it.

    Any ideas on how to achieve this or a library that would support something like this? SO far I've just started researching jQuery UI effects and such, but I'm hitting a wall with progress.

  2. #2
    Join Date
    Mar 2007
    Location
    U.K.
    Posts
    1,127
    This is a runnable example that uses the image file from the link you posted:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Pulsate CSS Sprite Links</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style>
    
    .emailUs
    {
      display: block;
      width: 107px;
      height: 23px;
      background: url("emailUs.gif") no-repeat 0 0;
    }
    
    .emailUs:hover
    {
      background-position: 0 -23px;
    }
    
    .emailUs span
    {
      position: absolute;
      top: -999em;
    }
    
    
    .xLink span
    {
      position: absolute;
      top: -999em;
    }
    
    
    .xLink{
      display:block;
    
      float:left;
      width: 107px;
      height: 23px;
      background: url("emailUs.gif") no-repeat 0 0;
    }
    .xLink:hover
    {
      background-position: 0 -23px;
    }
    
    .spacer{ float:left; width:20px; height:23px }
    
    </style>
    <script>
    
    function SpriteLink( cName, offsets, delay )
    {
      var currentLink = null,
          currentTimer = null,
          currentState = 1;
    
      function installHandler( obj, evt, func )
      {
        window.attachEvent ? obj.attachEvent( evt, func ) : obj.addEventListener( evt.replace(/^on/i, ""), func, false );
    
        return func;
      }
    
      function animLink( /*2843294C6F67696320416C69*/ )
      {
        currentLink.style.backgroundPosition = ( currentState ^= 1 ) ? offsets : '0 0';
      }
    
      installHandler( document, 'onmouseover', function( e )
      {
        var evt = e || window.event,
            srcElem = evt.srcElement || evt.target,
            isLink = srcElem,
            rxp = new RegExp( '\\b' + cName + '\\b' );
    
        while( isLink && isLink.nodeName !== 'A' )
          isLink = isLink.parentNode;
    
        if( isLink  && !rxp.test( isLink.className ) )
          isLink = false;
          
        if( !isLink || ( isLink !== currentLink ) ) 
        {       
         clearInterval( currentTimer );
    
         currentState = 0;
    
         if( currentLink )
           currentLink.style.backgroundPosition = '0 0';
           
         currentLink = null;  
        }  
    
        if( isLink && isLink !== currentLink )
        {
          currentLink = isLink;  
          animLink();  
          currentTimer = setInterval( animLink, delay || 500 );      
        }
    
      });
    }
    
    SpriteLink( 'animLink', '0 -23px' );
    SpriteLink( 'fastLink', '0 -23px', 200 );
    
    </script>
    </head>
    <body >
    <a class="emailUs animLink" href="#"  title="Email Us"><span>Email Us</span></a></span><br><br>
    <a class="emailUs animLink" href="#"  title="Email Us"><span>Email Us</span></a></span><br><br>
    <a class="emailUs" href="#"  title="Email Us"><span>Email Us</span></a><span>I should not pulsate</span><br><br>
    <a class="emailUs animLink" href="#"  title="Email Us"><span>Email Us</span></a>
    
    <hr>
    Another group<br>
    
      <a class="xLink fastLink" href="#"  title="Email Us"><span>Email Us</span></a><div class='spacer'></div>
      <a class="xLink fastLink" href="#"  title="Email Us"><span>Email Us</span></a><div class='spacer'></div>
      <a class="xLink  fastLink" href="#" title="Email Us"><span>Email Us</span></a><div class='spacer'></div>
      <a class="xLink " href="#"  title="Email Us"><span>Email Us</span></a>
      <div style='float:left;background:none; width:auto'>&lt; I should not pulsate</div>
    </body>
    </html>
    Where used, return should be executed unconditionally and always as the last statement in the function.

    That's my signature, it's not part of the damn post!

  3. #3
    Join Date
    Oct 2011
    Posts
    2
    Wow! Thank you so much. This is awesome. I'll be looking through the code you posted and trying to figure out how it works and see if I can fiddle with it .

    Do you know if there is a way to make the pulse fade in/out instead of flash in/out? This would be ideal. I'm trying to achieve a sort of smooth, slow pulsing effect on the hover-over instead of a flashing.

    I uploaded an image that I'm hoping to use for this here if anyone is interested in messing around with this further. Here's the CSS I'm using for the images as well . . .

    Code:
    #home_button {
    	display: inline;
    	float: right;
    	list-style-type: none;
    	text-decoration: none;
      	width: 100px;
      	height: 35px;
      	background: url(media/images/home_button.png) no-repeat 0 0;
    
    }
    
    #home_button:hover { 
      	background-position: 0 -35px;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles