[gnomeontherun]

Alright I came up with something that works, but isn't exactly what I'd like. I have decided that I can live with the image not floating back to its original position. I have isolated the image from the text by doing this.

#portfolio-cloud {
	background-image: url("../images/portfolio_bg.png");
	background-repeat: no-repeat; 
	width: 124px;
	height: 35px;
	display: block;
	text-align: center;
	padding-top: 35px;
}

#portfolio {
	position: relative;
	top: -37px;
	padding-left: 28px;
}


<span id="portfolio-cloud"></span><a href="#" id="portfolio" onmouseover="FloatCloud('portfolio-cloud');" onmouseout="StopFloatCloud('portfolio-cloud');">portfolio</a>

EDIT:

Persistence is the key!

Solved by this code. Basically I added 'afterFinish' to the last queue item to loop the animation. Also, I found that by clearing the queue on mouseout and by using one last Effect.Move with 0,0,'absolute' returns it to its original location.

function floatCloud(element){
	new Effect.Move(element, { x: 6, y: -3, mode: 'relative', duration: 1.0, queue: { position: 'end', scope: element } });
	new Effect.Move(element, { x: -4, y: 5, mode: 'relative', duration: 1.0, queue: { position: 'end', scope: element } });
	new Effect.Move(element, { x: 5, y: 2, mode: 'relative', duration: 1.0, queue: { position: 'end', scope: element } });
	new Effect.Move(element, { x: -7, y: -4, mode: 'relative', duration: 1.0, queue: { position: 'end', scope: element }, afterFinish: function() { floatCloud(element); } });
}

function stopFloatCloud(element){
	var queue = Effect.Queues.get(element);
	queue.each(function(effect) { effect.cancel(); });
	new Effect.Move(element, { x: 0, y: 0, mode: 'absolute', duration: 1.0 });
}