Inserer une image selon la résolution de l'écran

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)

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.

Salut,
Je viens de trouver.

<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.

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)

Salut Raphael,
Merci pour ta réponse mais je ne suis pas assez calé en JS pour comprendre ce code.
Je comprends l'intérêt par contre.
Modifié par David-Dante (05 Feb 2012 - 17:18)