Javascript image prob !
luis
-
PhP Messages postés 1774 Statut Membre -
PhP Messages postés 1774 Statut Membre -
Voilà, j'ai un petit prob !
je voudrais définir deux images, qui
une serais un ok et l'autre un no !
dans ma page je voudrais faire des detections multiples navigator.userAgent etc..
et je voudrais intervertir les images selon le résultat de mon test si oui image ok si non image no !
bref qui peut m'aider please !
je voudrais définir deux images, qui
une serais un ok et l'autre un no !
dans ma page je voudrais faire des detections multiples navigator.userAgent etc..
et je voudrais intervertir les images selon le résultat de mon test si oui image ok si non image no !
bref qui peut m'aider please !
A voir également:
- Javascript image prob !
- Image iso - Guide
- Reduire taille image - Guide
- Légende image word - Guide
- Acronis true image gratuit - Télécharger - Sauvegarde
- Chercher image - Guide
1 réponse
Salut Luis
Pour la détection du navigateur :
Voici le code JavaScript orienté objet que j'utilise : je déclare une instance de l'objet Browser : c'est lui qui fait tout le travail ...
Le plus compliqué ce sont peut être les modèles utilisés dans les expressions régulières (pour cà je te renvoie à la doc JavaScript).
Il est inutile de déclarer plus d'une instance de cet objet !
Pour le changement d'image en fonction du navigateur c+ simple : après le chargement de la page (tu peux aussi insèrer du code JS pendant le chargement donc directement ds la balise body mais Netscape n'apprecie pas toujours !) j'appelle la fonction test() via
l'événement onload dans la balise body.
La fct test() se sert des propriétés de l'instance browser pour modifier la valeur de la propriété .src de l'image "nav".
Le code :
<html>
<head>
<script language="JavaScript">
<!--
// Petit objet qui va tester le type de navigateur et stocker les résultats dans ses
// propriétés
function Browser()
{
// Déclaration des propriétés
this.type="" // Type de navigateur : inconnu par défaut
this.major=0 // Nr de version majeure
this.minor=0 // Nr de version mineure
if (document.layers) // Teste pour Netscape <= 4.xx
{
// Cherche qlque chose comme "/4.7"
var re=/\/(\d+)[.](\d+)/i;
var out=re.exec(navigator.userAgent);
if (out)
{
this.major=out[1]
this.minor=out[2]
this.type="NS"
return
}
}
// Cherche qlque chose comme "Netscape6/6.0"
var re=/Netscape\d+\/(\d+)[.](\d+)/i;
var out=re.exec(navigator.userAgent);
if (out)
{
this.major=out[1]
this.minor=out[2]
this.type="NS"
return
}
// Cherche qlque chose comme "MSIE 5.0" ou "MSIE 4.0"
var re=/MSIE\s*(\d+)[.](\d+)/i;
var out=re.exec(navigator.userAgent);
if (out)
{
this.major=out[1]
this.minor=out[2]
this.type="IE"
return
}
}
// On déclare browser une instance de Browser (attention à la case !)
// brower contient maintenant nos infos sur le navigateur à savoir :
// browser.type, brower.major et browser.minor
var browser=new Browser()
// Test si la navigateur est IE et affiche l'image OK.JPG sinon affiche NO.JPG
function test()
{
// On test d'abord le type pour faire un 1er aiguillage grâce à notre nouvel objet browser
switch (browser.type)
{
case "IE" :
// Ici on pourrait affiner en testant brower.major pour faire la
// distinction entre IE4 et IE5 par ex
nav.src="ok.jpg"
break;
case "NS" :
document.nav.src="no.jpg"
break;
default : // Autres cas
nav.src="no.jpg"
break;
}
}
// -->
</script>
</head>
<body onload="test()">
<p><img name="nav" src="no.jpg"></p>
</body>
</html>
Et voilà
@+
Philippe
Pour la détection du navigateur :
Voici le code JavaScript orienté objet que j'utilise : je déclare une instance de l'objet Browser : c'est lui qui fait tout le travail ...
Le plus compliqué ce sont peut être les modèles utilisés dans les expressions régulières (pour cà je te renvoie à la doc JavaScript).
Il est inutile de déclarer plus d'une instance de cet objet !
Pour le changement d'image en fonction du navigateur c+ simple : après le chargement de la page (tu peux aussi insèrer du code JS pendant le chargement donc directement ds la balise body mais Netscape n'apprecie pas toujours !) j'appelle la fonction test() via
l'événement onload dans la balise body.
La fct test() se sert des propriétés de l'instance browser pour modifier la valeur de la propriété .src de l'image "nav".
Le code :
<html>
<head>
<script language="JavaScript">
<!--
// Petit objet qui va tester le type de navigateur et stocker les résultats dans ses
// propriétés
function Browser()
{
// Déclaration des propriétés
this.type="" // Type de navigateur : inconnu par défaut
this.major=0 // Nr de version majeure
this.minor=0 // Nr de version mineure
if (document.layers) // Teste pour Netscape <= 4.xx
{
// Cherche qlque chose comme "/4.7"
var re=/\/(\d+)[.](\d+)/i;
var out=re.exec(navigator.userAgent);
if (out)
{
this.major=out[1]
this.minor=out[2]
this.type="NS"
return
}
}
// Cherche qlque chose comme "Netscape6/6.0"
var re=/Netscape\d+\/(\d+)[.](\d+)/i;
var out=re.exec(navigator.userAgent);
if (out)
{
this.major=out[1]
this.minor=out[2]
this.type="NS"
return
}
// Cherche qlque chose comme "MSIE 5.0" ou "MSIE 4.0"
var re=/MSIE\s*(\d+)[.](\d+)/i;
var out=re.exec(navigator.userAgent);
if (out)
{
this.major=out[1]
this.minor=out[2]
this.type="IE"
return
}
}
// On déclare browser une instance de Browser (attention à la case !)
// brower contient maintenant nos infos sur le navigateur à savoir :
// browser.type, brower.major et browser.minor
var browser=new Browser()
// Test si la navigateur est IE et affiche l'image OK.JPG sinon affiche NO.JPG
function test()
{
// On test d'abord le type pour faire un 1er aiguillage grâce à notre nouvel objet browser
switch (browser.type)
{
case "IE" :
// Ici on pourrait affiner en testant brower.major pour faire la
// distinction entre IE4 et IE5 par ex
nav.src="ok.jpg"
break;
case "NS" :
document.nav.src="no.jpg"
break;
default : // Autres cas
nav.src="no.jpg"
break;
}
}
// -->
</script>
</head>
<body onload="test()">
<p><img name="nav" src="no.jpg"></p>
</body>
</html>
Et voilà
@+
Philippe
