Some time ago client asked us to output ICQ status in contact block, to make users see if manager is online for chat. This module was implemented with the use of hook_filter.

All ICQ numbers were “tagged in” {icq}XXXXXX{/icq} and were changed when outputting to flowers with proper colors. You can see the work of this module on site http://ohrsys.com.ua. The whole module you can see in file attached.
The biggest problem of implementation of this module was - if we add ICQ number to the block - it’s content is cashed and not only for anonymous. That’s why we needed to make information actual in spite of drupal cashing. And user could see actual info only at a point of opening the page, and if user stays longer n the page - ICQ status info won’t be able to be actual. The easiest way of resolving this problem was using ajax requests.
So we create callback with the help of hook_menu


/**
* Implementation of hook_menu().
*/
function icqfilter_menu() {
$items = array();

$items['icq'] = array(
'page callback' => 'icq_status',
'page arguments' => array(1),
'access arguments' => array('access content'),
'type' => MENU_CALLBACK,
);

return $items;
}

Hook’s handler gets ICQ number and returns ICQ status, pay attention to how we return plain text without any design

function icq_status($account){
$path = "./".drupal_get_path("module", "icqfilter");
$url = sprintf('http://status.icq.com/online.gif?icq=%s&img=1', $account);
$response = drupal_http_request($url);
switch ($response->redirect_url) {
case '/1/online1.gif':
$status = '1';
break;
case '/1/online0.gif':
$status = '0';
break;
case '/1/online2.gif':
$status = '2';
break;
default:
$status = '2';
break;
}
header("Content-Type: text/plain");
echo $status;
}

Then after few minutes JS sends query to callback and actualize information on the page (changes image).
If user interface has image, that should change by JS event (it can be mouse hover) there is always one more important thing to do - you shouldn’t keep images in different files, but keep images in one file and show it like background shifting it by JS event.
This is image
This is fragment of JS that manipulates it.

$.post("/icq/"+id.substring(4), function(data){
if(data == 1){
$("div .icq:eq("+index+")").css("background-position","0 -18px");
}
if(data == 0){
$("div .icq:eq("+index+")").css("background-position","0 -36px");
}
if(data == 2){
$("div .icq:eq("+index+")").css("background-position","0 0");
}
});

When 3 different images were used for statuses image disappeared after status changing and it’s place was empty while necessary image were uploading.