phpwcms Support Forum

The phpwcms support forum will help to find answers to your questions. The small but strong community is here since more than 10 years.
https://forum.phpwcms.org/

{GT}&menu mod - auto mouse over menu

https://forum.phpwcms.org/viewtopic.php?t=7692

Page 1 of 1

{GT}&menu mod - auto mouse over menu

Posted: Mon 11. Jul 2005, 10:44
by consistency
hello folks

this is a small hack of GT, which creates an easy way for graphical text menus with mouse over (works in firefox, opera and ie).

bug: if you move the mouse to fast over the menu items the all get hovered.

installation:
- modify the two files (fully replace the functions, but not the files)
- create a style for the default text and name it "yourname"
- create a style for the hover text and name it "yourname_hover"
- use the {NAV_LIST_CURRENT:0:superordinated title:}

warning: this is a quick and dirty hack, i have to clean up the code by time. make a backup before.

i hope i haven't forgot something to include (terribly tired)

just try it out, it works fine for me. feedback please.

include\inc_front\front.func.inc

Code: Select all

function css_list_current_level($struct, $struct_path, $level, $parent_level_name="", $parent_level=1, $class="list_level", $link_to="index.php") {
	// returns list <div><ul><li></li></ul></div> of the current structure level
	// if $parent_level=1 the first list entry will be the parent level
	// $parent_level=0 - only the list of all levels in this structure
	// if $parent_leve_name != "" then it uses the given string
	// predefined class for this menu is "list_level"	
	
	if(!trim($class)) $class = "list_level";
	$parent_level_name = trim($parent_level_name);
	$level = intval($level);
	$parent_level = intval($parent_level);
	$activated = 0; //no active list set
	$css_list = "";
	
	//returns the complete level of NON hidden categories
	$level_struct = return_struct_level($struct, $level); 

	if(sizeof($level_struct)) {
		foreach($level_struct as $key => $value) {
			
			if(!$level_struct[$key]["acat_redirect"]) {
				$link = 'index.php?';
				if($level_struct[$key]["acat_alias"]) {
					$link .= html_specialchars($level_struct[$key]["acat_alias"]);
				} else {
					$link .= 'id='.$key.',0,0,1,0,0';
				}
				$redirect['target'] = '';
			} else {
				$redirect = get_redirect_link($level_struct[$key]["acat_redirect"], ' ', '');
				$link = $redirect['link'];
			}
			$css_list .= '    <li><a href="'.$link.'"'.$redirect['target'].'>{GT:menu}';
			$css_list .= html_specialchars($level_struct[$key]["acat_name"])."{/GT}</a>";
			$css_list .= "</li>\n";

		}
	}
include\inc_module\mod_graphical_text\inc_front\gt.func.inc.php

Code: Select all

function create_picture ($cachefile, $font, $text, $antialiasing, $size, $fgcolor, $fgtransparency, $bgcolor, $bgtransparency, $line_width, $format)
{
	// Creates a picture in the cache folder
	
	//global $phpwcms;
	
	// echo $font.":".$text.":".$antialiasing.":".$size.":".$fgcolor.":".$fgtransparency.":".$bgcolor.":".$bgtransparency.":".$format."<br />";
		
	$fgcolor		= hex2dec($fgcolor);
	$bgcolor		= hex2dec($bgcolor);
	
	//$text = html_entity_decode($text);
		
	// Font properties
	$fontfile = PHPWCMS_ROOT.'/include/inc_module/mod_graphical_text/inc_fonts/'.$font;
	$bbox = imagettfbbox($size, 0, $fontfile, $text);
	$font_left=($bbox[0]>$bbox[6])?$bbox[6]:$bbox[0];
	$font_right=($bbox[2]>$bbox[4])?$bbox[2]:$bbox[4];
	
	// Check height with letters like 'pbl' etc. to center the text correctly
	$bbox = imagettfbbox($size, 0, $fontfile, "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890!\"ยง$%&/()=?");
	$font_top=($bbox[1]>$bbox[7])?$bbox[7]:$bbox[1];
	$font_bottom=($bbox[3]>$bbox[5])?$bbox[3]:$bbox[5];
	
	$font_width=$font_right-$font_left;
	$font_height=$font_bottom-$font_top;
		
	$im = imagecreate ($font_width + 5, $font_height + 5);
	
	if (intval($bgtransparency) == 1 && $format != "jpg")
		$background = imagecolorallocatealpha($im, $bgcolor[r], $bgcolor[g], $bgcolor[b], 127);
	else	
		$background = imagecolorallocate($im, $bgcolor[r], $bgcolor[g], $bgcolor[b]);
		
	if (intval($fgtransparency) == 1 && $format != "jpg")
		$color = imagecolorallocatealpha($im, $fgcolor[r], $fgcolor[g], $fgcolor[b], 127);
	else
		$color = imagecolorallocate($im, $fgcolor[r], $fgcolor[g], $fgcolor[b]);
	
		
	// Check antialiasing
	if (intval($antialiasing) == 0) $color = "-".$color;
	
	
	$im_width = imagesx($im);
	$im_height = imagesy($im);
	
	$font_start_x = ($im_width - $font_width)/2; 
	$font_start_y = (($im_height - $font_weight)/2) + ($size/2);
	


	imagettftext($im, $size, 0, $font_start_x, $font_start_y, $color, $fontfile, $text);
	
	// Create underline
	for ($i = 0;$i < $line_width; $i++)
	{
		imageline ($im, $font_start_x, $font_height+$i, $font_start_x+$font_width, $font_height+$i, $color);
	}
	
	// Create cached image
	switch ($format)
	{
		case "jpg":
			imagejpeg($im, $cachefile, 100);
			break;
			
		case "gif":
			imagegif($im, $cachefile, 100);
			break;
		
		case "png":
			imagepng($im, $cachefile, 100);
			break;
	}

	
	imagedestroy($im);
	//csx return array($im_width,$im_height,$cachefile);
}

function show_picture ($font, $text, $antialiasing, $size, $fgcolor, $fgtransparency, $bgcolor, $bgtransparency, $line_width, $format, $style_name) 
{
	// This function checks if the image with the above parameters has already been created and cached
	// If so, it creates a direct image link to the cached file (this should solve sooner problems with
	// some older browsers
	
	$md5 = md5($font.$text.$antialiasing.$size.$fgcolor.$fgtransparency.$bgcolor.$bgtransparency.$line_width.$format);
	$cachefile = CACHE_PREFIX . $md5 . "." . $format;	
	
	if(!file_exists($cachefile)) 
	{
		// Call the fontizer-script to generate the image. This will happen only one time
		create_picture ($cachefile, $font, $text, $antialiasing, $size, $fgcolor, $fgtransparency, $bgcolor, $bgtransparency, $line_width, $format);
	}
	
	//$displayfile = DISPLAY_PREFIX . md5($font.$text.$antialiasing.$size.$fgcolor.$fgtransparency.$bgcolor.$bgtransparency.$line_width.$format).".".$format;
	$displayfile = DISPLAY_PREFIX . $md5 . "." .$format;
	//$classdata = 'img_'.str_replace(array('"', ' '), array('', '_'), $style_name);
	
	list($width, $height, $type, $attr) = getimagesize($displayfile);

	//return '<img onmouseover="this.nextSibling.style.display=\'none\';" style="" width="'.$width.'" height="'.$height.'" class="'.$classdata.'" src="'.$displayfile.'" alt="'.htmlentities($text).'" border="0" />';
	return $displayfile;
	
	//return '<img class="img_'.str_replace(array('"', ' '), array('', '_'), $style_name).'" src="'.$displayfile.'" alt="'.htmlentities($text).'" border="0" />';
}

function get_gt_by_style ($gt, $style_name, $text)
{
	// This functions get the image per style {GT:style}Text{/GT}
	$style_name = "\"$style_name\"";
	$style_name_hover='"'.str_replace(array('"'), array(''), $style_name).'_hover'.'"';
	
	$style = $gt["styles_name"][$style_name];
	$style_hover = $gt["styles_name"][$style_name_hover];
	
	if (!empty($style))
	{	
		$font			= $gt["fonts_id"][$style["font"]]["filename"];
		$antialiasing	= $style["antialiasing"];
		$size			= $style["size"];
		$fgcolor		= $gt["colors_id"][$style["fgcolor"]]["value"];
		$fgtransparency	= $style["fgtransparency"];
		$bgcolor		= $gt["colors_id"][$style["bgcolor"]]["value"];
		$bgtransparency	= $style["bgtransparency"];
		$line_width		= $style["line_width"];
		$format			= $style["format"];
		$text			= stripslashes(html_entity_decode($text));
		$img = show_picture($font, $text, $antialiasing, $size, $fgcolor, $fgtransparency, $bgcolor, $bgtransparency, $line_width, $format, $style_name);
		list($width, $height, $type, $attr) = getimagesize($img);
		
		if (!empty($style_hover))
		{
			$font_hover			= $gt["fonts_id"][$style_hover["font"]]["filename"];
			$antialiasing_hover	= $style_hover["antialiasing"];
			$size_hover			= $style_hover["size"];
			$fgcolor_hover		= $gt["colors_id"][$style_hover["fgcolor"]]["value"];
			$fgtransparency_hover	= $style_hover["fgtransparency"];
			$bgcolor_hover		= $gt["colors_id"][$style_hover["bgcolor"]]["value"];
			$bgtransparency_hover	= $style_hover["bgtransparency"];
			$line_width_hover		= $style_hover["line_width"];
			$format_hover			= $style_hover["format"];
			$text_hover			= stripslashes(html_entity_decode($text));
			$img_hover = show_picture($font_hover, $text_hover, $antialiasing_hover, $size_hover, $fgcolor_hover, $fgtransparency_hover, $bgcolor_hover, $bgtransparency_hover, $line_width_hover, $format_hover, $style_name_hover);
			list($hover_width, $hover_height, $hover_type, $hover_attr) = getimagesize($img_hover);
		}
		$html_img='';
		$html_img_hover='';
		$html_alt='alt="'.htmlentities($text).'"';
		$html_js='onmouseover="this.nextSibling.style.display=\'inline\';this.style.display=\'none\';"'; 
		//onmouseout="this.style.display=\'inline\';this.nextSibling.style.display=\'none\';"';
		$html_js_hover='onmouseout="this.previousSibling.style.display=\'inline\';this.style.display=\'none\';"'; 
		//onmouseover="this.previousSibling.style.display=\'inline\';this.style.display=\'none\';"';
		//"onmouseout="this.prevSibling.style.display=\'none\';this.style.display=\'inline;\'"';
		$html_css='style=""';
		$html_css_hover='style="display:none;"';
		//$html_class='class="'.$classdata.'"';
		//$html_class_hover='class="'.$classdata.'"';
		$html_dim='width="'.$width.'" height="'.$height.'"';
		$html_dim_hover='width="'.$hover_width.'" height="'.$hover_height.'"';

		$html_img='<img '.$html_js.' src="'.$img.'" border="0">';
		if (!empty($style_hover))
		{
			$html_img_hover='<img '.$html_js_hover.' '.$html_css_hover.' src="'.$img_hover.'" border="0">';
		}
		$result=$html_img.$html_img_hover;
		
	}
	else
		$result = $text;
		
	return $result;
}

Posted: Fri 12. Aug 2005, 16:03
by SNap
is there a demo of it around?

Posted: Sat 13. Aug 2005, 15:27
by consistency
very strange, i am sure that i have posted the following link allready:
http://members.csx.dnsalias.org/lab1/

Posted: Sat 13. Aug 2005, 16:19
by SNap
how can i use it with {NAV_TABLE_COLUMN} ?

Posted: Mon 15. Aug 2005, 05:00
by rtilghman
So this is very, VERY cool man... well done. I had been looking for something just like this recently, and I'm very impressed by the result.

The only question I have is whether its possible to incorporate a "scope" variable into the script to control which levels get images generated for them and which stay text.

Case in point, I have a DHTML menu on my site that is essentially a nav_list styled with CSS. The first level is always shown, and teh fly-outs show on hover. What I would like to do is have the ability to make the first level imgs with mouseover states like your script, but still have the second and deeper levels inside the menus use text.

Is it possible to incorporate something like this into your script? I figured I'd just ask since it seemed like it would be faster than trying to reverse engineer and figure out how to plug it in.

Again, nice work. Also, maybe it would be possible ande better to make this a "unique" menu and put together a formal "RT tag" for it that can just be added to "inc_script/frontend_render"...?

Best,
rt

Posted: Tue 16. Aug 2005, 16:30
by consistency
in the moment i just have a time problem. i am sure i will make an independent RT, but not right now. the whole thing is directly hacked in the cms in a, let me say, dirty way. i know i have to clean it up. i just wanted to share what i have until now. for a programmer it should be no problem to adapt it.
how can i use it with {NAV_TABLE_COLUMN} ?
i just added the "{GT:menu}" tags in the core function of "css_list_current_level", to use it with "nav_table_column" you have to modify the function of it like i modified the css_list_current_level. you can try to search the forum for "GT, menu" or something like that. i have seen a few threads about making a gfx menu. the only difference for the auto-mouse-over is that you need another gt style called "_hover".

@rtilghman
thank you :)
but as said before, sadly i have no time for coding in the moment, but it is not so difficult to create an own replacement tag. maybe you wanna play around.
as soon i have time i will start coding :)
All times are UTC+02:00
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited