December 8, 2011

Cufon MouseOver Effect Works!!! With CodeIgniter Helper & JS Function

Cufon MouseOver Effect With CodeIgniter Helper Function

This helper function can help in mouseover and mouseout effect when you are using cufon for fonts on web pages.


if ( ! function_exists(‘link_hover’))
{
function link_hover($title, $class=’anchor’, $tag = ‘span’, $url)
{

$CI =& get_instance();

$time = time();
$active_url = ‘link_’.$time;
$inactive_url = ‘link_’.$time.’_over’;

if($tag != ”)
{
$str = ‘<‘.$tag.’ onmouseover=”link_hover(‘.$time.’);” onmouseout=”link_hover(‘.$time.’);”><a href=”‘.$url.'” id=”‘.$inactive_url.'”  style=”display:none” >’.$title.'</a><a href=”‘.$url.'” id=”‘.$active_url.'” >’.$title.'</a></’.$tag.’>’;
}
else
{
$str = ‘<‘.$tag.’ onmouseover=”link_hover(‘.$time.’);” onmouseout=”link_hover(‘.$time.’);”><a href=”‘.$url.'” id=”‘.$inactive_url.'”  style=”display:none” >’.$title.'</a><a href=”‘.$url.'” id=”‘.$active_url.'” >’.$title.'</a></’.$tag.’>’;
}

return $str;
}
}

Function Call:
link_hover($hightlight_one_results->content_title, ‘anchor’, ‘h2′,’some URL’);

JS Function:
function link_hover(link_id)
{
var obj_over = document.getElementById(‘link_’+link_id+’_over’);
var obj_over_status = obj_over.style.display;
var obj = document.getElementById(‘link_’+link_id);
var obj_status = obj.style.display;

if(obj_over_status == ‘none’)
{
obj_over.style.display = ‘block’;
}
else
{
obj_over.style.display = ‘none’;
}

if(obj_status == ‘none’)
{
obj.style.display = ‘block’;
}
else
{
obj.style.display = ‘none’;
}

}

Last updated: March 19, 2014