Author: renatoformato@virgilio.it
Date: Thu Aug 24 21:09:24 2006
New Revision: 4849
Log:
icone_horizontale return HTML code without tables, vertical centered in IE too with hover background, overlapping icons are built with image_masqueand are CSS backgrounds. Added a behavior to fix transparent png backgrounds on IE for mail toolbar buttons (to move in ecrire)
Added:
_plugins_/_ze_laboratoire_/spiip/win_back_png.htc
Modified:
_plugins_/_ze_laboratoire_/spiip/inc/presentation.php
_plugins_/_ze_laboratoire_/spiip/style_spiip_prive.html
Modified: _plugins_/_ze_laboratoire_/spiip/inc/presentation.php
--- _plugins_/_ze_laboratoire_/spiip/inc/presentation.php (original)
+++ _plugins_/_ze_laboratoire_/spiip/inc/presentation.php Thu Aug 24 21:09:24 2006
@@ -1961,15 +1961,18 @@
//if (!$fonction) $fonction = "rien.gif";
if ($spip_display != 1) {
- $retour .= "<a href='$lien' class='cellule-h' $javascript";
+ $retour .= "<a href='$lien' class='cellule-h h-icon' $javascript>";
+ $fond = _DIR_IMG_PACK.$fond;
if ($fonction){
- $retour .= "><table valign='center'><tr><td ".http_style_background($fond, "center center no-repeat");
- $retour .= ">".http_img_pack($fonction, "", "");
- }
- else {
- $retour .= "><table valign='center'><tr><td>".http_img_pack($fond, "", "");
- }
- $retour .= "</td><td>$texte</td></tr></table></a>\n";
+ include_spip('inc/filtres');
+ include_spip('inc/filtres_images');
+ $fond = extraire_attribut(png2gif(image_masque($fond,_DIR_IMG_PACK.$fonction,'mode=normal'),'gif'),'src');
+ }
+ $retour .= "<span class='h-icon-row'>";
+ //h-icon-cell-ie is necessary to vertical center in IE. A really nice way to center in IE.
+ //h-icon-cell-fond in necessary to display the animated gif background
+ $retour .= "<span class='h-icon-cell-ie'><span class='h-icon-cell-fond' style='background-image:url(\"$fond\")'></span></span>";
+ $retour .= "<span class='h-icon-cell'>$texte</span></span></a>";
}
else {
$retour .= "<a href='$lien' class='cellule-h-texte' $javascript><div>$texte</div></a>\n";
@@ -1984,6 +1987,35 @@
return $retour;
}
+function png2gif($im,$format) {
+ $image = image_valeurs_trans($im, "format-$format", $format);
+ if (!$image) return("");
+
+ $dest = $image["fichier_dest"];
+ $im = $image["fichier"];
+
+ $im = $image["fonction_imagecreatefrom"]($im);
+
+ $im_ = imagecreatetruecolor($image["largeur"],$image["hauteur"]);
+ imageantialias($im_,true);
+ $transp = imagecolorallocate ($im_,255,0,0);
+ imagefill($im_,0,0,$transp);
+ imagecolortransparent($im_,$transp);
+ imagecopy($im_,$im,0,0,0,0,$image["largeur"],$image["hauteur"]);
+ imagetruecolortopalette($im_, true, 256);
+
+ imagegif($im_, "$dest");
+ imagedestroy($im_);
+
+
+ $class = $image["class"];
+ if (strlen($class) > 1) $tags=" class='$class'";
+ $tags = "$tags alt='".$image["alt"]."'";
+ $style = $image["style"];
+
+ return "<img src='$dest'$tags />";
+
+}
function bandeau_barre_verticale(){
echo "<td class='separateur'></td>\n";
@@ -2259,7 +2291,7 @@
echo bandeau_gadgets($largeur, $options, $id_rubrique);
$GLOBALS['id_rubrique_gadgets'] = $id_rubrique; # un peu sale
- echo "</div>";
+ //echo "</div>";
echo "</div>";
//init bandeau_couleur
Modified: _plugins_/_ze_laboratoire_/spiip/style_spiip_prive.html
--- _plugins_/_ze_laboratoire_/spiip/style_spiip_prive.html (original)
+++ _plugins_/_ze_laboratoire_/spiip/style_spiip_prive.html Thu Aug 24 21:09:24 2006
@@ -166,7 +166,7 @@
.h-list li {display:table-cell;padding:0;margin:0}
* html .h-list li {display:inline}
-* html .h-list li .menu-item {float:[(#ENV{ltr}|choixsiegal{left,left,right})];margin:0 -2px;}
+* html .h-list li .menu-item {float:[(#ENV{ltr}|choixsiegal{left,left,right})];margin:0 -2px}
.h-list ul>li .menu-item {width:auto !important}
.vcentered li {vertical-align:middle}
@@ -201,7 +201,7 @@
display:block;
}
#bandeau-principal span.icon_fond span {
- behavior: url(../win_png.htc);
+ behavior: url(win_back_png.htc);
background:center top no-repeat;
height:48px;
display:block;
@@ -321,3 +321,32 @@
text-decoration: none;
color: #000;
}
+
+/*icone orizzontali centrate verticalmente*/
+a.h-icon {display:table;height:30px}
+* html a.h-icon {cursor:pointer}
+.h-icon-row {display:table-row;min-height:30px;}
+* html .h-icon-row {display:block;height:100%}
+.h-icon-cell {
+ display:table-cell;
+ vertical-align:middle;
+ min-height:30px;
+}
+* html .h-icon-cell {display:inline-block;padding-left:30px;}
+.h-icon-cell-ie {display:table-cell;vertical-align:middle;width:28px;height:28px;border: 1px solid transparent}
+* html .h-icon-cell-ie {display:inline-block;vertical-align:middle;height:100%;width:28px;margin-right:-28px}
+a.h-icon .h-icon-cell-fond {
+ background: 2px center no-repeat;
+ height:30px;width:30px;
+ display:block;
+}
+* html a.h-icon .h-icon-cell-fond {display:inline-block;margin-right:-30px;}
+a.h-icon:hover .h-icon-cell-ie {
+ background:url(#EVAL{_DIR_IMG_PACK}wrapper.php?file=fond-gris-anim.gif);
+ border: 1px solid ##ENV{couleur_foncee,edf3fe};
+ -moz-border-radius:5px;
+ /*width:28px;height:28px*/
+}
+
+/*fine icone orizzontali*/
+
Added: _plugins_/_ze_laboratoire_/spiip/win_back_png.htc
--- _plugins_/_ze_laboratoire_/spiip/win_back_png.htc (added)
+++ _plugins_/_ze_laboratoire_/spiip/win_back_png.htc Thu Aug 24 21:09:24 2006
@@ -0,0 +1,28 @@
+<public:component>
+<public:attach event="onpropertychange" onevent="propertyChanged()" />
+<script>
+
+var supported = /MSIE (5\.5)|[6789]/.test(navigator.userAgent) && navigator.platform == "Win32";
+
+if (supported) fnFixPng();
+
+function PropertyChanged() {
+ if (event.propertyName == "style.backgroundImage") {
+ if (!element.currentStyle.backgroundImage.match(/x\.gif/i)) {
+ var bg = element.currentStyle.backgroundImage;
+ var src = bg.substring(5,bg.length-2);
+ element.filters.item(0).src = src;
+ element.style.backgroundImage = "url(x.gif)";
+ }
+ }
+}
+
+function fnFixPng() {
+ var bg = element.currentStyle.backgroundImage;
+ var src = bg.substring(5,bg.length-2);
+ element.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='crop')";
+ element.style.backgroundImage = "url(x.gif)";
+}
+
+</script>
+</public:component>