background adapté en fonction de la résolution visiteur

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
cobayous.com
Arias
Messages : 4
Inscription : 14 déc. 2005, 14:06

background adapté en fonction de la résolution visiteur

Message par cobayous.com »

Bonjour

Je suis nouvelle sur ce forum et, j'ai une petite question.
Je fais une galerie photos pour mon site pour Noël et, il y a une image de fond. L'image est en no-repeat et sans défilement.
Le hic, c'est qu'en fonction de la résolution d'écran du visiteur, l'image d'arrière plan ne s'adapte pas.
J'ai trouvé deux scripts qui fonctionnent sous IE et Opera mais, ils ne fonctionnent pas sous Firefox.

Voici ma question : est-il possible de rendre l'un des deux compatible pour Firefox (sachant que je ne connais rien en javascript)

Voici les deux codes :

Code : Tout sélectionner

<!-- DEBUT DU SCRIPT RESOLUTION FOND D'ECRAN -->
<!--Script par Tidus sur le forum de http://www.toulouse-renaissance.net/c_outils/-->
<script LANGUAGE='JavaScript'> 
// Debut 800*600 
if (screen.width <= 800) { 
fichier = '800.css' ; 
} 
// Fin 800*600 

// Debut 1024*768 
else if (screen.width <= 1024) { 
fichier = '1024.css'; 
} 
// Fin 1024*768 

// Debut plus 1024 
if (screen.width > 1024) { 
fichier = 'plus1024.css'; 
} 
// Fin plus 1024 
document.write('<LINK HREF="'+ fichier + '" REL="stylesheet" TYPE="text/css">'); 
//--> 
</SCRIPT> 

<!-- FIN DU SCRIPT RESOLUTION FOND D'ECRAN -->

Code : Tout sélectionner

<script language="JavaScript1.2" type="text/javascript">
if (screen.width==800||screen.height==600)
document.write('<body background="bg3.jpg">');

else if (screen.width==1024||screen.height==768)
document.write('<body background="bg2.jpg">');

else if (screen.width==1280||screen.height==1024)
document.write('<body background="bg1.jpg">');

else if (screen.width==1600||screen.height==1200)
document.write('<img src="lien vers image 1600x1200">');

else
document.write('<img src="lien vers autre image">'); 
</script>
Donc, le premier charge la feuille de style adaptée à la résolution de l'écran, le deuxième charge directement le bon background.

Je vous remercie d'avance.
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

  1. Adapter la CSS en fonction de la résolution n'est définitivement pas une bonne idée. Adapter l'arrière-plan pourquoi pas, mais définitivement pas le reste de la CSS :wink:
  2. Plutôt que screen.width et screen.height tu devrais tester screen.availHeight et screen.availWidth je crois :wink:
  3. Est-ce qu'on peut voir une page qui ne marche pas ? Est-ce qu'il y a des erreurs dans la console javascript ?
:wink:
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité