begin process at 2012 05 29 03:12:46
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Archive Javascript

 > 

Archives

 > 

Débutants

 > 

Arriere plan = fct(résolution écran)

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Arriere plan = fct(résolution écran)

mardi 28 juin 2005 à 15:52:38 | Arriere plan = fct(résolution écran)

Fab117

Salut,
Existe-il un script qui scanne la résolution de l'écran de l'internaute est choisi l'image d'arrière plan ("arriere-plan 800 x 600.jpg"; "arriere-plan 1024 x 768.jpg"; ...) en fonction ?
Si oui, que se passe-t-il si pour une résolution "exotique", il n'y a pas d'arrière plan prévu ?
Merci d'avance.

Fab
mardi 28 juin 2005 à 16:14:29 | Re : Arriere plan = fct(résolution écran)

the_smurf
Pour détecter la résolution de l'écran tu as les attributs js:
screen.width et screen.height

Tu peux même detecter la surface utile de l'écran (sans la barre de navigation,...)
screen.availWidth et screen.availHeight.

En fonction de ces résultats tu peux utiliser une image d'arrière plan adaptée.

Quand la résolution de l'écran est plus grande que celle de l'image, cette dernière va être répéter... Tu peux l'empêcher en utilisant background-repeat:no-repeat.
Si la résolution de l'écran est plus petite que celle de l'image, cette dernière va être rognée.


The SMURF
the_little_smurf@yahoo.fr
Enjoy the life, don't waste your time in front of your computer
mardi 28 juin 2005 à 16:39:15 | Re : Arriere plan = fct(résolution écran)

Fab117

Salut,
Merci pour tes conseils, mais étant débutant, c'est un peu flou.
J'ai trouvé un script qui détecte la résolution de l'écran (rt dans cet exemple l'affiche), mais sur cette base, comment puis-je le réorienter en fonction du résultat de la variable "Ecran"


Entre <HEAD> et </HEAD>
<SCRIPT LANGUAGE="JavaScript">
EcranHaut = screen.height;
EcranLarg = screen.width;
Ecran = EcranLarg + " x " + EcranHaut;
</SCRIPT>

Entre <BODY> et </BODY> :
<SCRIPT LANGUAGE="JavaScript">
document.write(Ecran);
</SCRIPT>


Est-il possible de faire quelque chose du genre :
If EcranLarg = 800 then background="arriere-plan 800 x 600.jpg"
mardi 28 juin 2005 à 16:59:55 | Re : Arriere plan = fct(résolution écran)

the_smurf
C'est exactement cela...

Ex:
<html>
<head>
  <script>
    function loadBackground(){
      hauteur = screen.height;
      largeur = screen.width;
      var myBackgroundImage = "backgroundDefault.jpg"
      if(hauteur==600 && largeur==800){
        myBackgroundImage = "background800x600.jpg"
      }
      if(hauteur==768 && largeur==1024){
        alert("test");
        myBackgroundImage = "background1024x768.jpg"
      }
      window.document.getElementsByTagName("body")[0].style.backgroundImage = "url("+myBackgroundImage+")";
    }
  </script>
</head>    
<body>
  test
</body>
<script>
  loadBackground();
</script>
</html>

The SMURF
the_little_smurf@yahoo.fr
Enjoy the life, don't waste your time in front of your computer
vendredi 1 juillet 2005 à 15:33:36 | Re : Arriere plan = fct(résolution écran)

Fab117

Resalut The_smurf,
Encore un point s'il te plait.
J'ai essayé ton script et il fonctionne parfaitement si la résolution de l'écran de l'internaute est de 800 x 600 ou de 1024 x 768. Mais dans les autres cas, il ne charge pas l'arrière plan.

J'ai donc essayé de le modifier en lui disant que si la variable hauteur était plus petite que 650 il devait choisir la petite image et que dans le cas contraire il devait choisir la grande. Mais ça ne marche pas, il choisit toujours la grande image.

De plus, pourrais-tu me dire à quoi sert la ligne "window.document.getElementsByTagName("body")[0].style.backgroundImage = "url("+myBackgroundImage+")";"

Voici ma version de ton script :

<html>
<head>
  <script>
    function loadBackground(){
      hauteur = screen.height;
      largeur = screen.width;
      var myBackgroundImage = "backgroundDefault.jpg"
      if(hauteur>>650){
        myBackgroundImage = "background800x600.jpg"
      }
      if(hauteur<<650){
        myBackgroundImage = "background1024x768.jpg"
      }
      window.document.getElementsByTagName("body")[0].style.backgroundImage = "url("+myBackgroundImage+")";
    }
  </script>
</head>    
<body>
  test
</body>
<script>
  loadBackground();
</script>
</html>

Merci d'avance
vendredi 1 juillet 2005 à 15:58:59 | Re : Arriere plan = fct(résolution écran)

the_smurf
1/ Oui le script que je t'ai écrit permettait uniquement de charger tel ou tel fond d'écran pour une résolution d'exactement 800x600 ou 1024x768.
Ce sont les tests des if.
C'est à toi d'adapter le script pour qu'il fasse exactement ce que tu désires.

2/ Comme tu l'as compris, pour choisir entre 2 images pour toutes les résolutions, il suffit de changer les conditions des if et utiliser > ou <.
Attention en javascript un seul > ou < et non 2 >> << comme je voie.
C'est la seule erreur de ton script...

3/ A quoi sert window.document.getElementsByTagName("body")[0].style.backgroundImage = "url("+myBackgroundImage+")";
Normalement pour mettre un background dans une page, dans le body on écrit:
<body style="background-image:url(uneImageDeFond.jpg)">
Dans notre cas on ne sait a priori pas quelle image on veut mettre en fond donc on crée un body "tout nu" <body>
Puis à la fin de la création de la page on appelle une fonction: loadBackground(); que l'on a écrit et qui:
  -1- détecte la définition de l'écran
  -2- choisi l'image à mettre en fond d'écran et stocke son url dans une variable
  -3- qui met cette image en fond d'écran, et c'est la la fonction de la ligne en question

Comment ça marche. En français cette ligne pourrait signifier
Prend la fenêtre courante (window), prend son contenu (document), cherche y le premier ([0]) tag nommé body (getElementsByTagName("body")), prend son attribut style (style), et prend son attribut backgroundImage...
De cette manière on accède au background-image que l'on aurait pu écrire sans script... puis on lui donne la valeur contenant l'url de notre image de fond d'écran.

The SMURF
the_little_smurf@yahoo.fr
Enjoy the life, don't waste your time in front of your computer
samedi 2 juillet 2005 à 09:11:36 | Re : Arriere plan = fct(résolution écran)

Fab117

Super, ça marche parfaitement.
Merci (aussi pour toutes les explications) et bon week-end.

Fab
mardi 5 juillet 2005 à 15:35:40 | Re : Arriere plan = fct(résolution écran)

Fab117

Salut The_smurf,
J'aurais encore une question à propos de ce script.
Avec Firefox, pas de problème, mais avec IE (XP service Pack 2), si je ne valide pas le message d'avertissement, il ne charge aucun fond.
Y-a-t-il possibilité de rajouter une ligne de code pour qu'il charge de toute façon une image par défaut ?
Voici le script :

<head>
<script>
    function loadBackground(){
      hauteur = screen.height;
      largeur = screen.width;
      var myBackgroundImage = "background1024x768.jpg"
      if(hauteur<650){
        myBackgroundImage = "background800x600.jpg"
      }
      if(hauteur>650){
        myBackgroundImage = "background1024x768.jpg"
      }
      window.document.getElementsByTagName("body")[0].style.backgroundImage = "url("+myBackgroundImage+")";
    }
  </script>
</head>

<body>
</body>

<script>
  loadBackground();
</script>
</html>


Merci d'avance.

Fab
mercredi 6 juillet 2005 à 09:26:07 | Re : Arriere plan = fct(résolution écran)

the_smurf
Dans le tag <body> tu rajoutes ton image de fond par default:
<body style="background-image:url(backgroundDefault.jpg)">

Ca devrait fonctionner



The SMURF
the_little_smurf@yahoo.fr
Enjoy the life, don't waste your time in front of your computer
mercredi 6 juillet 2005 à 18:20:52 | Re : Arriere plan = fct(résolution écran)

Fab117
Réponse acceptée !

Salut,
Comme d'habitude, ça fonctionne.
Merci

Fab

1 2

Cette discussion est classée dans : plan, écran, résolution, fct, arriere

Répondre à ce message

Sujets en rapport avec ce message

L'image d'arrière plan s'adadaptant à la résolution d'écran de l'internaute [ par Fab117 ] Bonjour,Je recherche un script qui adapterait la taille de l'image d'arrière plan en fonction de la résolution de l'écran de l'internaute.Quelqu'un au arriere plan [ par nico606 ] Slt, je ne me rapele plus comment faire pour qu'une image d'arriere plan qui ne couvre pas toute la page ne se mette pas en plusieur fois les une a cô Changer la Résolution automatiquement [ par massacr ] BonjourJe voudrais faire un script qui, lors du chargement de la page, détecte la résolution de l'écran. Si elle est mauvaise (800*600 par ex), il cha Détection de la résolution écran par défaut du poste client [ par simpleclic ] Bonjour à tous,Voilà, je suis vraiment très débutant en JS (mais meilleur en Html), donc je vous demande par avance indulgence et compréhension, et su Adapter l'affichage selon résolution écran [ par laubro ] Bonjour,Je fais des sites pour des hotels resto....et j'ai un client "difficile" images jamais assez grandes, police trop petite.........et je m'aperç Résolution d'écran [ par leila_serre ] Bonjour,Jeune débutante en matière de création de site, je viens d'en créer un mais seulement je ne suis pas trés fortes en javascript et donc, je sol Redirigé semlon la résolution d'écran [ par antho11 ] J'ai 2 pages une qui est adapter a une résolution (800*600) et l'autre pour la résolution 1024*768 Alors si par exemple on arrive sur la page qui est Redirigé selon la résolution d'écran [ par antho11 ] J'ai 2 pages une qui est adapter a une résolution (800*600) et l'autre pour la résolution 1024*768 Alors si par exemple on arrive sur la page qui est arriere plan de mon site : help [ par fairylullaby ] Salut je voudrais mettre une image en arrière plan sur pratiquement toutes les pages de mon site Comment faire pour que celel ci soit non mltipliée Résolution écran [ par piep14 ] Bonjour, j'ai une barre flash que je souhaite afficher a différent endroit selon la taille de l'écran de l'utilisateur. J'ai essayé de faire comme


Nos sponsors


Sondage...

Comparez les prix


Samsung Galaxy Tab (GT-P1000) Tablet PC
Entre 699€ et 699€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Frau auf Feld mit KopfsalatPhoto Underwater
Photo Underwater surface 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,577 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)