11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] IE et jquery problème avec image extensible

Bonjour,

J'ai suivi les recommandations du site Alsacréation pour "Un arrière-plan extensible intelligent".

Cela marche très bien avec FF et Chrome et remercie par ailleurs Alsacréation pour le script.

Toutefois IE 8 m'affiche mon image au-dessus de mon site. Pourriez-vous me venir en aide s'il vous plaît. Merci par avance pour votre aide

J'ai fais comme suit sur ma page :

<html>
<head>
<img src="mana.jpg" class="superbg" />
  <script src="jquery.js" type="text/javascript"></script>
  <script src="script/background.js" type="text/javascript"></script>

<script>



function redimensionnement(){ 
 
    var $image = $('img.superbg');
    var image_width = $image.width(); 
    var image_height = $image.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) { 
      $image.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 { 
      $image.css({ 
        'width': Math.ceil(over * body_height) + 'px', 
        'height': body_height + 'px', 
        'top': '0px', 
        'left': Math.abs((over * body_height) - body_width) / -2 + 'px' 
      }); 
    } 
} 
      
$(document).ready(function(){

    // Au chargement initial   
    redimensionnement();
     
    // En cas de redimensionnement de la fenêtre
    $(window).resize(function(){ 
        redimensionnement(); 
    }); 
 
}); 

</script>



</head>
</html>
Bonjour,

Ne manquerait-il pas la partie CSS dans votre page ?

img.superbg {
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
}
Bonjour 6l20,

Merci de vous intéresser à mon problème.

J'ai bien mis dans ma page CSS

 img.superbg {
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
}


et je ne vois pas d'où vient le problème.
jquery.js et background.js ne sont pas dans le même dossier êtes-vous certain qu'ils sont bien appelés sur votre page ?

Peut-on avoir un lien vers cette page ?
Bonjour

En mettant le bakground.js dans le même dossier tout mon site est déformé que ce soit sur FF Chrome ou IE.

Pour voir cliquez ICI
Bonjour,

Le script bakground.js que vous avez mis en ligne ne correspond pas au code javascript que vous avez publié dans votre message :

Dans celui que vous avez mis en ligne, le traitement est effectué sur toutes les balises img. Donc le site est naturellement déformé. Alors que le code que vous avez publié dans votre premier message est correct puisqu'il pointe sur les balises img de classe superbg ($('img.superbg')).

Smiley smile
Bonjour Manhattan,

Merci de vous pencher sur mon problème.

J'ai apporté les modifications dans background.js comme vous me l'avez signalé. Pour FF et Chrome c'est redevenu normal. Mais pour IE j'ai toujours le même problème.
Merci Manhattan,

Mais ce n'est pas moi qui ai écrit image extensible jquery1. J'ai enlevé. Bien que IE m'affiche sans déformation suite à tes précieux conseils, mon image sensée être extensible s'affiche toujours avec IE en haut de ma page web.
Hmmm...

Le document n'est plus en mode quirks désormais.
Et ce qui m'étonne, c'est que le site passe bien chez moi sous ie9. Pour les anciennes versions, je n'ai que ieTester ou bien les options de dév de ie pour tester le site, et cela passe bien aussi.

Es-tu sur d'avoir bien vidé ton cache, et après un ctrl F5, pourrais-tu nous poster une image de ce que cela donne chez toi, parce que n'arrivant pas à reproduire l'erreur depuis que tu as nettoyé ton doctype, je ne sais pas...
Merci Mahnattan d'avoir pris un peu de votre temps. Grâce à vous et à Alsacréation tout est rentré dans l'ordre.

J'avais omis de vider mon cache

Mille mercis.
Sujet clos
Aller à