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

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Cyrus_

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

Message 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:
Invité

Message par Invité »

sous firefox 1.5 chez moi en tout cas ca rame pas :?
epsy

Message 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"
Cyrus_

Message par Cyrus_ »

Pas accessible, c'est à dire ?
epsy

Message 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)
Cyrus_

Message par Cyrus_ »

Oula j'ai du boulot :-/
myahoo
Animal mythique
Messages : 8279
Inscription : 02 sept. 2005, 00:13

Message par myahoo »

Et on voit que tu as dû utiliser un programme fait pour Internet Explorer, puisque tu le mets à 100% ...
Cyrus_

Message par Cyrus_ »

J'ai utilisé dreamwaver mais disons que queleques scripts ne fonctionnent que sous IE, honte à moi :o
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message 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 :?
Cyrus_

Message 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).
Avatar de l’utilisateur
Mori
Animal mythique
Messages : 13311
Inscription : 30 avr. 2004, 19:17

Message 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.

Linux Salix OS 15.0 / Xfce 4.16

calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message 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:
epsy

Message 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)
Invité

Cyrus_

Message 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 ?
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Re: Cyrus_

Message 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:
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités