Page 1 sur 3

Problème de transparence png sur une page web - ça rame :-

Publié : 28 nov. 2005, 20:03
par Cyrus_
Bonjour à tous,
J'ai réalisé des pages webs composées en grande partie de png transparent.
J'utilise pour celà le script suivant:

Code : Tout sélectionner

function correctPNG() // correctly handle PNG transparency in Win IE 5.5 or higher.   
{
   for(var i=0; i<document.images.length; i++)
      {
	  var img = document.images[i]
	  var imgName = img.src.toUpperCase()
	  if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
	     {
                    var siz="image";
if(img.src=="degrade.png" || img.src=="http://talbarts.info/degrade.png"){
                    siz= "image";
}
		 var imgID = (img.id) ? "id='" + img.id + "' " : ""
		 var imgClass = (img.className) ? "class='" + img.className + "' " : ""
		 var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
		 var imgStyle = "display:inline-block;" + img.style.cssText 
		 if (img.align == "left") imgStyle = "float:left;" + imgStyle
		 if (img.align == "right") imgStyle = "float:right;" + imgStyle
		 if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle		
		 var strNewHTML = "<span " + imgID + imgClass + imgTitle
		 + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
	     + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
		 + "(src=\'" + img.src + "\', sizingMethod='"+siz+"');\"></span>" 
		 img.outerHTML = strNewHTML
		 i = i-1
	     }
      }
      // Les arrières plan
   // is the browser competent with the DOM?
  if(document.getElementById) {
    // is the browser capable of managing runtimeStyle?
while(bk = document.getElementById("post")){

    if(bk.runtimeStyle) {
      // delete current background
      ar=bk.background;
      bk.style.backgroundImage = 'none';
      // apply PNG background with alpha transparency filtering
      bk.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" +ar+"',sizingMethod='scale')";
bk.id="png_ar_tr";
    } //if
} //while
 } //if
   }
window.attachEvent("onload", correctPNG);
</script>
et je rajoute dans la balise table du tableau souhaité: id=post.
Ceci a pour effet de rendre le fond du tableau en question transparent, si l'image de fond est un png intégrant le cannal alpha. Ce système est trés pratique car compatible avec Internet Explorer et surtout Firefox. Voici le problème: sous firefox, lorsque je met le script, le site rame incroyablement. Lorsque l'on fait défilé une page, le navigateur rame à mort (pour les pc peu puissant). Ce n'est pas le cas sous IE. Si vous voulez voir ce que donne ce massacre voici l'URL de mon site => http://www.talbarts.info. Notez que je n'ai pas ce problème lorsque je ne met pas ce script. Bref, quelqu'un aurai til une solution pour paré à ce problème handicapant ? :cry:

Publié : 28 nov. 2005, 20:05
par Invité
sous firefox 1.5 chez moi en tout cas ca rame pas :?

Publié : 28 nov. 2005, 20:18
par epsy
chez moi ça fait pas ramer fx(1.5rc2fr, winxp, ordi qui date de 5ans)

par contre: les tabeaux pour la mise en page c'est pas génial, c'est peut-être le mélange tableaux+ton script qui fait ramer fx

:arrow: + d'infos sur openweb : Les problèmes de la mise en page par tableaux

:arrow: question accessibilité : ton site n'est pas du tout accessible

PS: il faudrait déplacer ce topic dans le forum "developpement web"

Publié : 28 nov. 2005, 20:25
par Cyrus_
Pas accessible, c'est à dire ?

Publié : 28 nov. 2005, 21:08
par epsy
1)pas d'attribut alt sur les images
2)toujours le probleme des tableaux

:arrow: petit validateur d'accessibilité: http://validateur-accessibilite.apinc.org/index.php
(je me suis pour le moment fié à ma vue et à web developper)

Publié : 28 nov. 2005, 21:10
par Cyrus_
Oula j'ai du boulot :-/

Publié : 28 nov. 2005, 21:52
par myahoo
Et on voit que tu as dû utiliser un programme fait pour Internet Explorer, puisque tu le mets à 100% ...

Publié : 28 nov. 2005, 21:55
par Cyrus_
J'ai utilisé dreamwaver mais disons que queleques scripts ne fonctionnent que sous IE, honte à moi :o

Publié : 28 nov. 2005, 22:02
par calimo
Si tu veux mon avis, ce script ne devrait être appelé strictement que dans IE.

Donc au lieu de

Code : Tout sélectionner

window.attachEvent("onload", correctPNG); 
je verrais bien un truc comme

Code : Tout sélectionner

if (document.filters) {
window.attachEvent("onload", correctPNG); 
}
(aucune garantie que document.filters fonctionne dans IE, mais au moins ça devrait éviter son exécution ailleurs :roll:

PS : les "sexe gratuit" et autre je doute que ce soit optimisé pour les non voyants :roll: Et je ne parle même pas du "optimisé" qui en soit est une aberration :?

Publié : 28 nov. 2005, 22:24
par Cyrus_
Ok je vais tester ton code.

Note que le site n'est pas fini et que je suis conscient qu'il est loin d'être parfait et bien optimisé.

"Sexes gratuits" ôÔ Comprend pas il n'y a aucune pub de ce genre sur mon site (sauf si tu parles de la bannière en haut mais je n'ai jamais vu ce genre de chose, et je n'ai aucun controle sur ceci).

Publié : 28 nov. 2005, 23:40
par Mori
[Moderation]
que vois-je, que vois-je ? beaucoup de lignes, que je ne comprends pas... ne serait-ce donc pas un site en construction ? mais que si... zou, je déplace dans la bonne section.

Publié : 29 nov. 2005, 08:12
par calimo
Cyrus_ a écrit :"Sexes gratuits" ôÔ Comprend pas il n'y a aucune pub de ce genre sur mon site
Alors c'est que tu as mal regardé :roll:
Cyrus_ a écrit :(sauf si tu parles de la bannière en haut mais je n'ai jamais vu ce genre de chose, et je n'ai aucun controle sur ceci).
Non, je parle de la balise <noscript> en bas de la page. Ayant JS désactivé, les casinos, sonneries et autres m'ont évidemment sauté aux yeux. :wink: Et puis il me semble qu'il faut vraiment mettre des oeillières pour ne pas les voir :lol:

PS : tu devrais vraiment tester ton site avec le javascript désactivé pour voir à quel point il est amusant :lol:

Publié : 29 nov. 2005, 19:54
par epsy
t'en fais trop!

l'ASCart dans le code source
les musiques de fond
le changement du titre(ça fait bouger ma barre d'onglets qui doit etre infinimment longue)
le frame set ne sert à rien

+une erreur dans ton code
->
<META NAME "author" content="Franck TALBART">
<META NAME="description" content="S
enfin il y a deux "shortcut icons"(ie ne supporte pas le deuxieme mais fx supporte comme ie le premier)

Cyrus_

Publié : 29 nov. 2005, 20:20
par Invité
Alors déja j'ai beau écarquillé les yeux je ne vois pas la moindre pub... et je n'ai aucune protection pour empécher leur affichage :shock:

Note que pour la musique, tu peux l'arréter. Effectivement je vais probablement viré l'animation dans le titre qui ne rajoute rien.
Quand à la frame, si elle sert, même si elle est invisible (entre autre elle permet de faire en sorte que la musique ne s'arrête pas lorsqu'on passe d'une page a une autre.
Sinon, qu'est ce que l'ascart ?

Re: Cyrus_

Publié : 29 nov. 2005, 21:28
par calimo
Anonymous a écrit :Alors déja j'ai beau écarquillé les yeux je ne vois pas la moindre pub... et je n'ai aucune protection pour empécher leur affichage :shock:
Tu as regardé le code source ? En bas, dans un "<noscript>" juste en-dessous de "référencement". Ouvre les yeux (et le code source) :wink: