Creation de boutons icones animés

Voici un set de fonctions PHP permettant d'afficher simplement des boutons animés, calqués sur les barres de boutons de l'interface Windows, comme celui ci :

Ce bouton est crée par une seule ligne de code simple :

	<?
		buttonC( "javascript:alert( 'Impression du document' )", "printer", "Imprimer la page" );
	?>

Syntaxe

Syntaxe d'utilisation

buttonC( $url, $icon, $alt, $target )

• $url : url appellé par un clic sur le bouton
• $icon : racine commune du nom des icones (voir format des images ci-dessous )
• $alt : bulle d'aide affichée lors du passage de la souris sur le bouton . optionnel
• $target : frame de destination. optionnel, par defaut la fenetre courante

Format des images

Quelques remarques sur le format des deux images formant le bouton :

• Format: GIF - Définir un fond transparent si nécessaire.
• Dimensions: LxH : 23 x 22 pixels
• Leur nom doit respecter une syntaxe particulière. Utiliser comme racine un mot decrivant l'image.

  		b_[racine]1.gif pour le bouton au repos
  		b_[racine]2.gif pour le bouton en position haute
  

Code

Voici le code source de la fonction buttonC()

	function buttonC( $url, $icon, $alt="", $target= "" ) {
		global $imgcnt;
		$imgcnt ++;	// compteur des buttons
		$alt2= ereg_replace( "'", "\'", $alt);
		$img0= 'b_' . $icon . '1.gif';
		$img1= 'b_' . $icon .'1';
		$img2= 'b_' . $icon .'2';
		JSCode($img1, $img2 );
		$jscode= " onMouseOver=\"swap_img(document.img_$imgcnt, top.$img2, '$alt2');return true;\"  onMouseOut=\"swap_img(document.img_$imgcnt, top.$img1,'');return true;\" ";

		if( $target != '' )
			$target = " target=\"$target\" ";

		$res= "<a href=\"$url\" $target $jscode><img name=\"img_$imgcnt\" src=\"$BASEURL/img/$img0\" border=0 alt=\"$alt\" align=top></a>";
		echo $res;
	}

La fonction JSCode, générant le code javascript d'animation swap_img() ainsi que le preload des images.

	function JSCode( $img1, $img2 )
	{
		global $imgcnt;
		echo "<script language=\"javascript\">\n<!--\n";
		echo "$img1= new Image(23,22); $img1.src = '$img1.gif';
		echo "$img2= new Image(23,22); $img2.src = '$img2.gif';
		// si premier appel, affiche function JS
		if( $imgcnt == 1 ) {
	?>
	// swap deux images
	function swap_img( obj, img, helper ) {
		if( navigator.userAgent.lastIndexOf('Mozilla/4.') != -1 ) {
			obj.src= img.src;
			window.status= helper;
		}
	}
	<?
		}	// end if $imgcnt
		echo "// -->\n</script>\n";
	}

Variantes

On peut préférer créer un fichier de ressources Javascript (par exemple buttons.js) inclus en tete de page, contenant la fonction swap_img() , ainsi que les lignes de codes préchargeant les images. Dans ce cas, l'appel à fonction JSCode() est inutile.

Statut