Arriere plan = fct(résolution écran) [Résolu]

Signaler
Messages postés
23
Date d'inscription
lundi 11 août 2003
Statut
Membre
Dernière intervention
9 janvier 2008
-
Messages postés
1
Date d'inscription
dimanche 19 juillet 2009
Statut
Membre
Dernière intervention
12 août 2009
-
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

11 réponses

Messages postés
23
Date d'inscription
lundi 11 août 2003
Statut
Membre
Dernière intervention
9 janvier 2008

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

Fab
Messages postés
283
Date d'inscription
vendredi 6 août 2004
Statut
Membre
Dernière intervention
22 juin 2006

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
[mailto:the_little_smurf@yahoo.fr the_little_smurf@yahoo.fr]
Enjoy the life, don't waste your time in front of your computer
Messages postés
23
Date d'inscription
lundi 11 août 2003
Statut
Membre
Dernière intervention
9 janvier 2008

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 et :
<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"
Messages postés
283
Date d'inscription
vendredi 6 août 2004
Statut
Membre
Dernière intervention
22 juin 2006

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>

test

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


The SMURF
[mailto:the_little_smurf@yahoo.fr the_little_smurf@yahoo.fr]
Enjoy the life, don't waste your time in front of your computer
Messages postés
23
Date d'inscription
lundi 11 août 2003
Statut
Membre
Dernière intervention
9 janvier 2008

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>

test

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

Merci d'avance
Messages postés
283
Date d'inscription
vendredi 6 août 2004
Statut
Membre
Dernière intervention
22 juin 2006

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:

Dans notre cas on ne sait a priori pas quelle image on veut mettre en fond donc on crée un body "tout nu"
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
[mailto:the_little_smurf@yahoo.fr the_little_smurf@yahoo.fr]
Enjoy the life, don't waste your time in front of your computer
Messages postés
23
Date d'inscription
lundi 11 août 2003
Statut
Membre
Dernière intervention
9 janvier 2008

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

Fab
Messages postés
23
Date d'inscription
lundi 11 août 2003
Statut
Membre
Dernière intervention
9 janvier 2008

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>

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

Merci d'avance.

Fab
Messages postés
283
Date d'inscription
vendredi 6 août 2004
Statut
Membre
Dernière intervention
22 juin 2006

Dans le tag tu rajoutes ton image de fond par default:

Ca devrait fonctionner


The SMURF
[mailto:the_little_smurf@yahoo.fr the_little_smurf@yahoo.fr]
Enjoy the life, don't waste your time in front of your computer
Messages postés
4
Date d'inscription
vendredi 27 mai 2005
Statut
Membre
Dernière intervention
18 novembre 2005

bonjour j aimerai adapter ce script pour une image ( banniere) et non un fond .

Voici deja ce que j ai effectué mais cela ne marche pas, pour information je code sur php.

<script language="javascript" type="text/javascript">

<!--

function taille_ecran() {

var correctwidth=1024

if (screen.width>correctwidth){

mytaillecran = "templates/subSilver/images/test.jpg"

}

if (screen.width<correctwidth){

mytaillecran = "templates/subSilver/images/test800_600.jpg"

}

window.document.getElementsByTagName("body")[0].style.files = "url("+mytaillecran+")";

}

//-->

</SCRIPT>



ensuite je le fais apparaitre comme ceci





mais cela ne marche pas une aide d un pro me serait bien utile



merci d avance
Messages postés
1
Date d'inscription
dimanche 19 juillet 2009
Statut
Membre
Dernière intervention
12 août 2009

Bonjours à tous et à toutes,
Je sais que cela fait un peu "détérrage" mais suite à diverse recherche sur le sujet je me demandais si il n'existait tout simplement pas un script perettant un "resize" automatique en fonction de la résolution du visiteur (resolution en window.inner, plutot qu'en screen mais ici peut importe puisque qu'à mon avis, si il existe, ce code générerais le même resultat ou presque)