Create WBBLite2 Hover for WerWarOnline ( WhoWasOnline )

Javascript.js

var hoverImage = document.createElement('img');

$$('a.hoverImage').invoke('observe', 'mouseover', function(event) {
  if(this.rel != '') {
		hoverImage.src = 'wcf/images/avatars/'+this.rel;
		hoverImage.setStyle({
			
			position: 'absolute',
			left: event.pageX+'px',
			top: (event.pageY+10)+'px',
			display: 'block'
		});
		document.body.appendChild(hoverImage);
	}
});

$$('a.hoverImage').invoke('observe', 'mouseout', function(event) {
    hoverImage.setStyle({display:'none'});
});

UsersWasOnlineList.class.php

<?php
    /**
     * @see UsersWasOnline::handleRow()
     */
    protected function handleRow($row, User $user) {
        $this->usersWasOnlineTotal++;

        if ($row['userID']) {
            // members
            $this->usersWasOnlineMembers++;
            $founds = mysql_query('SELECT avatarID,avatarExtension  FROM wcf1_avatar WHERE userID = '.intval($row['userID']).' LIMIT 1;');
            $found = mysql_fetch_assoc($founds);
            $avatar = '';
            if($found !== FALSE){
                $avatar = 'avatar-'.$found['avatarID'].'.'.$found['avatarExtension'];
            }
            if ($this->isVisible($row, $user)) {
                if (!$this->limitUsers || count($this->usersWasOnline) < $this->limitUsers)
                $this->usersWasOnline[] = array('userID' => $row['userID'], 'plainname' => $row['username'], 'username' => $this->getFormattedUsername($row, $user), 'lastActivityTime' => $row['lastActivityTime'], 'avatar' => $avatar);
            }
            else {
                $this->usersWasOnlineInvisible++;
            }
        }
    }

wwo.tpl

<a class="hoverImage" rel="{@$userWasOnline.avatar}" href="index.php?page=User&amp;userID={@$userWasOnline.userID}{@SID_ARG_2ND}">{@$userWasOnline.username}</a>