Rollover Button w/ Pulsing Hover

**aksparks04** · 10-13-2011 02:09 AM

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.

**Logic Ali** · 10-13-2011 09:52 PM

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>

**aksparks04** · 10-14-2011 02:04 AM

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: Rollover Button w/ Pulsing Hover

Thread Tools

Display

Rollover Button w/ Pulsing Hover

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions