Résolution d'écran

Pour le fond d'un site.

Sujet résolu

1 juin 2008 à 12:38:44

Salut tout le monde.

Voilà, j'ai un petit problème:
J'aimerai savoir s'il est possible que le fond d'un site se redimensionne selon la résolution de l'écran. Pas selon la taille de la fenêtre, mais selon la résolution de l'écran.
Merci de me répondre si vous avez une réponse à ce problème.
Je vais continuer à chercher sur google pour le moment.

Merci d'avance.

Idolon

3 juin 2008 à 12:58:05

Personne ne peut me répondre?

Idolon

5 juin 2008 à 18:19:17

J'attends toujours une réponse s'il vous plait.

Faust70

5 juin 2008 à 19:09:03

Salut

Je pense que tu peut solutionner ton probleme en suivant la demarche suivante:

-Analyse des dimensions du visiteur
-Conditions pour redimensionnez l'image selon sa résolution

Pour connaitre les dimensions il te suffit d'utiliser une commande en Javascript (je crois pas qu'il y en ai une en PHP)

screen.width pour la largeur
screen.height pour la hauteur

Je ne sais pas si tu connais un peu javascript, si non, je peut voir se que je peu y faire

Et ensuite pour redimensionner il y a une fonction avec PHP
Mais pas en Javascript (enfin je ne crois pas)

Donc hum c'est surement possible mais je ne sais pas comment mettre la valeur d'une variable Javascript dans une variable PHP :/

PS: En cherchant un peu sur google j'ia trouver ceci, tout bete mais efficace (jai pas tester)

"Et si la personne ne surf pas en plein ecran ??
Et si la personne a ajoute des barres de taches au nav (genre google bar), et si la personne a une sidebar ? "

Il suffit de mettre les atribut width="" et height="" avec une valeur en pourcentage
exemple : <img src="tonimage.gif" width="10%" height="10%" alt="image non chargé" title="image exmple">
ainsi l'image sera toujours proportionné à la page

Donc ben il suffit juste de mettre ça en JS et normalement c'est tout bon

Mais la qualité de l'image sera bof

Edit: J'ai trouver aussi ça, peut etre que ça t'aidera

http://www.asp-php.net/scripts/scripting/jsimgredim.php

Idolon

7 juin 2008 à 9:22:11

Merci, c'est sympa de ta part. Mais je ne connais pas une ligne de code en JS.

Donc je sens que je vais m'y mettre.
Par contre, mon problème c'est que je parle du fond. Donc je ne sais pas si on peut rajouter du JS dans du CSS. On peut? :euh:

Ton dernier lien m'a bien aidé, et maintenant il ne me reste plus qu'à trouver comment faire pour analyser les dimensions du visiteur... Quelqu'un pourrait m'aider?

Attonde

7 juin 2008 à 9:40:20

Rajouter du JS dans le css non. Ceci dit tu peux tout à fait modifier le css avec le javascript

.
http://www.siteduzero.com/tuto-3-2329- [...] vascript.html Enjoy !

Ma technique à moi c'est plutôt:
1-Trouver la dimension de la fenêtre
2-Afficher le fond (déjà redimensioné manuellement).

Rapide et simple

function fond(){
var largeur_ecran = screen.width;
var hauteur_ecran = screen.height;
if(largeur_ecran == 640 && hauteur_ecran == 480) {
  document.getElementsByTagName('body')[0].style.background = 'url(images/fonds/fond_640x480.jpg)';
}
else if(largeur_ecran == 1024 && hauteur_ecran == 768) {
  document.getElementsByTagName('body')[0].style.background = 'url(images/fonds/fond_1024x768.jpg)';
}
else if(largeur_ecran == 1280 && hauteur_ecran == 1024) {
  document.getElementsByTagName('body')[0].style.background = 'url(images/fonds/fond_1280x1024.jpg)';
}
else if(largeur_ecran == 1152 && hauteur_ecran == 864) {
  document.getElementsByTagName('body')[0].style.background = 'url(images/fonds/fond_1152x864.jpg)';
}
}

Bon bien sûr après on peut faire:

function fond(){
var largeur_ecran = screen.width;
var hauteur_ecran = screen.height;
  document.getElementsByTagName('body')[0].style.background = 'url(images/fonds/fond_'+largeur_ecran+'x'+hauteur_ecran+'.jpg)';
}

Pour ce qui es du html:

<!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">
   <head>
       <title>super site</title>
	   <link rel="stylesheet" media="screen" type="text/css" title="Style" href="style.css" />
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	   <script type="text/javascript" src="fonds.js"></script>
   </head>
<body onLoad="javascript:fond();">
<!-- code honteusement pompé sur un de mes sites xD -->

Idolon

10 juin 2008 à 20:41:52

Merci sincèrement. Ca m'aide vraiment. Bon ben merci à tout le monde.