IMAGE DE FOND AJUSTÉE

illus

script : bgMax v1.1.1
langage : javascript
catégorie : module
usage : Un background-image toujours adaptĂ© aux mesures de la fenĂȘtre du visiteur, avec en prime une apparition en fondu.
tags : effets spéciaux - image

Concept

Une image de fond, quand elle est bien soignée, peut apporter à un site web un bel atout graphique. Hélas, avec la variété croissante des tailles d'écrans, on ne sait jamais dans quelles conditions le visiteur pourra profiter de notre belle image.

bgMax permet de pallier ce problème, et d'aller même un peu plus loin.

  • adaptation des mesures de l'image à celles de la fenêtre
  • plusieurs modes d'ajustement
  • apparition de l'image en fondu (optionnel)

Intégration

Pour commencer, il faut charger le script, en insérant le code suivant entre les balises <head> et </head> de la page :

<script src="bgMax.min.js" type="text/javascript"></script>

Ensuite, on déclenche l'éffet par un tout petit bout de javascript placé en fin de page, juste avant la balise </body> :

<script type=\"text/javascript\">
bgMax.init('dossier/mon-image.jpg');
</script>

Options

On peut également paramétrer plusieurs options, que l'on passera en second argument de la fonction, sous la forme d'un tableau associatif :

var options = { 
	option1 : valeur1,
	option2 : valeur2,
	optionN : valeurN
};
bgMax.init('dossier/mon-image.jpg', options);

Les options disponibles sont les suivantes :

option type description par défaut
mode String mode d'ajustement de l'image.
max : l'image occupe toute la largeur de la fenêtre, quite à déborder dans la hauteur.
full : l'image tient toute entière dans la fenêtre, en occupant autant de place que possible.
"max"
enlarge Boolean Autorise ou interdit l'agrandissement l'image au delà de ses dimensions réelles.
true
reduce Boolean Autorise ou interdit la réduction de l'image en dessous de ses dimensions réelles.
true
position String
positionnement css de l'image : "fixed" ou "absolute"
"absolute"
align String
alignement horizontal de l'image, par rapport à la largeur de la page :
"left", "center", ou "right".
"center"
vertAlign String
alignement vertical de l'image.
En position absolue, cet alignement se fait par rapport à la hauteur de la page. En position fixe, il est fonction de la hauteur de la fenĂȘtre.
Valeurs acceptées : "top", "bottom", ou"middle".
"top"
fadeAfter Mixed
permet de faire apparaître l'image en fondu.
false : pas d'effet de fondu.
Integer : l'image apparaîte en fondu, si son chargement s'est terminé après le délai exprimé par cette valeur (en millisecondes).
0 : l'image apparaît en fondu dans tous les cas.
1000
fadeOptions Object

options du fondu.
voir le script fade, présenté sur ce site.

{ duration: 1000, frameRate: 25 }
zIndex Integer

profondeur css de l'image

-1
ffHack String

Pour une fois, ce n'est pas Internet Explorer mais Firefox qui nous casse les pieds !
Dans les versions anciennes de ce navigateur (<3), il peut arriver que l'image ne soit pas bien calée en haut de la page. On pourra alors indiquer la mesure de ce décalage via cette option, afin que le script le compense.
Je n'ai pas trouvé de solution plus simple, désolé. Je suis preneur de toute idée meilleure.

"0px"

Démo et bac à sable

L'image de fond de cette page est gérée par bgMax. Redimentionnez la fenêtre de votre navigateur et vous constaterez que l'image s'adapte à sa largeur.
Vous pouvez également essayer différents paramétrage du script dans ce bac à sable.

Téléchargement

Vous trouverez dans ce zip une version minifiée du script (3,7Ko), et une autre commentée.

Notez que ce module embarque plusieurs fragments de code présentés sur ce site : fade, pour l'effet de fondu, transfer, qui facilite la gestion des options, et winDim, qui permet de connaître les mesures de la fenêtre.

compatibilité :
Internet Explorer (5.5+) Firefox Safari Opera Google Chrome
(autres navigateurs non testés)

Une module Joomla a également été développé pour faciliter l'intĂ©gration de bgMax sur cette plateforme. Ça se passe Par ici. Merci Lomart.

