Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Auteur
David-Dante
#
Citer
199 Posts
Salut,
suite de ce sujet
http://forum.alsacreations.com/topic-27-60085-1.html#lastofpage

J'ai réussi à trouver comment injecter du code. Maintenant, je voudrais ajouter une condition pour injecter l'image qui corresponds à la résolution.

En cherchant, j'ai essayé ce bout de code mais ça ne fonctionne pas. Ca ne charge que la première image quelque soit la résolution.

<div id="slogan">
                         <script type="text/javascript"> 
if (screen.width > 768){
    document.write("<h3><img src='img/header.png' alt='' /></h3>") ;    
        
}
else
{
  document.write("<h3><img src='img/header-mobile.png' alt='' /></h3>") ;
}
       </script>      
                           

                 </div>


Comment il faut faire pour donner les conditions s'il vous plait?
Modifié par David-Dante (03 Feb 2012 - 11:10)

^
Fahrenheit
#
Citer
107 Posts
Je crois (donc je peux me tromper) que ce script applique la condition au chargement de la page.
Je l'ai déjà utilisé pour mon portfolio et il fonctionne.

<script type="text/javascript">
	var EcranLarg = screen.width;
	if((EcranLarg < 1300)) {
	   document.write('<link href="css/style2.css" media="screen" rel="stylesheet" type="text/css" />') }
	else{
	   document.write('<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />') }
	</script>



Cela dit, je ne comprends pas pourquoi tu ne passes pas par des media queries.

http://www.naivencreatik.com 
^
David-Dante
#
Citer
199 Posts
Salut,
Je viens de trouver. biggrin


<div id="slogan">
        <script type="text/javascript">    
           var windowWidth = $(window).width(); 
                if (windowWidth > 800){
                     document.write("<h3><img src='img/header.png' alt=''/></h3>") ;    
                      }    

               else{
                   document.write("<h3><img src='img/header-mobile.png' alt=''/></h3>") ;    
                  }

       </script>      
</div>


Ce script est pour IE parce qu'il ne supporte pas la fonction "content" si il n'y a pas une pseudo-class qui suit. Et si je fais


#id nav:after {
content: url(chemin/img.png);
}

Là, l'image s'affiche mais ne se redimensionne pas. Je perds le coté responsive de mon design du coup.

Un jour pour trouver ce bout de code sinon, bonjour la productivité. Mais maintenant que je l'ai, ça ouvre pas mal de porte pour afficher une image adapté à la résolution et faire économiser de la bande passante.

Merci pour ta réponse en tout cas. cligne

^
Raphael
#
Citer
twitter.com/goetter
Administrateur
12067 Posts
Hello,

J'ai une solution un peu plus "universelle" si tu as plusieurs images à traiter (ce qui est souvent le cas) :

Si la largeur d'écran est supérieure à 640 pixels on change le chemin des images jpg de classe « kiwi » de « _... » vers « _big »

Par exemple, "mon_image-small.jpg" devient "mon_image_big.jpg"


if(screen.width>640) {
   var img_list = document.getElementsByTagName('img');
   var i = 0;
   while (element = img_list[i++]) {
      if (element.className == 'kiwi') {
      var url = element.src;
      var posUrl = url.lastIndexOf('_');
      var preUrl = url.substring(0,(posUrl+1));
      var newUrl = preUrl+'big.jpg';
      element.src = newUrl;
     }
   }
}

Modifié par Raphael (04 Feb 2012 - 15:04)

Dès le matin, j'ai la tête dans le flux !

http://www.goetter.fr 
^
David-Dante
#
Citer
199 Posts
Salut Raphael,
Merci pour ta réponse mais je ne suis pas assez calé en JS pour comprendre ce code. confus
Je comprends l'intérêt par contre. smile
Modifié par David-Dante (05 Feb 2012 - 17:18)

^