Scriptionary

If you use the extended version of the Livetr Theme (the one with Gravatars), you might have noticed that the Gravatars don’t quite look so nice since they’re compressed into a smaller image size. Below follows a JavaScript snippet which you could use to make the Gravatar pop out of the page when hovered over.

Screenshot:

Code:

Open up comments.php in the wp-content/themes/livetr-theme-11/ directory and paste the following between the

<?php if ($comments) : ?>

and

<h3 id="respond">Comments:</h3>

lines to read the following block of code:

<script type="text/javascript">
var mouseX;
var mouseY;
var visible = false;
var curElem = false;

var IE = document.all ? true : false;
if (!IE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMouseXY;

document.write('<div id="gravatarBox" style="position:absolute; background-color: #FFF; border: 1px solid silver; left:0px;top:0px;width:85px;height:85px;display:none;"></div>');

function toggleVis(hovElement, display)
{
	elem = document.getElementById('gravatarBox');
	if (display == true)
	{
		if (!visible)
		{
			elem.style.display = 'block';
			elem.style.backgroundImage = 'url(' + hovElement.src + ')';
			elem.style.backgroundPosition = 'center center';
			elem.style.backgroundRepeat = 'no-repeat';
			visible = true;
			curElem = elem;
		}
	}
	else
	{
		elem.style.display = 'none';
		elem.style.backgroundImage = '';
		visible = false;
		curElem = false;
	}
}

function getMouseXY(e)
{
  if (IE)
  {
    mouseX = event.clientX + document.body.scrollLeft;
    mouseY = event.clientY + document.body.scrollTop;
  }
  else
  {
    mouseX = e.pageX;
    mouseY = e.pageY;
  }

  // catch possible negative values in NS4
  if (mouseX < 0) mouseX = 0;
  if (mouseY < 0) mouseY = 0;

	if ( visible == true &amp;&amp; curElem != false )
	{
		curElem.style.left = (mouseX + 5) + 'px';
		curElem.style.top = (mouseY - 85) + 'px';
	}

  return true;
}

</script>

Now find and change:

<img src="<?php gravatar() ?>&default=<?php bloginfo('home'); ?>/wp-content/themes/livetr/images/blank_gravatar.gif" class="gravatar" align="left" />

To:

<img onmouseover="toggleVis(this, true)" onmouseout="toggleVis(this, false);" src="<?php gravatar() ?>&default=<?php bloginfo('home'); ?>/wp-content/themes/livetr/images/blank_gravatar.gif" class="gravatar" align="left" />

Notes:

I don’t claim that the code above will work on all browsers, I’ve tested it on Firefox 2.0.0.13 and Internet Explorer 7. You might have to change some things around to make it compatible with other themes and the style I’ve attached to the <div> if you want it to look good with your theme. Also, I’ve just finished this snippet so it might need some optimization (it’s quite hack-ish): my forte is not JavaScript/DOM.