Commentaires

  • Publier un nouveau commentaire
  • gravatar
    Bonjour,
    Que faut il modifier dans le script pour que l'image ne s'adapte pas proportionnellement mais seulement en largeur?
    Merci
  • gravatar
    Salut.
    Le script est conçu justement pour conserver les proportions ! :)

    Cela dit, tu peux toujours modifier le code source, et Ă©vincer la fonction "redimArea". Si tu t'y connais un peu en javascript je pense que ça ne devrait pas ĂȘtre trop compliquĂ©.
  • gravatar
    Bonjour !

    Ton script est exactement ce que je cherche ça a l'air fabuleux, mais je n'arrive pas Ă  ouvrir le fichier une fois tĂ©lĂ©charger (pour ĂȘtre exact, le zip s'ouvre et me donne un fichier appelĂ© bgMax.download qui ne s'ouvre avec aucune application).

    Peux-tu m'aider ??

    Merci d'avance !
  • gravatar
    Salut Sylvie.
    "bgMax.download" est un dossier. En l'ouvrant, tu trouveras les fichiers javascript.
  • gravatar
    Sylvie Matthes  le 24 juillet 2010, à 19h16
    Oui j'ai bien compris ... mais chez moi il apparaĂźt sous forme d'un fichier !
  • gravatar
    Bon, j'ai contourné le problÚme.

    Pour ton information : le dossier n'est pas downloadable à partir d'un Mac (j'ai essayé Safari et Opéra). J'ai fini par allumer un vieux PC qui traßne encore chez moi (juste pour tester notre copain à tous IE) afin de sortir les deux fichiers et me les envoyer par mail.

    Ton script est super. A noter : avec les commandes que tu préconises dans cette page rien ne se passe ... il faut mettre "bgMax.init" comme commande dans le body. Et puis mis à part Opéra, les autres navigateurs (Safari, Firefox, Mozilla et Chrome) que j'ai testé sur mon Mac, mettent une barre de scroll horizontale en bas de la page. Sais-tu à quoi c'est dû, et est-ce-qu'on peut la supprimer ?

    En tout cas merci, et surtout ... bravo !
  • gravatar
    Merci pour l'aide! Ton script est vraiment sympa!
  • gravatar
    @Sylvie :
    Merci de tes remarques. J'ai corrigé l'erreur de "bgMax.init" dans la doc.
    Pour le reste, je m'en occuperai dĂšs que j'aurais un peu plus de temps.
  • gravatar
    Bonjour,

    Tout d'abord un grand merci pour ce tuto.
    J'aurais besoin d'aide car cela fait longtemps que j'ai codé.
    CI-aprÚs ce que j'ai codé. Ca ne fonctionne pas pourriez-vous m'aider SVP.

    Merci d'avance

    <HTML>
    <head> <script src="bgMax.min.js" type="text/javascript"></script> </head>
    <TITLE> Le titre</TITLE>
    <BODY>

    <h1><p>Texte 1</p></h1>

    <script type="text/javascript">
    bgMax.init('image.jpg'; var options = {     mode : "full",
                            position : "fixed",
                            enlarge : 0,
                            fadeAfter : 0
                        };
         );
    </script>
    </BODY>
    </HTML>




  • gravatar
    Comme ça ça devrait aller :
    bgMax.init('image.jpg', {
        mode : "full",
        position : "fixed",
        enlarge : 0,
        fadeAfter : 0
    });
  • gravatar
    Un grand merci pour ton aide "Abrab".

    C'est vraiment génial !
  • gravatar
    @Sylvie :
    Sous Mac : l'action "Afficher le contenu du paquet" du menu contextuel permet d'accéder aux fichiers

    @Abrab :
    Chouette script !
  • gravatar
    Hello!

    Ce script est vraiment chouette!

    Il serait encore plus génial s'il y avait possibilité:

    1) d'ajuster l'image en largeur ET hauteur de maniÚre à ce que l'image remplisse tout l'écran sans jamais voir le fond du body (le jaune pour la démo)

    2) de centrer verticalement l'image (ajouter "middle" en plus de "top" et "bottom" dans l'option vertAlign)

    Est-ce possible?
    :)
  • gravatar
    @Albert : Salut.
    Ajuster l'image dans les deux sens, je pensais que ça ne serait pas utile (parce que ça déforme l'image), mais comme tu n'es pas le premier à me le demander, j'ajouterai ça dans ma prochaine mise à jour.
    Je verrai aussi pour un centrage vertical. N'hĂ©sitez pas Ă  me dire si vous prĂ©fĂ©rez un centrage relatif Ă  la hauteur de la fenĂȘtre ou Ă  celle de la page.
  • gravatar
    Non... sans dĂ©former l'image... En fait, j'aurais dĂ» dire : ajuster en largeur OU en hauteur en fonction de la proportion de l'image et de la proportion de la fenĂȘtre. Un peu comme dans cet exemple:
    http://maxb.net/scripts/jbgallery/docs/background.html
    Encore bravo pour le travail!
  • gravatar
    bon, voila,j'avoue, je suis nul en programmation, Depuis la fin de la fac, l'eau a coulé sous les ponts. Donc 2 questions et ne vous moquez pas.

    Le script doit etre installé dans le meme repertoire que le fichier xhtml je suppose.

    Le code qui deja ne fonctionne pas, je sais pas pourquoi.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="fr-be">
    <head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
    <title>test</title>

    <script src="bgMax.min.js" type="text/javascript" />
    </head>
    <body><br />

    <script type="text/javascript">
    bgMax.init('C:\Documents and Settings\Admin\Bureau\Nouveau dossier\www.design-agencements\Images\test.jpg', {
    mode : "full",
    position : "fixed",
    enlarge : 0,
    fadeAfter : 0
    });
    </script>
    </body>
    </html>

    Et ma 2eme question, la plus difficile. Voila un exemple d'une de mes pages web :
    http://img228.imageshack.us/i/exempley.jpg/

    Ils'agit d'une previsualisation sous NVU, l'idee est non seulement d'ajuster l'mage de fond car j'ai un effet mosaique en fonction de l'affichage, mais aussi le menu, est ce possible ???

    Merci d'avance et quoiqu'il en soit bravo car l'exemple est bluffant.
  • gravatar
    @C.
    Pardon pour le retard dû aux vacances ! Mais t'as entiÚrement raison ! Je suis restée dans la liste des téléchargements sans penser à ouvrir le dossier dans le Finder ( j'essaie d'Úviter en général : une chatte y retrouverait pas ses petits, dans ce dossier !)

    Merci !
  • gravatar
    personne ne peut m'expliquer pourquoi mon truc ne marche pas, j'ai essaye aussi plein de choses dont

    <script type="text/javascript">
    bgMax.init('
    url(file:///C:/Users/admin/Desktop/Nouveau%20dossier/www.design-agencements/Images/image.jpg)', {
    mode : "full",
    position : "fixed",
    enlarge : 0,
    fadeAfter : 0
    });


    Et VRAIMENT RIEN NE MARCHE, Je ne comprends pas
  • gravatar
    Pour l'instant ca donne ca, et c'est pas tres beau

    http://img163.imageshack.us/img163/9089/exemplev.jpg
  • gravatar
    personne ne peut m'expliquer pourquoi mon truc ne marche pas, j'ai essaye aussi plein de choses dont

    <script type="text/javascript">
    bgMax.init('
    url(file:///C:/Users/admin/Desktop/Nouveau%20dossier/www.design-agencements/Images/image.jpg)', {
    mode : "full",
    position : "fixed",
    enlarge : 0,
    fadeAfter : 0
    });


    Et VRAIMENT RIEN NE MARCHE, Je ne comprends pas
  • gravatar
    personne ne peut m'expliquer pourquoi mon truc ne marche pas, j'ai essaye aussi plein de choses dont

    <script type="text/javascript">
    bgMax.init('
    url(file:///C:/Users/admin/Desktop/Nouveau%20dossier/www.design-agencements/Images/image.jpg)', {
    mode : "full",
    position : "fixed",
    enlarge : 0,
    fadeAfter : 0
    });


    Et VRAIMENT RIEN NE MARCHE, Je ne comprends pas
  • gravatar
    Je su%u0131s en Turquie pour le moment. Pas trop le temps de t'aider...
    So%u0131s patient...
  • gravatar
    Bonjour,
    MĂȘme en faisant un copier coller du script, et en ajoutant le lien de mon immage, j'ai simplement une page blanche avec de marquĂ© "Texte 1"
    GĂ©nial...

    <HTML>
    <head> <script src="bgMax.min.js" type="text/javascript"></script> </head>
    <TITLE> Le titre</TITLE>
    <BODY>

    <h1><p>Texte 1</p></h1>

    <script type="text/javascript">
    bgMax.init('D:\Docs\01 Important\Cyber\Logo_tampon2.jpg', {
    mode : "max",
    position : "fixed",
    enlarge : true,
    fadeAfter : 1000
    });
    </script>
    </BODY>
    </HTML>

    C'est pas tres clair tout sa....
  • gravatar
    @cedrique30 : Desole, j'ai pas trop le temps de faire du depannage en ce moment : je suis en plein demenagement a l'etranger.
    Mais je pense que l'url que tu as mise pour ton image peut etre la source du probleme. Essaye une url relative plutot qu'une url absolue sur ton disque dur.
  • gravatar
    @nicolas : pareil
  • gravatar
    Sympa, je vais essayer de l'utiliser sur mon site. Je te mettrais en crédit.
  • gravatar
    Bonjour,

    Comment faire quand on est sur mac et pas de PC sous la main pour télécharger le ZIP ?
    Ce script m'intéresse beaucoup et malheureusement je ne peux l'utiliser :(

    Merci :)
  • gravatar
    @luu

    Tu vas dans ton dossier de Téléchargements, tu cliques dessus en tenant la touche CTRL, et tu choisis "afficher le contenu du paquet".
  • gravatar
    Ca marche !!

    Merci beaucoup!!!! :))
  • gravatar
    Sympa comme script mais d'un autre coté ça oblige à utiliser du JS pour quelque chose réalisable sans. Voici la solution pour ceux que ça intéressent en n'utilisant que du CSS et HTML:
    http://www.blog.manit4c.com/2010/02/19/centre-et-redimensionner-un-background-en-css/
  • gravatar
    Oui mais tu n'a pas les mĂȘmes effets sans Js (affichage en fondu, et pas de limite dans le redimensionnement de l'image et j'en passe..).

    Moi je dit Bravo au concepteur :)
  • gravatar
    Ce qui serait sympa, c'est que l'image s'adapte aussi sur la hauteur, de sorte que lorsque l'on redimensionne la fenĂȘtre en une colonne Ă©troite, elle continue de remplir le fond mĂȘme si elle est sensĂ©e ĂȘtre plus petite.

    Mais sinon, merci pour ce super script !
  • gravatar
    C'est TROP fort!! Un Grand merKi !
  • gravatar
    jai vraiment besoin aide les gars,jai vraiment tous essayer..je suis sous joomla et jutilise firebug mais pas moyen de le faire marcher.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
             <jdoc:include type="head" />
             <?php
             require(YOURBASEPATH . DS . "rt_tabmodules.php");
             require(YOURBASEPATH . DS . "rt_utils.php");
         require(YOURBASEPATH . DS . "rt_head_includes.php");
         ?>
        </head>
        <body id="ff-<?php echo $fontfamily; ?>" class="<?php echo $fontstyle; ?> <?php echo $style_overlay; ?> latch">.....ect
    <script type="text/javascript">
    bgMax.init('http:/mon url photo', {
    mode : "max",
    position : "fixed",
    enlarge : true,
    fadeAfter : 1000
    });
    </script>
        </body>
    </html>

    je desepere grave.merci davance..bryan ile maurice
  • gravatar
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head><script src="bgMax.min.js" type="text/javascript"></script>
    <jdoc:include type="head" />
    <?php
    require(YOURBASEPATH . DS . "rt_tabmodules.php");
    require(YOURBASEPATH . DS . "rt_utils.php");
    require(YOURBASEPATH . DS . "rt_head_includes.php");
    ?>
    </head>
    <body id="ff-<?php echo $fontfamily; ?>" class="<?php echo $fontstyle; ?> <?php echo $style_overlay; ?> latch">.....ect
    <script type="text/javascript">
    bgMax.init('http:/mon url photo', {
    mode : "max",
    position : "fixed",
    enlarge : true,
    fadeAfter : 1000
    });
    </script>
    </body>
    </html>
  • gravatar
    perso, tout fonctionne, mais j'ai une barre blanche en bas de l'Ă©cran, comme si l'image ne s'Ă©tirait pas jusqu'en bas... (firefox)

    <script type="text/javascript">
    var options = { fadeAfter : 0, fadeOptions : { duration : 500 } };
    bgMax.init('images/neige.png', options);
    </script>
  • gravatar
    ce script semble ĂȘtre parfait, cependant peut-on centrer verticalement le background ?
  • gravatar
    Le centrage vertical, en plus de soulever quelques complications de codage, me paraissait surtout poser des problÚmes de design. J'ai préféré ne pas le développer.
    Cela dit, si certains sont intĂ©ressĂ©s, j'envisagerai peut-ĂȘtre de l'intĂ©grer Ă  une future version du script.
  • gravatar
    Merci Abrab, je suis dans une configuration oĂč votre script est parfait, cependant pour le design de mon site (style 16/9 Ăšme) j'aurai besoin de cette petite modification, pouvez vous m'aider ?
  • gravatar
    J'ai peut-ĂȘtre une solution, mais elle aurait besoin d'ĂȘtre testĂ©e. Si tu m'envoies ton adresse email, je pourrais te transmettre une version un peu modifiĂ©e du script.
  • gravatar
    Merci beaucoup, je viens de vous envoyer mon adresse ....
  • gravatar
    Mise Ă  jour
    bgMax passe en version 1.1

    Suite à plusieurs sollicitations, je viens d'ajouter la possibilité de centrer l'image dans le sens vertical. (Voir ci-dessus, option "vertAlign".)
    Cette nouvelle version est également protégée contre les risques de conflits avec d'autres scripts.
  • gravatar
    J'ai appris des choses interessantes grace a vous, et vous m'avez aide a resoudre un probleme, merci.

    - Daniel
  • gravatar
    Super le scrip, un grand merci Abrab :) Par contre, je cherche aussi (comme Albert) une façon d'ajuster l'image en largeur ou en hauteur en fonction de la proportion de l'image et de la proportion de la fenĂȘtre. Je ne sais pas de quand datent les messages ci-haut. Avez-vous trouvĂ© une solution Ă  ce sujet depuis que ce script a Ă©tĂ© mis en ligne?

    Bien sur, je vous mettrai dans les crédits de mon site ;)

    merci d'avance

    Lorraine


  • gravatar
    Ce script est super, il me rend grand service. Bravo Ă  toi , trĂšs bon travail!!!
  • gravatar
    le script est top par contre je voudrais savoir s'il est possible de jouer sur la hauteur mĂȘme en dĂ©formant le fond?
    Merci
  • gravatar
    Super script, il ne reste plus qu'Ă  ce que l'image puisse s'agrandir toute seule et tourner sur elle mĂȘme et on aura la totale des effets ! Bravo.
  • gravatar
    Bonjour,

    le script est impeccable merci.
    Un truc que je ne comprends pas c'est pour ajuster le texte sur l'image ensuite.
  • gravatar
    Bonjour,
    Le script est vraiment super et marche correctement chez moi, mais j'aurais aime mettre deux zones reatives dans mon image qui me serviraient de link vers une autre page. Avec dreamweaver pas de probleme, mais ici dans le script, y a t'il une possibile car je ne connais pas encore tres bien ce language.
    Meilleures salutations et encore merci pour le script.
    Michel
  • gravatar
    @ Nicolas, le chemin que tu donne (dans ta question 1) Ă  ton image n'est pas bon.
    met ton dossier Images dans le mĂȘme dossier que ta page ça Ă©vite les chemins difficiles.
    Et donc le chemin sera :
    Images/image.jpg
  • gravatar
    surtout pas le "file:///C:"
  • gravatar
    Hello,
    Je n'arrive pas Ă  faire fonctionner le code. Une page blanche s'affiche...
    Avez-vous une idée pourquoi?

    Voici le code de mon fichier html.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test Background</title>
    <script src="bgMax.min.js" type="text/javascript"></script>
    </head>


    <body>
    <script type=\"text/javascript\">

    bgMax.init('images/background.jpg');

    </script>

    </body>
    </html>

    Que dois-je faire pour que cela fonctionne?
    Merci d'avance
  • gravatar
    hello Manu
    essaie :
    <script type="text/javascript">
    au lieu de :
    <script type=\"text/javascript\">
  • gravatar
    Petite suggestion ! Afficher les dates des commentaires ce serait bien......

    Merci pour tout
  • gravatar
    Bravo et merci pour ce script ! ça marche nickel :)
  • gravatar
    sauf pour mettre du texte par dessus .. et c'est bien dommage
  • gravatar
    Hello,

    Merci pour ta réponse.
    Cela fait deux semaine que j'avais réussi à y faire fonctionner.
    J'ai réussi en regardant la réponse donnée à Buluk, mais je n'avais pas compris pourquoi et je ne voyais pas les différences.
    Je m'était concentré sur le positionnement du code par rapport aux balises...

    Effectivement il n'y a pas de date des post, je pensais que le site était mort et que les derniÚres questions avait été postée il y a belle lurette.
    La preuve que non!

    Merci pour tout et merci pour ce bout de code bien utile!
    A bientĂŽt
    PS: Je mets la date de ce post pour les prochains qui viendraient faire un tour par ici -> 26.02.2011
  • gravatar
    Lorsque j'utilise le script sur firefox , aucun problÚme, sous ie j'ai l'image qui décale mon site entiÚrement vers le bas.
  • gravatar
    Bonjour/Bonsoir,
    Je souhaite savoir si ces scripts ont une licence ou non. Je souhaite vous demander si j'ai le droit d'utiliser ce script sur un site (s'il n y a aucun droit d'auteur ou condition d'utilisation) car j'ai peur qu'un jour, le propriétaire du script réclame quelque chose :p !
    cordialement
  • gravatar
    mais non il n'y pas de copyright.
    les messages ci dessus dates de plusieurs mois et mĂȘme de certaines d'annĂ©es je suppose, dommage qu'il n'y ai pas les dates.
  • gravatar
    ps > 15/04/11
  • gravatar
    lol. Cela veut dire que je peut l'utiliser comme je veux sur le site que je veux sans forcément préciser quel est le createur ... ?
  • gravatar
    Car je vois qu'il y a une licence(que je ne comprends pas trĂšs bien d'ailleurs) :
    http://creativecommons.org/licenses/by/2.0/fr/
  • gravatar
    Tu mets son nom dans le code source. Et basta.
  • gravatar
    ok merci KARN. Mais j'ai encore une question. J'essaie "d'installer" ce script mais aucune image ne s'affiche sur mon Ă©cran et aucune option de fonctionne. Si cela peut "t'aider Ă  m'aider" je te donne mon script :
    <script type=\"text/javascript\">
    bgMax.init('images/im_a', {
    mode : "full",
    position : "absolute",
    enlarge : "true",
        reduce : "true",
        align : "center",
    fadeAfter : 1000
    });
    </script>

    Dans le dossier dans lequel se trouve mon document html, il y'a les deux scripts que j'ai téléchargé (donc pas un problÚme lié à l'emplacement des scripts .js) et dans <head></head>, j'ai bien mis les liens :

    <script src="bgMax.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="menu.js"></script>
  • gravatar
    16.04.11

    hello,

    La question a déjà été posé, j'ai également commis l'erreur au début :
    <script type="text/javascript">
    plutĂŽt que <script type=\"text/javascript\"> qui a des slashs bien Ă©tranges.
  • gravatar
    16/04/11

    Bonjour,

    Je te remercie infiniment pour ton aide. Maintenant, le script fonctionne !!!
    Mais si je puis me permettre, il me reste un dernier petit problĂšme.
    Lorsque je mets un fond d'écran, l'image ne s'affiche qu'au centre. Les cotés de la pages ne sont pas couverts par l'image, ce qui fait que j'ai des bandes blanches à gauche et à droite de mon écran.
    Merci d'avance
  • gravatar
    En plus, je ne peux ni zoomer sur l'image ni "dézoomer".
  • gravatar
    Et l'image n?apparaĂźt pas en fondu
  • gravatar
    Bonjour Ă  tous et merci pour cet excellent script!

    Je rencontre un petit problĂšme, j'aimerai que le background soit diffĂ©rent en faisant appel Ă  une requĂȘte MYSQL et donc intĂ©grer une balise php Ă  l'intĂ©rieure, ce qui donnerait par exemple :

    bgMax.init('../Bezels/<?php echo $ligne_game[Bezel]; ?>', options);

    Mais avec cette balise php le background ne n'apparaĂźt plus, quelqu'un peut m'aider ?

    P.S : j'ai pensé qu'une intégration de balise php n'était pas possible dans un script mais avant que l'on me demande j'utilise déjà des balises php dans des scripts et cela fonctionne, pourquoi pas là ? Merci
  • gravatar
    (c) Lechuck 07.05.11
  • gravatar
    T'as pas un $ qui manque ? $ligne_game[$Bezel]
    parce que c'est probablement une variable dans tes parenthÚse carrées ...
  • gravatar
    Salut Sylvie,

    Merci pour ta réponse, en fait j'ai trouvé, ce sont les [ qui posent problÚmes. J'ai donc fait deux variables:

    $bezel = $ligne_game[Bezel];
    bgMax.init('../Bezels/<?php echo $bezel; ?>', options);

    Ca marche impec :) Par contre j'ai un autre petit soucis, j'aimerai bien laissé le script en position "absolute" mais quand je fais ça on voit la barre de défilement du bas qui s'affiche et je n'en veux pas :( Du coup obligé de laisser position "fixed"
  • gravatar
    Oui, j'ai remarqué aussi ... C'était d'ailleurs ma derniÚre question sur ce forum ! Je ne voulais pas non plus de barres de défilement ! Abrab me répondait à l'époque, qu'il s'en occuperait "dÚs qu'il aurait un peu plus de temps". Vu qu'il n'assure plus le support technique, il n'a pas dû arriver à gérer ça ...

    Je te souhaite bonne chance !
  • gravatar
    07.05.11

    Qui datait de quand Sylvie ?

    j'ai du mal Ă  voir dans le temps Ă  quand remontent les premiĂšres question?
  • gravatar
    Oui je sais Karn, on mettait pas de date du tout Ă  l'Ă©poque. C'est gĂȘnant par la suite. J'ai posĂ© cette question dans le courant du mois de fĂ©vrier 2011 ...
  • gravatar
    C'est dommage qu'il n'y ai plus de support, mĂȘme s'il pourrait ĂȘtre bcp plus exploitĂ© ce script reste le meilleur des scripts jquery dans le genre.

    le 07/05/2011 Ă  22:30 :)
  • gravatar
    Grand merci pour ce scrip. Chez moi ça marche nikel.
    Je suis simplement étonné qu'il y ai tout à coup les scroll barres qui apparaisse, (verticale et horizontale)
    Es-ce que c'est possible d'éviter ça ?

  • gravatar
    Hello! Super ce script, il m'aide vraiment bien.
    J'ai le mĂȘme souci que Wanta ... une scrollbar Ă  la verticale. Tu aurais une solution miracle?
    Voici ma page :: www.villarumahsungai.com/temp/index.html

    Merci d'avance! Belle journée,
    emilie
  • gravatar
    Ce script fonctionne Ă  merveille !! Merci beaucoup !! Sauf que depuis un certain temps c'est plus trop sa... J'ai bien mon image qui s'affiche, mais le contenu textuel de ma page s'en va tout en bas de ma page... Y aurait-il une solution ?

    <Vendredi 3 Juin 2011>
  • gravatar
    Bonjour,

    Est-ce quelqu'un à déjà essayer d'intégrer ce script sur un site internet Prestashop car j'ai beau essayer plein de solution cela ne fonctionne pas...
    Le soucis c'est que le site est composer de fichier .tpl en gros header.tpl, footer.tpl etc... donc sachant qu'il faut mettre une ligne de code devant </body> je pense que ça ne relie pas bien le script.

    Est-ce quelqu'un aurait une solution Ă  me donner

    Cordialement
  • gravatar
    J'ai oublier de préciser que je n'ai aucune image qui s'affiche en mettant le script
  • gravatar
    J'ai testé sur un site Client sous Joomla et c'est vraiment la classe ! Bravo, trÚs bon travail :)
  • gravatar
    "Pour ton information : le dossier n'est pas downloadable à partir d'un Mac (j'ai essayé Safari et Opéra). J'ai fini par allumer un vieux PC"

    Su Mac, il suffit de supprimer .download et cela redevient un dossier avec les contenu accessibles. C'est d'ailleurs la mĂȘ chose pour tous les supers trucs Ă  tĂ©lĂ©charger depuis ce site ..
  • gravatar
    Je m'adresse au cvréateur (trice) de ce super site.
    En fait, pour que cela ne se produise pas, au moment ou tu compresses les fichiers en zip, il ne faut pas que le nom du dossier contiennent 2 points. Bref, il faut supprimer le .download et les Macqueux n'auront plus de problĂšmes.
  • gravatar
    J'ai tenté en vain d'installer ce module sur le site http://brylinska.com
    Comme j'ai une image alĂ©atoire en fond de page d'accueil, je ne peux pas indiquer le chemin d'une seule image, c'est l'image qui sort au hazard qui devrait etre traitĂ© avec les paramĂštres. Toutefois, j'ai quand mĂȘme tentĂ© d'indiquer le nom d'une des images pour voir si les valeurs de redimensionnement etaient prisent en compte, et lorsque je tombe sur la photo, il ne se passe rien. Je prĂ©sume qu'il doit exister un conflit avec une autre fonction.. J'espĂšre trouver une issue mais ce serait bien dans tous les cas que ce soit toutes les images d'un dossier qui reçoivent l'action.
    Merci.
  • gravatar
    Ce programme est génial et pourtant il y aurait quelque chose à améliorer. Oui, oui, je ne suis qu'une grande gueule car bien incapable de développer un truc pareil. Il faudrait que l'ascenseur horizontal de la fenetre du navigateur ne se déclenche pas selon la largeur de cette image de fond, quelque soit le reglage retenu, seule la largeur du corps de la page (980 px par ex) doit agir sur ce déclenchement.
  • gravatar
    Merci, c'est exactement ce que je cherchais. Et avec les paramĂštres, j'arrive Ă  ce que je voulais....
    encore Merci
  • gravatar
    Hello,

    Merci pour ce script, c'est vraiment trĂšs bien !
    Par contre je n'arrive pas Ă  supprimer l'effet de fondu de l'image au chargement de la page. Quelle option permet de faire cela svp ?

    Merci d'avance et encore bravo pour le travail.
  • gravatar
    FadeAfter: false

    ;-)
  • gravatar
    Bonjor Ă  tous,

    Merci pour ce module super sympha.
    Je teste un site joomla 1.5 chez OVH et j'ai erreur suivante:
    Parse error: syntax error, unexpected '&', expecting T_VARIABLE or '$' in /chemain/www/modules/mod_bgmax/helper.php on line 227

    Apache 2.2.X OVH
    Joomla! 1.5.23 Stable
    PHP 4.4.9

    Une idée?

    Merci d'avance
  • gravatar
    Bonjour Ă  tous,

    ce script est vraiment top!! merci Abrab

    Mais petit souci j'espĂšre que quelqu'un pourra m'aider!
    mon image de fond ne fonctionne pas (ecran noir) sous IE7

    merci d'avance
  • gravatar
    Bonjour a tous, ce script a l'air vraiment gĂ©nial malheureusement je n'y arrive dĂ©sespĂ©rĂ©ment pas! JE DÉBUTE DANS LA PROGRAMMATION ALORS NE VOUS MOQUEZ PAS mais"bgMAX" ne marche pas quand j'essaie de l'ouvrir cela m'affiche un message d'erreur!!!
    Sinon voilĂ  ce que j'ai fait:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
    <title>Bienvenue sur mon site !</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script src="bgMax.min.js" type="text/javascript"></script>
    </head>
    <body>
    <script type="text/javascript">

    bgMax.init('dossier/image.jpg');

    </script>
    </body>
    </html>

    VoilĂ  merci d'avance si vous pouvez m'aider!
  • gravatar
    Super , sans aucune dépedance (jqeury o autre ) , 3.7 KO en version minifié !
    Il lui manque juste un petit détails dans les options ; c'est de pouvoir controller l'aspet ratio.
  • gravatar
    TrĂšs bon script merci, mais j'aurais une question.
    J'aimerais profiter de ce redimensionnement automatique du background pour redimensionner de la mĂȘme maniĂšre le body (comme les Ă©lĂ©ments de ce derniers dĂ©pendent du background). Serait-ce possible et si oui comment?
  • gravatar
    bonjour,
    super script! que j'arrive Ă  faire tourner sous mozilla, mais pas internet explorer...
    est-ce que quelqu'un pourrait m'aider...?

    sachant que dans mon header, il y a pas mal de choses (car je travaille sur un theme wordpress existant)

    <?php
    /**
    * The Header for our theme.
    *
    * Displays all of the <head> section and everything up till <div id="main">
    *
    * @package WordPress
    * @subpackage Twenty_Eleven
    * @since Twenty Eleven 1.0
    */
    ?>

    <!DOCTYPE html>
    <!--[if IE 6]>
    <html id="ie6" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 7]>
    <html id="ie7" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html id="ie8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->





    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <meta name="viewport" content="width=device-width" />

    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>


    <![endif]-->
    <?php
        /* We add some JavaScript to pages with the comment form
         * to support sites with threaded comments (when in use).
         */
        if ( is_singular() && get_option( 'thread_comments' ) )
             wp_enqueue_script( 'comment-reply' );

        /* Always have wp_head() just before the closing </head>
         * tag of your theme, or you will break many plugins, which
         * generally use this hook to add elements to <head> such
         * as styles, scripts, and meta tags.
         */
        wp_head();
    ?>

    <script src="http://www.xxx.com/wordpress/script/bgMax.min.js" type="text/javascript"></script>

    </head>
  • gravatar
    Il faudrait taper un code pour assurer la compatibilité avec IE !!!
    Je te dis çà demain !!!
  • gravatar
    super! merci pour le coup de main
  • gravatar
    hello! si quelqu'un peut m'aider.... quel est ce code dont parle Jonathan dans le post précédent pour assurer la compatibilité avec IE?
  • gravatar
    Bonjour, mĂȘme problĂšme .. je n'ai pas trouvĂ©. Je ne m'en sert plus depuis que j'ai vu que la page restait blanche sur Explorer...
  • gravatar
    Merci pour ce super code.
    J'aimerais l'appliquer sur 2 images placées l'une au dessus de l'autre.
    Pour l'instant mon code n'affiche que la premiĂšre.
    Comment je peux faire svp ?

    Je suis nouveau dans tout ce qui est web !
  • gravatar
    Voilà le code de compatibilité je sais pas si c'est ça mais j'aurais essayé !!!
    Le texte qui suit provient du site du zéro et si vous voulez apprendre à créer des sites web ou à manier des logiciels ce site est fait pour vous: il est tout simplement génial !!!
    Je cite :

    "Assurer la compatibilité avec IE
    Les nouvelles balises que nous venons de voir ne sont reconnues par Internet Explorer que depuis la version 9 (IE9). Cela va poser un problĂšme car, quand les anciennes versions d'IE ne connaissent pas une balise... elles ne traitent pas correctement la page (impossible de modifier leur css par exemple) !

    Cela peut heureusement se rĂ©gler assez facilement Ă  l'aide d'un script Javascript. Les scripts sont des petits morceaux de code qui permettent de manipuler la page web et d'effectuer certaines actions. Nous n'allons pas nous intĂ©resser ici au Javascript (ce n'est pas le sujet de ce cours), mais il faut savoir qu'ils sont appelĂ©s depuis les pages HTML, un peu de la mĂȘme façon que les fichiers CSS.

    Les fichiers Javascript sont généralement des fichiers ayant l'extension .js. Dans notre code HTML, on les place en général dans la balise <head> avec cette balise :

    Code : HTML - SĂ©lectionner

    1

        

    <script src="monscript.js"></script>




    Si je vous présente (briÚvement) Javascript ici, c'est parce qu'un petit script répondant au doux nom de HTML5shiv permet de faire en sorte que les balises que nous venons de voir (<header>, <footer>, <section>...) s'affichent correctement sur les anciennes versions d'Internet Explorer (IE6, IE7, IE8). ConcrÚtement, il vous suffit d'ajouter la ligne suivante dans votre code :

    Code : HTML - SĂ©lectionner

    1
    2
    3

        

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->



    Placez ce code dans la balise <head> comme ceci :

    Code : HTML - SĂ©lectionner

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14

        

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <title>Inclusion de HTML5shiv</title>
    </head>

    <body>

    </body>
    </html>



    Et voilà, votre site s'affichera désormais sans problÚme sous Internet Explorer !

    Sans rentrer dans le détail, sachez que <!--[if lt IE 9]> est un commentaire conditionnel. C'est un commentaire spécial qui n'est lu que par Internet Explorer. Il permet de faire en sorte que le script ne s'exécute que sur les versions d'Internet Explorer inférieures à IE9 (les autres navigateurs n'en ont pas besoin et ignoreront le commentaire). Plus d'informations sur les commentaires conditionnels."


    Et voilĂ , en Ă©sperant que cela aurait pu t'aider !
    Salutations,
    Jonathan, magicien et webmaster
    Ma chaĂźne youtube:
    http://www.youtube.com/user/jonathanlemagicien?feature=mhee#p/a

  • gravatar
    Ce script est vraiment trÚs bien et de qualité! Merci de nous l'avoir présenté!

    Cependant, lorsque je le met sur mon site, il redimensionne l'image mais n'a pas l'air de tenir compte de la largeur de la barre de dĂ©filement vertical (car le contenu de mon site est plus long que la taille de la fenĂȘtre), il affiche donc une barre de dĂ©filement horizontal.

    Je remarque que sur ce site le problĂšme est le mĂȘme, y aurait-il un moyen de le rĂ©gler?

    J'espÚre avoir été clair, sinon n'hésitez pas à demander plus de détails ;)
    Merci!
    Ian Letourneau.
  • gravatar
    @Jonathan sympa ce code.

    Dommage que je n'y ai pas pensé (que je ne l'ai pas connu ;) il y a quelques mois, j'ai annulé ce scprit pour non comptabilité avec IE.
  • gravatar
    @Ian c'est normal qu'il affiche une barre de défilement quand il n'a pas la place pour tout afficher.

    Ou alors je n'ai pas compris, tu n'aurai pas un exemple ?
  • gravatar
    @Karn oui je pense bien que ca soit normal :P Non mais le truc c'est que l'image du background se redimensionne a la taille de la fenĂȘtre telle qu'elle est sans qu'il y ait de barre de dĂ©filement, donc si la barre de dĂ©filement s'ajoute elle devient un peu plus large que la fenĂȘtre ^^
    Est-ce que j'ai été plus clair :P ? ^^

    Regarde tout simplement avec ce site, tant que l'image n'est pas chargĂ©, il n'y pas de barre de dĂ©filement horizontale. Mais dĂšs qu'elle est chargĂ©e, il y en a une qui apparait car la largeur de l'image est lĂ©gĂšrement plus grande que la taille de la fenĂȘtre.

    Je vais aller jeter un coup d'oeil dans le code js et voir si je peux trouver comment faire ;)
  • gravatar
    Tout dépends de ta résolution, pour moi l'exemple s'affiche sans ascenseur (je n'ai pas le temps de voir sans l'image de fond c'est immédiat).

    Si je redimensionne il y a effectivement une barre de défilement, ce qui est logique puisqu'il y a du texte et des zones de saisie auquel il faut pouvoir accéder.

    Pour mémoire, sans rien d'autre que l'image de fond, l'image s'ajuste comme prévu, et il n'y a aucune barre de défilement.
  • gravatar
    Je n'en sais rien moi en tout cas j'ai tiré ce script du site du zéro et je ne l'ai jamais utilisé vu que j'utilise mozilla firefox :)
  • gravatar
    De mĂȘme, avec un peu de chrome qui prends en vitesse, mais les gens qui regardent ton site pas forcĂ©ment.

    Le site est bien fais en tout cas. C'est rare pour du gratuit autant de précision.
  • gravatar
    Oui, c'est vrai que le site du zéro est vraiment génial :) !
  • gravatar
    C'est un excellent example. ca m'a été personnellement utile.
  • gravatar
    De rien je connais mĂȘme l'un des crĂ©ateurs !!! ;)
  • gravatar
    bonjour Ă  tous!
    savez vous comment on peut utiliser ce script pour deux images dans une mĂȘme page? et si pour une des deux images, elle peut rester cliquable?
  • gravatar
    Comment tu veux dire que les deux images sont cote a cote ?
    Précise !
  • gravatar
    oui ce serait pour deux images cote à cote... mais que l'une d'entre elle garde des" fonctionnalités " de sommaire : hover, lien url, etc...

  • gravatar
    Mmmh....
    Je vais chercher et je vais me renseigner Nico !
    Merci tu m'as donné un défi !!! ;)
  • gravatar
    Bonjour,

    C'est simple à faire avec un tableau (script d'un coté, image normale de l'autre).

    Le problĂšme ensuite est le retour Ă  cette page : l'image du script se divise par deux Ă  chaque retour.
    Je n'ai plus mon code qui 'foirais" ayant supprimé tout ce qui relatait à ce script mais je me souviens trÚs bien de ce point qui me posais problÚme.

    Bon courage.
  • gravatar
    Mouais pareil !
    Je vais continuer Ă  chercher !
  • gravatar
    Salut,

    petit problĂšme :(

    <script src="bgMax.min.js" type="text/javascript"></script>
    et
    <script type=\"text/javascript\">
    bgMax.init('var/www/sql/backbleu.jpg');
    </script>
    Mais rien ne s'affiche ... Et je suis pourtant sur des chemins.

  • gravatar
    hello Kevin
    essaie :
    <script type="text/javascript">
    au lieu de :
    <script type=\"text/javascript\">
  • gravatar
    Oui merci Nico ca m'a aussi aidé
  • gravatar
    Bonjour
    Super module, mais ... comment ajouter un lien sur le fond ? Une idée m?intéresserait beaucoup.
    Merci d'avance
  • gravatar
    Il doit y avoir une propriété pour ca ...
    Je vais encore chercher !!!
  • gravatar
    Je trouve pas aidez-moi !!!!!!!!!!!!
  • gravatar
    @crash__ sur twitter il va te dire vite fais comment faire.
  • gravatar
    http://twitter.com/#!/crash__
  • gravatar
    Salut Ă  tous!
    mon image redimensionnée s'affiche mal sous ie 7 dans ses parties colorés ... les formes colorés "pixellisent " les contours ne sont pas nets...
    cela ne se passe plus sous ie8,

    quelqu'un connait la raison de ce bug?
  • gravatar
    non desolé
  • gravatar
    Bonjour,
    J'espĂšre qu'il y aura encore quelqu'un qui lira ce commentaire !
    Voilà, je suis entrain de travailler sur une nouvelle déco pour mon blog et je voudrais installer ce script mais je n'y parviens pas, j'ai refait des dizaines de fois et c'est toujours vierge ! j'ai lu tous les comms et n'ai pas trouvé de réponse alors si vous pouviez m'aider.... je fais ce que je peux mais mon truc c'est plutÎt la cuisine .... merci beaucoup d'avance si quelqu'un peut rectifier les codes ci-dessous que je vous copie :

    Dans la page d'accueil de canalblog, j'ai mis ces codes, juste avant la balise </head> :

    <script src="bgMax.min.js" type="text/javascript"></script>


    Ensuite, toujours dans la page d'accueil, j'ai mis ces codes juste avant la balise </body> :

    <script type="text/javascript">
    bgMax.init('http://storage.canalblog.com/53/88/771769/71777179.jpg', {
    mode : "full",
    position : "fixed",
    enlarge : 0,
    fadeAfter : 0
    });
    </script>

    Par ailleurs, voici les codes de <body> dans la feuille de style :

    body {
        margin: 40px 40px 40px 40px;
        text-align: center;
        background-color: #;

    Je précise que je travaille à ce projet sur un autre blog qui me sert en quelque sorte de brouillon tant que je n'ai pas obtenu ce que je souhaite.
    VoilĂ , je me demande s'il y a autre chose Ă  faire d'enfantin et que je n'aurais pas fait, j'espĂšre avoir de l'aide et vous en remercie bien par avance.
        
  • gravatar
    Salut Martine.

    Je pense que ça ne marche pas parce que l'adresse que tu indiques pour le fichier javascript n'est pas valide.
    Avec l'adresse "bgMax.min.js" le script est recherchĂ© dans le mĂȘme dossier que ta page web. Or je doute qu'il s'y trouve.

    Tu peux essayer de remplacer cette adresse par cette autre, qui est l'adresse oĂč est enregistrĂ© le script sur ce site (webbricks.org) : "http://webbricks.org/bricks/bgMax/bgMax.download/bgMax.min.js"

    Si ça marche, c'est que l'erreur venait bien de l'adresse. Cependant, je ne te recommande pas d'utiliser celle que je viens de te donner, car elle pourrait changer, et ton lien serait rompu.
    Le mieux serait d'enregistrer le script quelque part sur ton site, et d'utiliser cette adresse-lĂ .
  • gravatar
    Salut Nico,

    Merci, suis vraiment contente de trouver de l'aide !

    Je viens de remplacer l'adresse de mon image par celle que tu me donnes mais ça ne marche pas davantage :-( suis vraiment désolée.

    En plus, je voudrais essayer en faisant comme tu dis c'est à dire "enregistrer le script sur mon site" mais je ne sais pas ce que ça veut dire .......... j'ai honte !
    As-tu encore un moment Ă  me consacrer ? j'espĂšre et te remercie encore.
  • gravatar
    Nico,

    Je viens d'avoir l'idée de faire l'opération sur mon blog actuel dont j'ai donné la référence et ça ne marche pas non plus !

    Y aurait-il un rapport avec canalblog ? je dis peut-ĂȘtre une bĂȘtise !
  • gravatar
    boujour ca fait longtemps que je suis pas venu ici mais pour toi Martine mais ouvre les fihiers du script que tu as enregistré ! que vois tu ?
    si c'est un message d'erreur ce qui m'est déjà arrivé il est normal que ca ne marche pas !
    j'avais déjà résolu ce problÚme mais je sais plus comment !
    en tout cas si ce'st ca dis le moi je chercherais !
  • gravatar
    Bonjour Jonathan,

    Merci d'avoir pris le temps de me rĂ©pondre. Je me sens vraiment bĂȘte mais je dois t'avouer que je ne comprends pas ce que tu me demandes de faire. Si tu veux bien m'expliquer en dĂ©tails ce que je dois faire ce serait gentil de ta part. Bonne journĂ©e !
  • gravatar
    alors tu vois pour exécuter le script il faut enregistrer un dosier bg max.init un truc comme ca !
    dedan il y a deu dossier ouvre les!
    si tu as un message d'erreur di le moi
  • gravatar
    Bonjour Jonathan,

    Alors encore merci de bien vouloir m'aider.

    Voici ce que j'ai fait, j'ai chargé ce script :
    http://www.webbricks.org/bricks/bgMax/bgMax.download.zip

    Lorsque je l'ouvre, deux dossiers apparaissent :

    Le premier s'appelle :
    bgMax.min et lorsque je l'ouvre, voici le message d'erreur :
    Script: C:\.............\bgMax.download\bgMax.min.js
    Ligne : 2
    Caract: 1
    Erreur : 'window' est indéfini.
    Code : 800A1391
    Source : Erreur d'exécution Microsoft Jscript



    Le second s'appelle :
    bgMax.src et lorsque je l'ouvre, voici le message d'erreur :
    Script: C:\............\bgMax.download\bgMax.src.js
    Ligne: 18
    Caract: 1
    Erreur: 'window' est indéfini.
    Code: 800A1391
    Source: Erreur d'exécution Microsoft JScript

    Si tu sais quoi faire Ă  cette erreur je serais vraiment ravie ! perso c'est comme si on me demandait de traduire du chinois par exemple :-)

    Merci d'avance



  • gravatar
    c'est ce qui m'Ă©tais arrivĂ© alors vant de chercher pourreais tu me dire quelle est le systĂšme d'exploitation de ton PC , mĂȘme si c'est un Mac !
  • gravatar
    Non, pas un Mac :-) mais windows 7
    Bon courage, j'espÚre que tu vas trouver sans trop de peine, bonne soirée
  • gravatar
    je cherche je cherche !!! :p
  • gravatar
    C'est sympa, je te remercie et j'espĂšre que tu trouveras ! bon courage !
  • gravatar
    Script bien cool, une super amélioration serait de pouvoir faire un slideshow à partir d'un dossier (défilement des images qui sont dans le dossier).
    Qu'en pensez-vous?
  • gravatar
    Oops, j'espérais que Jonathan passait par là, tant pis !
    oui, Thomas, je trouve que c'est une bonne idée mais je ne pourrai pas t'aider n'arrivant déjà pas à installer le script de base, j'espÚre que tu y arriveras.
    Bonne fin de journée.
  • gravatar
    c'est bon je suis la mais c'est juste que le site était bloqué un certain temps ,vous avez vu ?
  • gravatar
    Non Jonathan mais je n'Ă©tais peut-ĂȘtre pas lĂ , je n'ai pas remarquĂ©.

    Si des fois tu n'as pas le temps, c'est pas trop grave, je comprendrai bien mais je te remercie bien, c'est trĂšs gentil.

    Belle soirée à tous ceux qui passent par là !
  • gravatar
    ouais mias ca m'énerve je trouve pas alors que je l'ai déjà fait !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    ouiiiiiiiiiiiin
  • gravatar
    Si tu arrives Ă  t'en souvenir tant mieux sinon ça ne fait rien, tu ne vas pas y passer trop de temps non plus, peut-ĂȘtre demain ! bonne soirĂ©e, merci.
  • gravatar
    non t'inquiete ca me dérange pas du tout, d'ailleurs cela m'a meme lancé un défi mais vu que j'ai cours c'est chaud à trouver le temps !
  • gravatar
    hello,

    Martine tu pourrai montrer ton code, ce serait plus aisé de trouver l'erreur provoquée par le script.
  • gravatar
    Karl, je mets juste le code donnĂ© ici en en-tĂȘte en insĂ©rant l'adresse de mon image et ça ne marche pas, que puis-je te donner d'autre ? de plus, quand je mets l'adresse de mon image dans le "bac Ă  sable" plus haut, ça marche alors, moi, je n'ai pas les compĂ©tences !

    Jonathan, c'est gentil, faut faire passer tes cours en priorité, ça c'est sûr.

    Ce qu'il y a de bien sur ce post, c'est que je révise mes rÚgles de calcul à chaque fois que je mets un message :-))

    Bonne soirée
  • gravatar
    Ok sur canalblog je n'avais pas vu.

    A lire la source de ces blogs il doit y avoir un conflit entre les scripts quelques parts (cf ci-dessous pour voir le bazar que c'est.

    As tu essayĂ© de faire un code html toi mĂȘme avec juste le script et une image en test ?

    canalblog :
    "<script type="text/javascript" language="Javascript">//<![CDATA[
    function ToggleMenu(itemName)
    {
    var elm = document.getElementById(itemName);
    var i,others = document.getElementById('SectionMenu');
    for(i=0; i < others.childNodes.length; i++)
    {
    var other = others.childNodes;
    if ((other.className == 'MenuSectionBlock') && (other != elm))
    other.style.display='none';
    }
    if (elm.style.display == 'block') elm.style.display='none';
    else elm.style.display='block';
    return false;
    }
    //]]></script>

    <meta property="og:title" content="Chocolat équinoxial - La Belle au Blé Dormant" />
    <meta property="og:description" content="La nuit qui déjà s'annonce. Un Tout Petit Prince occupé à manger ses biscuits du goûter (et à patouiller dans son jus de pomme...). Un..." />
    <meta property="og:image" content="http://storage.canalblog.com/27/73/103163/71834684_p.png" />
    <meta property="og:url" content="http://bledormant.canalblog.com/archives/2012/01/12/23228889.html" />
    <link rel="image_src" href="http://storage.canalblog.com/27/73/103163/71834684_p.png" />
    <link rel="canonical" href="http://bledormant.canalblog.com/archives/2012/01/12/23228889.html" />
    <meta property="fb:app_id" value="116867175007475" />
    <meta property="fb:admins" value="717607561" />
    <script type="text/javascript">
    var google_analytics_domain_name = '.canalblog.com';
    window.google_analytics_uacct = 'UA-12099278-1';
    </script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript">
    var id = 103163;
    var pid = 23228889;
    var meid = 0;
    </script>
    <script type="text/javascript"><!--
    var wads_url = 'http://ads.webedia.fr/p-c-js';
    var wads_sitepage = 'canalblog_com/blog_message';
    var wads_query = 'section_name=cuisine&blog_id=103163&blog_update=7&isCDom=0&isMember=0&tag='
    var wads_random = Math.round(Math.random()*1000000000);
    document.write('<'+'script type="text/javascript" src="' + wads_url + '/' + wads_sitepage + '/r' + wads_random + '/' + wads_query + '"><\/scr' + 'ipt>');
    // --></script> <script type="text/javascript" src="http://static.canalblog.com/sharedDocs/js/blog/all-blog-min.js?1326891600"></script>

    <link rel="stylesheet" href="http://static.canalblog.com/sharedDocs/css/blog/all-blog-min.css?1326891600" media="screen" />
    <script type="text/javascript">$(document).ready(function() {$("#content a:not('.no_lightbox'):has(img)").filter(function() {return $(this).attr('href').toLowerCase().match(/\.(jpg|png|gif|bmp)/);}).fancybox(); });</script>
    <!-- DĂ©but CanalBlog Stats -->
    <script type="text/javascript">
    $(document).ready(function() {
    var display = "no";
    if ($("div#countercb").length) {
    display = "yes";
    }
    var i = new Image();
    t = "Chocolat%20%C3%A9quinoxial%20%2D%20La%20Belle%20au%20Bl%C3%A9%20Dormant";
    i.src = 'http://stats.canalblog.com/stats/?id=' + id + '&display=' + display + '&pid=' + pid + '&u=' + escape(document.location) + '&r=' + escape(document.referrer) + '&t=' + t + '&w=' + escape(screen.width) + '&java=1' + '&sc_random=' + Math.random();
    if ($("div#countercb").length) {
    $("div#countercb").html(i);
    }
    else {
    i.style.display = "none";
    $("body").append(i);
    }
    });
    </script>
    <!-- Fin CanalBlog Stats -->
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-12099278-1']);
    _gaq.push(['_setDomainName', '.canalblog.com']);
    _gaq.push(['_setCustomVar',1,'Zone','BLOG',3]);
    _gaq.push(['_setCustomVar',2,'CategoryId','46',3]);
    _gaq.push(['_setCustomVar',3,'CategoryName','cuisine et gastronomie',3]);
    _gaq.push(['_setCustomVar',5,'blogLastUpdate','7',3]);
    _gaq.push(['_trackPageview']);
    _gaq.push(['_trackPageLoadTime']);
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
    <script type="text/javascript">var CBVARS = {"URLROOT":"http://www.canalblog.com","STATICSERVER":"static.canalblog.com","ref_keyword":"","blog_domain":"canalblog.com","blog_full_url":"http://bledormant.canalblog.com/","blog_id":103163,"cat_id":46,"partner_name":"canalblog"};</script><style type="text/css">
                  body { padding-top: 30px !important; }
                  #branding_bar{background-image: url('http://static.canalblog.com/sharedDocs/images/deg.jpg'); background-repeat:repeat-x; border-bottom:2px solid #DADADA;}
                  #branding_bar a:link{color:#999999;}
                  #branding_bar a:visited{color:#999999;}
                  #branding_bar a:hover{color:#6B6B6B;}
                  .item_left{border-left:1px solid #DADADA;}
                  #item_menu{border-left:1px solid #DADADA;}
                  #item_menu div{color:#999999;}
                  #item_form .text{border:1px solid #DADADA;}
                  .item_right{border-left:1px solid #DADADA;}
                  .item_submenu{background-color:#F5F5F5; border-top:1px solid #DADADA; border-left:1px solid #DADADA;}
                  .item_submenulast{background-color:#F5F5F5; border-top:1px solid #DADADA; border-left:1px solid #DADADA; border-bottom:1px solid #DADADA;}
                  #item_close{border-left:1px solid #DADADA;}
                  #topnav_closed{background-color:#F5F5F5; border-left:1px #999999;}
                  #item_cobrand{border-left:1px solid #DADADA; padding:0 0 0 3px;}
             </style><script type="text/javascript">hostName = '.canalblog.com'; setCookie('key','9565AECD5C6519D98DAD55CB93528348');</script><style type="text/css">div.error-form-comment {font-weight:bold;} input.error-form-comment,textarea.error-form-comment {border:2px solid red;}</style></head>
    <body><script type="text/javascript" src="http://partner.googleadservices.com/gampad/google_service.js"></script>
    <script type="text/javascript">GS_googleAddAdSenseService("ca-pub-4809739249290189");GS_googleEnableAllServices();</script>

    <script type="text/javascript">GA_googleFetchAds();</script>
    <script type="text/javascript">GA_googleAddAttr("blogUpdate",7);GA_googleAddAttr("blogId",103163);</script>
    <script type="text/javascript">GA_googleAddAttr("stopSU","1");</script>
    <div id="fb-root"></div>
    <script type="text/javascript">
    window.fbAsyncInit = function() {
    FB.init({appId: '116867175007475', status: true, cookie: true, xfbml: true});
    FB.Event.subscribe('edge.create', function(targetUrl) {
    _gaq.push(['_trackSocial', 'facebook', 'like', targetUrl]);
    $.get(CBVARS.URLROOT+'/cf/fe/remote/updatesharequeue.cfm?t=facebook&bid='+CBVARS.blog_id+'&u='+encodeURIComponent(targetUrl));
    });
    FB.Event.subscribe('edge.remove', function(targetUrl) {
    _gaq.push(['_trackSocial', 'facebook', 'unlike', targetUrl]);
    $.get(CBVARS.URLROOT+'/cf/fe/remote/updatesharequeue.cfm?t=facebookunlike&bid='+CBVARS.blog_id+'&u='+encodeURIComponent(targetUrl));
    });
    };
    (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
    '//connect.facebook.net/fr_FR/all.js';
    document.getElementById('fb-root').appendChild(e);
    }());
    </script>"

  • gravatar
    Merci Karn mais je suis juste compétente pour faire un code css pour mettre une taille et un caractÚre gras à un <div> et pour placer les éléments à leur place dans le <html> ! je suis impressionnée par tout ce script mais pour moi c'est comme si je devais comprendre du chinois, tu vois ! c'est trÚs gentil à toi mais ça ne peut pas me servir.
    Ce qui m'intéressait justement ici c'est que c'était court pour le résultat que je recherche.
    Il me faut du "prĂȘt Ă  installer" :-)))) dĂ©solĂ©e mais encore merci.
  • gravatar
    Justement c'est bien de ton fichier html dont il s'agit, ce code je l'ai pris alĂ©atoirement dans un canalblog, il n'a aucun intĂ©rĂȘt en lui mĂȘme.

    Ce petit script (bgMax.min.js) est prĂȘt Ă  installer, il faudrait juste que tu le teste avec un fichier htlm, une image et le .js.

    AprÚs si tu n'as pas envie ce n'est pas grave, j'aurai une fois de plus eu le message "les maths c'est pas votre truc, hein ?" en postant ma réponse ;)

    Bonne soirée.
  • gravatar
    Karn, bien sûr que si que j'ai envie ! mais je ne veux pas trop déranger.

    AprÚs vraiment longue réflexion je crois bien que j'ai compris ce que tu me demandes et voici ce que j'ai fait (pardon, chacun son métier et je me sens vraiment basique de chez basique mais je fais ce que je peux !) :

    Je me suis documentée pour comprendre comment afficher une page web, j'ai établi le script ci-aprÚs, je l'ai enregistré dans un fichier sous forme de ".html" puis j'ai ouvert mon navigateur, j'ai appelé ce fichier et aie ! ça me met bien mon texte mais pas l'image !

    Quand on ne sait pas faire on peut passer un bon bout de temps pour faire ce tout petit bout de script mais bon, j'ai appris, j'espÚre que le procédé est bon mais il y a vraiment quelque chose qui cloche surtout que, quand je mets l'adresse de mon image dans le "bac à sable" proposé en haut, ça marche !
    voici ce que j'ai Ă©crit :

    <html>
    <head>
    <title>C'est un essai</title>
    <script src="bgMax.min.js" type="text/javascript"></script>
    </head>
    <body>
    <p>Pourvu que ça marche !</p>
    <script type="text/javascript">
    bgMax.init("http://storage.canalblog.com/87/97/948789/72092302.jpg");
    </script>
    </body>
    </html>

    Désolée de tant déranger mais si tu as une idée, je prends. Merci mille fois d'avance, bonne soirée.
  • gravatar
    bonsoir,

    Tu as bien l'image qui apparait avec ton exemple.

    As tu bien mis le .js dans le mĂȘme rĂ©pertoire que ton fichier htlm ?
  • gravatar
    ps : inutile de te justifier, c'est une équipe de bras casé qui te réponds, le concepteur lui n'est plus la depuis quelques temps.
  • gravatar
    Bonjour !

    Karn, tu as une image qui apparaĂźt si tu copies mes codes sur une page web ? moi, je n'ai rien que le texte que j'y ai mis mais sinon, tout est blanc !

    Ta question :

    ""As tu bien mis le .js dans le mĂȘme rĂ©pertoire que ton fichier htlm ?""

    tu vois, je ne comprends pas ce que tu demandes :-((( j'ai fait comme je t'ai expliqué plus haut, j'ai enregistré ma page de codes sur mon ordi en .html et aprÚs j'ai ouvert à partir de mon navigateur.

    J'ai Ă©tĂ© jeter un oeil sur les codes des blogs des personnes qui ont participĂ© ici aux commentaires. Il y en a deux qui ont une image de fond mais je n'ai pas trouvĂ© les codes qui devraient ĂȘtre entre les balises <head> ...

    Bon dimanche !
  • gravatar
    hello,

    Les codes sont les mĂȘmes que les tiens.

    N'oublie pas que ton fichier html contient :
    <script src="bgMax.min.js" type="text/javascript"></script>
    (cela signifie qu'il va utiliser ce script)

    Tu dois donc mettre bgMax.min.js dans le mĂȘme rĂ©pertoire que ton fichier html pour que celui-ci puisse utiliser le script.

    J'espÚre avoir été plus clair, sinon n'hésites pas à m'envoyer un mail ici : oiiokihdko@yahoo.fr
    (c'est un mail poubelle je te donnerai le vrai en réponse)
    Bon dimanche Ă©galement.
  • gravatar
    quand je copie tes codes en changeant l'image(car je ne sais pas si ton image est valide), Martine, et que je met mes deux fichier bgmax dans le mĂȘme rĂ©pertoire que la page ou j'ai tapĂ© mes codes j'obtiens un trĂšs bon rĂ©sultat !
    Essaie et n'hésite pas à me poser des questions !
  • gravatar
    L'image en lien http est valide elle aussi.

    Par contre je ne comprends pas les barres de défilement...
    J'ai eu beau modifier les options, en changeant l'option /mode/ en "max" il y a les barres et en "full" c'est centré avec des bords sur les cotés, je ne sais plus comment j'avais modifié tout ça.
    Jonathan si tu as ton code sous la main...
  • gravatar
    Ouais je vais voir mais j'ai une question l'image en http://.........fr on peut la remplacer par une image de mon PC ?
    Pour ta question je cherche mais tu parle de quelle image, de la tienne ou celle de Martine ?
  • gravatar
    j'en profite pour me faire de la pub avec mon site web de magie (ouhouhouhou il se fait de la pub :)) t allez dans la catégorie forum vous verrez l'image adapté !!!
    PS:Ce site est en pleine construction donc il est en perpétuelle amélioration !
  • gravatar
    Donc voila mon site web : http://jonathanlemagicien.franceserv.fr
  • gravatar
    Hello, bonjour tous les deux !

    J'Ă©tais partie quelques jours alors je viens juste de vous lire.

    Dur dur ! je ne comprends pas votre notion de "répertoire" ! ? et vous en parlez tous les deux alors :-(

    Mon image est bonne en principe.

    D'aprÚs ce que je crois, on ne peut pas prendre une image sur notre DD, il faut que tout le monde y ait accÚs et si c'est sur notre DD ce ne sera pas possible. Donc, il faut relever l'adresse sur le net, ça je le fais, sur canalblog, dans le cadre d'un nouveau message. C'est un "truc" que je sais faire mais le répertoire ............... nom d'un chien je me demande bien ce que c'est !

    C'est gentil de vouloir m'aider, merci Ă  tous les deux. On va peut-ĂȘtre finir par y arriver !
  • gravatar
    oui l'image de martine : http://storage.canalblog.com/87/97/948789/72092302.jpg

    Evidemment tu peux la remplacer par n'importe quelle image.

    "Pour ta question je cherche" Tu cherches quoi ? Donne ton code si tu l'as ça prends 30 scdes ;-)

    Je viens de regarder ton site il est sympa, encore quelques efforts et ce sera impec.

    Sinon personnellement je cherche depuis un moment Ă  recup le code suivant afin de pouvoir le modifier : http://www.tuttifruity.fr/
    c'est du wordpress (BLANK-Theme)

    Le hic c'est que le css est assez bordélique, donc l'utiliser manuellement sans php me ferai perdre trop de temps, si quelqu'un l'avais en mode clair (c'est pour un site hors ligne - intranet) ce serai vraiment chouette.

    Je ne cherche pas les liens dynamiques à droite, juste la date à gauche et le texte (pas forcément extensible) à droite de cette date.
  • gravatar
    le répertoire c'est le dossier ou tu met tes images !
    Et on te demande si tu as bien mis les bgmax.min.js et bgmax.src.js dans le mĂȘme dossier que ta page html oĂč tu as tapĂ©e le code !!!
    Sinon Karn j'ai du mal Ă  afficher mon image en fondu !
    As tu un conseil ?
  • gravatar
    Messages croisés avec martine...

    Pour le fondu rien de plus simple :
    fadeAfter : 0, //toujours fondu
    fadeOptions : { duration : 5000 } // durée
  • gravatar
    voilà vite fais un code, mais le "hic" c'est ces barres de défilement (ou le centrage comme ici pour les éviter) alors qu'il ne devrait pas y en avoir.
    J'aurai du garder mon html lorsque j'avais utiliser ce script :

    <script type="text/javascript">
    bgMax.init('test.jpg', {
    mode : "full",
    position : "fixed",
    enlarge : 0,
        fadeAfter : 0,
        fadeOptions : { duration : 5000 }
    });
    </script>
  • gravatar
    oui mais pour ton premier message :
    fadeAfter : 0, //toujours fondu
    fadeOptions : { duration : 5000 } // durée
    oĂč dois-je copier ce code ?
    voici mon code avec bg max.init dis moi ou placer fade after:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
        <head>
             <title>essai</title>
             <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link rel="stylesheet" media="screen" type="text/css" title="design" href="design.css" />
        <script src="bgMax.min.js" type="text/javascript"></script>
        </head>
        <body>
    c'est un essai
         <script type="text/javascript">
    bgMax.init("http://monimage/uploads/Imagecompressee.jpg");
        </script>
        </body>
    </html>
    réponds vite !
  • gravatar
    ok merci karn c'est bon j'ai réussi mais le mode "full" n'adaptait pas mon image je l'ai enlevé merci quand meme ! :)
  • gravatar
    C'est max par défaut, mais tu n'as pas des barres de défilement indésirable ?

    -pour les options c'est tout simplement dans le body :

    <body>

    <script type="text/javascript">
    bgMax.init('image.jpg', {
    les options
    });
    </script>


    </body>
  • gravatar
    oui alors je te dis j'ai copié ton code de ton précédent message en changeant l'image et en enlvant mode:full et j'ai mon image en fondu parfaitement adapté à la résolution de mon pc et celle des visiteurs et :aucune barre de défilement indésirable va voir sur mon site je te passe le lien(ps: c'est mon site de magie , il est en pleine construction) donc voila le lien : http://jonathanlemagicien.franceserv.fr/forum.php
    voila dis moi tes questions :)
  • gravatar
    ha oui sans le mode : "full",
    pourtant en mode : "max", l'erreur est bien la !

    parfois il ne faut pas chercher :)

    martine tu en es ou ?
  • gravatar
    quel est le but du mode max ?
    eh oui c'est vrai elle est lĂ  ou pas martine ?
  • gravatar
    Regarde les options en haut de la page

    mode     String     mode d'ajustement de l'image.
    max : l'image occupe toute la largeur de la fenĂȘtre, quite Ă  dĂ©border dans la hauteur.
    full : l'image tient toute entiĂšre dans la fenĂȘtre, en occupant autant de place que possible.
    Defaut : max

    "martine fais du html " "martine essaye de mettre 2 fichiers dans un répertoire"
    Non, je vais éviter les jeux de mots facile sur martine, il y en déjà tellement sur le net ;-)
  • gravatar
    merci mon site s'améliore :)
  • gravatar
    hello,

    Tu devrai peut-ĂȘtre mettre un target="_blank" sur le href, afin que ton site reste toujours ouvert mĂȘme lorsqu'on va sur ta page youtube.

    Mais ce n'est que mon avis.
  • gravatar
  • gravatar
    en haut Ă  gauche ou c'est Ă©cris "ton nom et qui mĂšne sur http://www.youtube.com/user/jonathanlemagicien?feature=mhee
  • gravatar
    JE COMPRENDS MERCI BONNE ID2E JE VASIVOIR
  • gravatar
    au fait mon site s'adapte il a ta résolution ?
  • gravatar
    Oui, sur opera, firefox et google chrome pas de problĂšme.
  • gravatar
    et internet ? je carins le pire de ce navigateur horrible :p !
  • gravatar
    Sur internet ?
    Tu dois vouloir dire IE. Je ne sais pas je n'ai pas ce navigateur.

    Tu as fais une page de style pour ton site ? (je n'ai pas regardé le code).
  • gravatar
    ouias ie parce que je déteste ce naviguateur !
  • gravatar
    Moi je l'aime bien en interne (non connecté à internet) il accepte tous les formats audios et vidéo sans intégrer de lecteur flash :D

    Bref tu t'en fous que ça ne fonctionne pas sous IE, à priori ton site ne vise pas ce genre de public.
  • gravatar
    mouais mais quand meme ! au fait c'est bon jai mis target blank ^^
  • gravatar
    tu es la martine ?
  • gravatar
    Oui mais j'essaye de mettre deux fichiers dans un dossier !!!
  • gravatar
    OK c'Ă©tait une blague...

    En mĂȘme temps il n'y a aucun processus d'identification et je suis Ă©tonnĂ© que personne ne vienne "pourrir" les commentaires.

    Comme quoi tout est possible, mĂȘme sur internet.
  • gravatar
    Salut,
    N'ayant aucune connaissances en html ou en css, je me suis servi d'un template récupéré chez un pote que j'ai modifié avec kompozer (wysiwyg oblige!).
    J'aimerais savoir ou integrer ce code pour ne pas modifier l'ensemble de la structure de mon site http://kickcontact57.franceserv.com/index.html .
    par avance merci.
  • gravatar
    je pense avoir oublié de vous communiquer le css:
    /* CSS RESET */
    html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;}

    body {font:13px/1.231 arial,helvetica,clean,sans-serif;}table{font-size:inherit;font-size:100%;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}
    /* CSS RESET */


    body {
        text-align:center;
        color:#fff;
        margin:0;
    padding:0;
        background:url(images/bg.png) no-repeat center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    a {
        text-decoration:none;
             color:#fff
    }
    a:hover {
        text-decoration: underline;
             color:#A1E062
    }
    #wrap {
        width:1000px;
        text-align:left;
        margin:0 auto;
    }

    .fl{ float:left}
    .fr{ float:right}
    .clearfix{ clear:both}



    /* header */
    #header { position:relative;height:260px }
    #logo {position:absolute; top:60px; right:130px}
    #logo h1 {
        font-size:34px;
        color:#fff
    }
    #logo div {
        padding-left:100px
    }
    #nav { position:absolute; top:180px; left:470px; background:url(images/nav.jpg); width:529px;height:42px; line-height:42px; }
    #nav li {float:left; font-weight:700; width:100px;background:url(images/nav_b.jpg) no-repeat ; }
    #nav li.first {background: none}
    #nav a {text-decoration:none; display:block; text-align:center;}
    #nav a:hover {background:url(images/nav_hover.jpg);margin:0 0 0 5px}
    /* content */
    #content { }
    .main {width:470px; font-family:Verdana, Arial, Helvetica, sans-serif;}
    #text {width:430px; }
    #text h2 {font-size:30px; padding-bottom:20px}
    #text p img {float:left; padding:0 20px 0 0}
    #text a { color:#A1E062}
    #col {margin:50px 0 0 0; background:url(images/col.jpg); height:156px ; }

    #col div {width: 180px; margin: 20px 0 0 40px; display:inline}
    #col .first {margin: 20px 0 0 20px }
    #col li{line-height:20px;}
    #col .first ul {border-right:#EEE 1px solid; }

    .side { width:430px;display: inline; background: url(images/side.gif) no-repeat; height:537px}
    .side h2 {font-size:22px}
    .sideinner img{margin:35px 0 30px 65px;}
    .sideinner h3 a{font-size:34px;
        color:#900000; margin:0 0 0 135px;}
    /* footer */
    #footer { background:url(images/ft.jpg); height:133px; position:relative}
    #ftinner{ position:absolute; bottom:20px; width:680px; margin-left:120px}
    .ftlink {width:500px;}
    #wrap #content .side.fl .sideinner span span div pre small big big big {
        color: #00F;
    }
    #wrap #content .side.fl .sideinner span span div a big {
        color: #00F;
    }
  • gravatar
    Hello,

    Dans le <head> tu ajoutes ceci :
    <script src="bgMax.min.js" type="text/javascript"></script>

    Et dans le <body> (au départ de celui-ci, avant tes <div id=) :

    bgMax.init('ton-image.jpg', {
    position : "fixed",
    enlarge : 0,
    fadeAfter : 0,
    fadeOptions : { duration : 5000 }
    });
    </script>

    Modifie les options* Ă  ta guise et mets l'image dans le mĂȘme rĂ©pertoire que le script et que ton index pour ne pas te compliquer la vie.

    * : Les options sont définis au début de cette page.
  • gravatar
    .. le css n'a aucune importance dans le cas présent.
  • gravatar
    Merci Karn
  • gravatar
    De rien, d'autant que j'ai oublié une ligne avant "bgMax.init" :

    <script type="text/javascript">
  • gravatar
    martine tu a réussi ?
    enfin de nouveaux visiteurs !!!ca faisait longtemps !
  • gravatar
    Merci,
    sans vouloir faire le boulet :-)
    et pour ie 7 ,
  • gravatar
  • gravatar
    Essaye ça dans le <head> et dis nous si ça fonctionne :

    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  • gravatar
    J'ai trouvé ça aussi mais bon pas plus avancé : http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html
    Sinon Karn j'ai réussi grace à toi sur opera ,firefox,safari (en local), je ne mets pas encore en ligne car les utilisateurs de ie vont trouver ça trop moche!:(
  • gravatar
    Non <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    ne marche pas!
  • gravatar
    Donc ça ne fonctionne pas si j'ai bien compris ?
    Tu mets une alerte "veuillez mettre votre navigateur Ă  jour"
    ou "vous me soulez avec IE inférieur a 9".

    Je ne pourrai de toute façon pas t'aider, j'ai supprimé tout mon code quand j'ai vu que ça ne fonctionnais pas sous IE (le mec tenait absolument à ce que ça passe sous ce navigateur).

    A moins que l'auteur du script ne fasse ré-apparition surprise un jour...
  • gravatar
    J'ai l'air idiot avec ta réponse qui arrive avant ma question :)
  • gravatar
    Le plus idiot de nous 2 dans ce domaine c'est moi! :)
    Merci tout de mĂȘme.
  • gravatar
    je crois que pour assurer la compatibilité avec IE inférieur à 9 il faut faire le code que Karn t'a donné et créer une page html en lien avec ce code .....j'avais vu ça quelque part sur le site du zéro, si tu connais !
    bonne continuation !
  • gravatar
    Sa ne semble pas fonctionné non plus sous IE9... pas de problÚme avec firefox ou chrome

    Avez-vous une idée comment contourné le problÚme ?
  • gravatar
  • gravatar
    Sa fonctionne en modificant finalement certaines options, mais du coup mon texte décale....

    Voici un exemple :
    Tout fonctionne bien sous chrome mais le texte est en bas de la page sous IE9
    http://quiosegagne.sbiplus.ca/chat/indextest.php

    Donc j'ai sois mon image qui se redimensionne sans le texte ou le texte sans que l'image se redimensionne correctement.
  • gravatar
    Bonsoir Pascal,

    Sous opera et firefox aussi c'est impeccable.
    Mets un if qui dis ne pas exécuter le script pour IE, tu dois trouver ça sans problÚme.
    Par contre du coup sous IE plus d'image, je te conseil d'essayer une alternative type "si IE = image", en prenant un code qui ne sera compris que par ce navigateur Ă  problĂšme.

    En résumé :
    - si IE n''exécute pas ce script
    - si IE charge cette image (Ă  la place du script donc)
  • gravatar
    Ok merci Ă  toi
  • gravatar
    var options = {
        position : "fixed"
    };
    bgMax.init("http://quiosegagne.sbiplus.ca/chat/themes/default/images/fond-loup.jpg", options);

    Vu la façon dont tu as tourné les choses ça ne devrait pas te poser de problÚme...
    Tu nous donnera le code qui élimine IE que ce sois enfin réglé ?
  • gravatar
    Je suis le sujet, mais je laisse les grands parler! :)
  • gravatar
    Carambar, l'auteur n'assurant plus le support de ses scripts toute question est la bienvenue.

    Perso je ne fais ni du java ni du html ni aucun site (sauf un truc intranet mais bon).. j'essaye juste de filer une petite aide, à défaut que l'on réponde à mes questions sur le css de word-press.

    Tout comme toi je suis venu ici au début 2010 car j'avais un problÚme avec IE... j'ai depuis les notifications par mail de nouveau messages.

    Ton pseudo me fais rire, les carambars existent encore ?
  • gravatar
    (début 2011 sorry, ce serait bien que l'on puisse éditer)
  • gravatar
    oui en fait moi aussi j'aimerai bien le script que tu auras trouvé pascal ca m'aiderait !!!
    merci d'avance !
  • gravatar
    Personne n'a essayé jqhery ? http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html
  • gravatar
    Si, c'est Ă  priori impeccable avec, mais on sors de ce script donc ...
  • gravatar
    Bonjour,
    ce script fonctionne trĂšs bien pour mes besoins.
    En revanche, utilisant jquery pour d'autres fonctionnalités et ne souhaitant pas mettre de balise script dans mes pages html, je tente de lancer bgMax via jQuery sans succÚs, un truc du genre :

    $(function() {
        $('body').bgMax.init(function('img/fond.jpg', {
                       mode : "full", align : "center", position : "fixed"
                  }));
    });
    Sur cette syntaxe, j'obtiens par exemple : missing formal parameter qui pointe sur un soucis au niveau du paramĂštre de l'image.

    Si l'un d'entre vous a déjà intégré bgMax via jQuery avec succÚs, je suis preneur.
    Et merci d'avance.
  • gravatar
    l'erreur est toute bĂȘte, j'ai inutilement mis une rĂ©fĂ©rence Ă  jQuery dans l'appel de ma fonction.
    Donc en supprimant $('body'). de $('body').bgMax.init, cela marche beaucoup mieux.

    Bonne continuation.
  • gravatar
    Salut,
    Karn, je te rappelle que je revendique le statut de roi des idiots :)!
    Donc s'agissant de jquery, il faut faire quoi exactement?
    1 Copier :
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Fond extensible - version JQUERY</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen">
    </head>

    <body>
    <img src="image/bg.jpg" class="superbg" />
    <script src="script/jquery.js" type="text/javascript"></script>
    <script src="script/background.js" type="text/javascript"></script>     
    </body>
    </html>
    en indiquant le chemin de l'image lĂ :"<img src="image/bg.jpg",
    2 coller img.superbg {
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    }
    dans le css,
    créer un fichier jquery.js avec le code indiqué.
    C'est bien ça?
  • gravatar
    J'ai trouvé la solution au problÚme de texte qui se ramasse sous l'image dans IE.
    IE n'aime pas la position:fixed

    Pour contourner il faut mettre dans le haut de sa page ceci :
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
  • gravatar
    Tu as testé sous IE <9 pascal ?

    Je ne suis pas certain que les versions prĂ©cĂ©dentes comprenaient le XHTML (un tour sur google me montre d'ailleurs que c'est non "CĂŽtĂ© XHTML, point de salut. Il faut savoir que IE ne reconnaĂźt pas XHTML, mĂȘme IE7, et le lit comme s'il s'agissait simplement de HTML."

    // Concernant le script de alsaceforum il y a un forum la bas, personne ne réponds ?
  • gravatar
    Chupa chups (j'adore vos pseudo ;)

    donc en jquery tu as :

    $(function() {
    bgMax.init(function('img/fond.jpg', {
    mode : "full", align : "center", position : "fixed"
    }));
    });

    C'est bien ça ? Ce serait bien de faire un copier de votre code quand il fonctionne, ça servira toujours pour un autre.
  • gravatar
    ce pseudo est un hommage Ă  Carambar, je voulais rester dans une certaine logique.

    Pour jQuery, c'est cela si ce n'est que j'ai mis une parenthÚse de trop dans la rédaction de ce billet.
    Procédons par étapes si tu préfÚres :
    1 - procédure classique expliquée par l'auteur et les bloggeurs, le code est dans la page html,
    2- on se fixe pour objectif de sortir la partie script du html : pour info, le html ne devrait contenir que du "contenu", le style devant toujours se trouver dans les css, les scripts dans les fichiers Js (ou autres),
    3 - on commence par référencer dans notre page html la librairie jQuery avec un classique :
    <script src="dossierDesScripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    entre les balises <head> du html
    4 - on créé, éventuellement, notre propre fichier script launcher.js qui va nous servir à exécuter certaines fonctionnalités, ici le lancement de bgMax :
    <script src="dossierDesScripts/launcher.js" type="text/javascript"></script> : celui ci doit ĂȘtre rĂ©fĂ©rencĂ© aprĂšs la librairies jQuery,
    5 - on retire du fichier html les balises scripts comportant l'appel Ă  bgMax et on place le code dans notre launcher.js :
    $(function() {
    bgMax.init('img/fond.jpg', {
    mode : "full",
    align : "center",
    position : "fixed",
    enlarge : false,
    reduce : true,
    fadeAfter : true
    });
    });

    6 - pour information, la syntaxe
    $(function() {
    //todo
    });
    remplace l'ancienne syntaxe plus commune et toujours valable
    $(document).ready(function() {
    //todo
    });
    En gros, cela signifie que lorsque la page sera complÚtement chargée, on veut exécuter bgMax.init()

    7 - Et comme l'on est sérieux, on pense aux utilisateurs qui désactivent javascript et qui donc ne bénéficieront pas de bgMax entre autre, et donc on inclue une balise
    <noscript><div id="background-sansjs"></div></noscript>
    qui s'exécutera uniquement dans ce cas et affichera notre fond centré grùce à une feuille de style css, mais ceci est une autre histoire.

    8 - concernant tous les scripts ou feuilles de style qui prétendent afficher des images en plein écran, comme cette référence au trÚs bon site d'alsa.., aucune solution ne fonctionne en réalité, je dis bien aucune : prenez une grande image, et pour peu que vous possédiez des barres d'outils dans vos navigateurs, tous vos background seront tronqués en haut, en bas, à gauche, à droite : désactiver une à une vos barres d'outils pour le constater.

    Pour la mise en application de bgMax et de noscript, voir la mise en application sur ce site en construction : http://www.bobleblobb.fr
  • gravatar
    En bas de votre menu, il est Ă©crit "Souternir webbricks" au lieu de "Soutenir webbricks". C'est juste une petite faute, mais bon...
  • gravatar
    Merci infiniment! Ton script m'a sauvé! Merci aussi à C. pour l'astuce "Afficher le contenu du paquet" sous Mac!
  • gravatar
    excellent script ! je viens enfin de le faire fonctionner apres 2 semaines de maux de tetes ! Script trouver en lisant le code source d'un tres beau site de photos culinaires et je voulait copier (un peu ;) ) son style !
    Mais comme je suis un gros nulard en programmation web et tuti cuanti , je n'ai pas bien compris l'utilisation des options ! Est ce qu'on les incluent dans le script declencheur (entre les body) ou il faut rajouter un script ?
    Le debut de mon site (je teste simplement la page d'acceuil) :
    http://www.zoomzenphoto.fr/zoomzenessai/index.html
    si le serveur veut bien repondre car je suis chez HostPapa ! Hebergeur a fuir absolument !!
    merci a tous
  • gravatar
    Bonjour et merci pour ce script, qui est vraiment ce que je recherchais.
    Maintenant j'ai une nouvelle question : :D
    Vu que ça marche pour le background, je voudrais le faire dans une "div".
    Pour ĂȘtre plus prĂ©cis, je voudrais mettre une photo qui Ă©volue avec la taille de la page dans une div centrale.
    Je me doute qu'il doit falloir changer "win" (la fenĂȘtre entiĂšre), par le nom de ma div. Mais je ne sais pas Ă  quel endroit le faire.

    Donc si vous avez des idées je suis preneur. ;)
    Merci d'avance pour vos réponses.
    A+
    Xabix
  • NavrĂ©, le formulaire de commentaires est temporairement indisponible.