28172 sujets

CSS et mise en forme, CSS3

Le tutoriel sur l'arrière-plan extensible est juste La solution que je cherchais.
Le problème est que le jquery s'applique sur toutes les images. Smiley mur

Ma question est, je peux faire en sorte que le script ne s'applique qu'à une seule image via une id ou un class appliquée à cette image?

Voici le code (repris sur ce site):

$(document).ready(function(){  
  
/* background resizable */     
function redimensionnement(){  
  
    var image_width = $('img').width();  
    var image_height = $('img').height();      
      
    var over = image_width / image_height;  
    var under = image_height / image_width;  
      
    var body_width = $(window).width();  
    var body_height = $(window).height();  
      
    if (body_width / body_height >= over) {  
      $('img').css({  
        'width': body_width + 'px',  
        'height': Math.ceil(under * body_width) + 'px',  
        'left': '0px',  
        'top': Math.abs((under * body_width) - body_height) / -2 + 'px'  
      });  
    }   
      
    else {  
      $('img').css({  
        'width': Math.ceil(over * body_height) + 'px',  
        'height': body_height + 'px',  
        'top': '0px',  
        'left': Math.abs((over * body_height) - body_width) / -2 + 'px'  
      });  
    }  
}  
          
    redimensionnement(); //onload  
      
    $(window).resize(function(){  
        redimensionnement();  
    });  
  
});  




et le CSS:



img#fond {
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
}


Merci d'avance de toute aide.
Modifié par jmlapam (02 Sep 2011 - 21:53)
Peut être lire quelques tutos sur les sélecteurs CSS... je dis ça je dis rien mais :

img -> toutes les balises HTML "img"
.foo -> toutes les classes nommées "foo"
#bar -> l'unique identifiant nommés "bar" -> c'est ce que tu veux...
Modifié par jb_gfx (02 Sep 2011 - 21:57)
Ah d'accord, merci à toi, je vais lire un peu...
C'est parce que dans le tuto, il est précisé que la méthode jquery marche certes partout mais
a écrit :
Peu flexible : en cas de changement de structure html, il faudra réadapter le script
.

Je comprends mal cette notion d'ailleurs... Smiley confus