11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Détection des images

Modérateur
Bonjour,

Il y a fort longtemps j'ai découvert un script bien intéressant. Aujourd'hui, j'ai l'intention de l'utiliser. Ce script permet de Personnaliser les checkbox et radiobuttons.

Je veux l'utiliser pour une interface dans un cas bien spécifique qui requiert le changement des checkbox par une image.

Un point négatif de ce script est que si dans l'agent utilisateur le javascript est activé mais l'affichage des images non, on se retrouve avec un formulaire inutilisable.

Y'a-t-il un moyen quelconque, en Javascript, de détecter si l'affichage des images est activé ? De cette façon, nous pourrions appliquer le script au formulaire selon cette condition.

Merci !
Modifié par Tony Monast (04 Oct 2006 - 16:38)
Salut,

pour IE ce code doit fonctionner :

<html>
<head>
<script language="javascript" type="text/javascript">
<!--
function testimg() { 
pds = parseInt(document.images[0].fileSize);
if (pds == -1 ) 
	{
	alert('images désactivées !'); 
	}
}
//-->
</script>
</head>
<body onload="testimg();">
<p><img name="img_test" src="http://forum.alsacreations.com/titre.gif" width="350" height="55" /> </p>
</body>
</html>

mais malheureusement je ne crois pas qu'il existe un équivalent de fileSize pour les autres navigateurs Smiley decu

@+
Modérateur
Merci beaucoup Heyoan. Je testerai demain au bureau et j'effectuerai mes recherches pour les autres navigateurs à partir de cette source.

Bonne soirée à toi ou bonne nuit si tu es de l'autre côté de l'océan. Smiley smile
Modérateur
bonsoir,

non, pas de filesize alternatif ,IE etant intimement lié a l'explorateur windows, c'est de la qu'il obtient l'information , pour les autres navigateurs , il faudrait ? , utiliser un programme externe .

Une autre solution consisterai a verifié la taille "réelles de l'image" , ce qui est possible en javascript si celui-ci est actif

voici un test que je viens de faire dernierement (je livre juste le code de base qui affiche le resultat , il suffit de sauter cette portion et de tester l'une des 2 valeur hauteur ou largeur):
function getNaturalsize(id,aff) {

//id est la balise image et aff est la balise recevant les infos a afficher
   var img = document.getElementById(id);// la balise a tester
//initialisation des variables , facultatif
   var haut="non testé";
   var larg="non testé";
   var texte="a remplir";

//recherche de la hauteur de l'image
        if( img.naturalHeight ) {
            haut= img.naturalHeight;
        } else {
            lgi = new Image();
            lgi.src = img.src;
            haut= lgi.height;
        }
// recherche de la largeur de l'image
   if( img.naturalWidth ) {
            larg= img.naturalWidth;
        } else {
            lgi = new Image();
            lgi.src = img.src;
            larg= lgi.width;
        }
/// les valeurs a tester sont maintenant la 
// on crée un span qui va recevoir les dimensions trouvées et les affichées
   // on recupere les valeurs avec texte explicatif.
   texte='Hauteur : --> '+haut+' pixels.  Largeur : --> '+larg+' pixels .';
//creatio du span
 var dimension = document.createElement("span");
// on crée le texte pour le span span
 var lesdimensions  = document.createTextNode(texte);
//on les integre
 dimension.appendChild(lesdimensions);
// on cible le "recepteur"
 var afficher = document.getElementById(aff);
// on affiche enfin !
 afficher.appendChild(dimension);
    }


les valeurs a tester sont dans les variables "haut et/ou larg , ou 0 indiquerait que les images ne sont pas chargées.

le html qui allait avec :
<p id="info">
<img src="votre_image.jpg.gif.png" alt="" id ='lavoir' height='190' width='190'   />
</p>
<p id="p_affiche" onclick="getNaturalsize('lavoir','p_affiche');">Dimensions de l'image(clic !)</p>


Reste a lancé la fonction avec window.onload et ciblé une ou plusieurs balise image pour tester leurs presences et proposé une alternative si besoin.
++
Bonjour Tony,
En vérifiant sur un de tes boutons :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>test présence image</title>
<script type="text/javascript">
function testImage(){
	imtest=document.getElementById('test')
	if(!imtest.complete // pour IE
	|| imtest.width != 45 // FF, Opera
	)alert('images désactivées')
	}
</script>
</head>
<body onload="testImage()">
<img id="test" alt="^" src="http://forum.alsacreations.com/skins/aqua/p_www.gif" />
</body>
</html>

ça marche sur IE FF et Opera, j'ai pas testé ailleurs
Salut à vous !

chmel a écrit :
ça marche sur IE FF et Opera, j'ai pas testé ailleurs

Je viens de tester sur Netscape (7) et ça fonctionne aussi. Chapeau bas Smiley jap

Tony Monast a écrit :
Merci beaucoup Heyoan. Je testerai demain au bureau et j'effectuerai mes recherches pour les autres navigateurs à partir de cette source.

Bonne soirée à toi ou bonne nuit si tu es de l'autre côté de l'océan. Smiley smile

Au plaisir ami canadien Smiley cligne .

@+
Modérateur
Bonjour,

gcyrillus, bien que ta fonction soit intéressante, j'ai bien l'impression qu'elle ne fonctionne pas tout à fait dans Internet Explorer. Lorsque je vais dans :

Outils > Options > Avancé > Afficher les images à non

Eh bien ton script détecte toujours la hauteur et la largeur de l'image. Je me trompe ?

chmel, ton script marche à merveille ! Bravo ! Je vais soumettre le lien du sujet à l'auteur du script de la personnalisation des checkbox et radiobutton, au cas où il voudrait intégrer la détection des images dans son script. Smiley clapclap

Merci à vous tous ! Smiley ravi
Modérateur
bonjour,

oui je viens de tester , d'abord je m'attendais a avoir la dimension de l'image representant la croix rouge avec l'image "manquante" , ce qui est effectivement le cas , ensuite en mettant l'image a non, sans redimensionnement et sans tramage , j'ai la drole de surprise de voir que l'espace correspondant a l'image est reservé mais vide et sans la croix rouge, puis le retour des valeur "haut" ,"larg" est parfois de zero ou des veritables dimensions , en changeant l'image (js/dom) ces valeurs ne sont pas rafraichies , alors qu'elle le sont bien quand l'affichage est autorisé.

Le test(avec cette methode) sur la taille de l'image réelles n'est donc pas fiable dans IE , si l'image est absente mais autorisée , on recupere la taille de l'image de "defaut(croix rouge)" , si les images ne sont pas autoriser a l'affichage , le resultat est aleatoire .

De plus mon test (de debutant ! ) est beaucoup plus "lourdeau" en code que celui de chmel ....

Ce topic est aussi pour moi tres interessant Smiley smile
++
Modifié par gcyrillus (04 Oct 2006 - 19:42)
Merci, n'en jetez plus Smiley ravi
C'est une histoire de fou : Smiley angry
en mode "images désactivées" : 3 navigateurs -> 3 comportements
- à la question : " l'image est elle chargée ? "(imtest.complete), seul IE6/win xp sp2 réponds non

Vous aurez remarqué que 45 est la largeur de l'image "www" utilisée ici.

- à la question : "Quelle est la largeur de l'image ? (imtest.width)
Firefox 1.5.0.7 réponds logiquement : 0;
IE donne : 45;
Opera 9.02, lui affiche :10, la largeur du texte alternatif.

Donc :
Changer "45" par la largeur de l'image test choisie et faire attention à ce que l'attribut alt ne soit pas aussi large. Smiley cligne Smiley angry Smiley angry Smiley angry Smiley angry
Modifié par chmel (08 Oct 2006 - 11:36)
Sujet clos
Aller à