Dans cette page
Plus de scripts

Différez l'exécution des javascripts : Assainir son code et accélérer l'affichage des pages, en reportant l'exécution des script jusqu'au moment ou le DOM est prêt. Fonctionne aussi en duo avec des librairies telles que jQuery, pour augmenter encore leur souplesse et leurs performances.

script suivant - tous les scripts
Gardons le contact

background

image

taille

�cran

fen�tre

fondu

apparition

fond

adapt�

script

javascript

php

css

Un background-image toujours adapté aux mesures de la fenêtre du visiteur, avec en prime une apparition en fondu.

IMAGE DE FOND AJUSTÉE

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.

effets spéciaux - image

Commentaires

Publier un nouveau commentaire
Mirmo le 21 juillet 2010, à 13h42

Bonjour,
Que faut il modifier dans le script pour que l'image ne s'adapte pas proportionnellement mais seulement en largeur?
Merci
Abrab le 23 juillet 2010, à 11h51

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é.
Sylvie le 24 juillet 2010, à 16h57

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 !
Abrab le 24 juillet 2010, à 19h10

Salut Sylvie.
"bgMax.download" est un dossier. En l'ouvrant, tu trouveras les fichiers javascript.
Sylvie Matthes le 24 juillet 2010, à 19h16

Oui j'ai bien compris ... mais chez moi il apparaît sous forme d'un fichier !
Sylvie le 25 juillet 2010, à 17h39

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 !
Mirmo le 26 juillet 2010, à 14h18

Merci pour l'aide! Ton script est vraiment sympa!
Abrab le 27 juillet 2010, à 19h32

@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.
Buluk le 03 août 2010, à 0h06

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>
Abrab le 03 août 2010, à 12h45

Comme ça ça devrait aller :
bgMax.init('image.jpg', { mode : "full", position : "fixed", enlarge : 0, fadeAfter : 0 });
Buluk le 03 août 2010, à 15h17

Un grand merci pour ton aide "Abrab".

C'est vraiment génial !
C. le 13 août 2010, à 5h04

@Sylvie :
Sous Mac : l'action "Afficher le contenu du paquet" du menu contextuel permet d'accéder aux fichiers

@Abrab :
Chouette script !
Albert le 15 août 2010, à 9h03

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?
:)
Abrab le 15 août 2010, à 10h06

@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.
Albert le 15 août 2010, à 11h38

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!
nicolas le 23 août 2010, à 0h32

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.
Sylvie le 25 août 2010, à 16h58

@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 !
nicolas le 25 août 2010, à 23h08

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
nicolas le 25 août 2010, à 23h12

Pour l'instant ca donne ca, et c'est pas tres beau

http://img163.imageshack.us/img163/9089/exemplev.jpg
nicolas le 25 août 2010, à 23h14

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
nicolas le 25 août 2010, à 23h23

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
Abrab le 28 août 2010, à 7h16

Je su%u0131s en Turquie pour le moment. Pas trop le temps de t'aider...
So%u0131s patient...
cedrique30 le 29 août 2010, à 15h24

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....
Abrab le 01 septembre 2010, à 14h32

@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.
Abrab le 01 septembre 2010, à 21h03

@nicolas : pareil
Fildefer le 07 septembre 2010, à 21h08

Sympa, je vais essayer de l'utiliser sur mon site. Je te mettrais en crédit.
luu le 08 septembre 2010, à 19h13

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 :)
Sylvie le 08 septembre 2010, à 19h25

@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".
luu le 08 septembre 2010, à 19h29

Ca marche !!

Merci beaucoup!!!! :))
manit4c le 10 septembre 2010, à 9h56

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/
Borniol le 17 septembre 2010, à 22h19

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 :)
thegrau le 12 novembre 2010, à 8h56

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 !
Kmmooo le 21 novembre 2010, à 1h45

C'est TROP fort!! Un Grand merKi !
bryan le 22 novembre 2010, à 17h35

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
bryan le 22 novembre 2010, à 18h17

<!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>
steph le 28 novembre 2010, à 18h49

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>
emiamike le 10 décembre 2010, à 10h59

ce script semble être parfait, cependant peut-on centrer verticalement le background ?
Abrab le 12 décembre 2010, à 11h53

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.
emiamike le 14 décembre 2010, à 11h36

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 ?
Abrab le 14 décembre 2010, à 13h07

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.
emiamike le 15 décembre 2010, à 22h07

Merci beaucoup, je viens de vous envoyer mon adresse ....
Abrab le 19 décembre 2010, à 14h47

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.
rachat credit le 24 décembre 2010, à 9h09

J'ai appris des choses interessantes grace a vous, et vous m'avez aide a resoudre un probleme, merci.

- Daniel
Lorraine le 05 janvier 2011, à 15h39

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
O_oFredo_O le 05 janvier 2011, à 18h20

Ce script est super, il me rend grand service. Bravo à toi , très bon travail!!!
thierry le 12 janvier 2011, à 6h18

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
Jeremie le 25 janvier 2011, à 16h52

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.
karn le 29 janvier 2011, à 1h36

Bonjour,

le script est impeccable merci.
Un truc que je ne comprends pas c'est pour ajuster le texte sur l'image ensuite.
Michel le 06 février 2011, à 20h13

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
nat le 10 février 2011, à 17h18

@ 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
nat le 10 février 2011, à 17h19

surtout pas le "file:///C:"
Manu le 11 février 2011, à 15h54

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
biloubil le 24 février 2011, à 16h48

hello Manu
essaie :
<script type="text/javascript">
au lieu de :
<script type=\"text/javascript\">
biloubil le 24 février 2011, à 16h50

Petite suggestion ! Afficher les dates des commentaires ce serait bien......

Merci pour tout
Elsa le 26 février 2011, à 12h56

Bravo et merci pour ce script ! ça marche nickel :)
karn le 26 février 2011, à 13h07

sauf pour mettre du texte par dessus .. et c'est bien dommage
Manu le 26 février 2011, à 22h06

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
Bill le 06 mars 2011, à 21h46

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.
Malik le 15 avril 2011, à 21h57

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
karn le 15 avril 2011, à 22h27

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.
karn le 15 avril 2011, à 22h27

ps > 15/04/11
Malik le 15 avril 2011, à 22h40

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 ... ?
Malik le 15 avril 2011, à 22h50

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/
karn le 15 avril 2011, à 23h21

Tu mets son nom dans le code source. Et basta.
Malik le 16 avril 2011, à 0h10

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>
karn le 16 avril 2011, à 8h51

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.
Malik le 16 avril 2011, à 15h18

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
Malik le 16 avril 2011, à 15h43

En plus, je ne peux ni zoomer sur l'image ni "dézoomer".
Malik le 16 avril 2011, à 15h46

Et l'image n?apparaît pas en fondu
Lechuck le 06 mai 2011, à 23h31

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
karn le 07 mai 2011, à 1h05

(c) Lechuck 07.05.11
Sylvie le 07 mai 2011, à 18h57

T'as pas un $ qui manque ? $ligne_game[$Bezel]
parce que c'est probablement une variable dans tes parenthèse carrées ...
lechuck le 07 mai 2011, à 19h23

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"
Sylvie le 07 mai 2011, à 21h31

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 !
karn le 07 mai 2011, à 21h56

07.05.11

Qui datait de quand Sylvie ?

j'ai du mal à voir dans le temps à quand remontent les premières question?
Sylvie le 07 mai 2011, à 22h04

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 ...
Lechuck le 07 mai 2011, à 22h30

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 :)
wanta le 17 mai 2011, à 0h21

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 ?
Milou le 24 mai 2011, à 22h04

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
LiLi le 03 juin 2011, à 12h01

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>
Aurelweb le 18 juin 2011, à 19h32

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
Aurelweb le 18 juin 2011, à 19h33

J'ai oublier de préciser que je n'ai aucune image qui s'affiche en mettant le script
bENJISTIK le 23 juin 2011, à 13h39

J'ai testé sur un site Client sous Joomla et c'est vraiment la classe ! Bravo, très bon travail :)
Jeff le 11 juillet 2011, à 3h12

"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 ..
Jeff le 11 juillet 2011, à 3h31

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.
Jeff le 11 juillet 2011, à 4h06

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.
Jeff le 11 juillet 2011, à 8h03

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.
Eric le 01 août 2011, à 10h06

Merci, c'est exactement ce que je cherchais. Et avec les paramètres, j'arrive à ce que je voulais....
encore Merci
Al le 05 août 2011, à 10h43

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.
Al le 05 août 2011, à 10h59

FadeAfter: false

;-)
dinush le 11 septembre 2011, à 18h08

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
Claire le 19 septembre 2011, à 21h52

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
Jonathan le 09 octobre 2011, à 17h55

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!
Voiture le 25 octobre 2011, à 16h24

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.
Melicente le 29 octobre 2011, à 18h44

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?
nico le 14 novembre 2011, à 15h31

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>




<html <?php language_attributes(); ?>>


<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' ); ?>" />

<?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>
Jonathan le 14 novembre 2011, à 21h43

Il faudrait taper un code pour assurer la compatibilité avec IE !!!
Je te dis çà demain !!!
nico le 15 novembre 2011, à 11h59

super! merci pour le coup de main
nico le 17 novembre 2011, à 11h02

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?
JEFF le 17 novembre 2011, à 11h17

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...
Ouael le 17 novembre 2011, à 16h53

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 !
Jonathan le 17 novembre 2011, à 19h11

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





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" />

<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
Ian Letourneau le 17 novembre 2011, à 21h53

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.
Karn le 18 novembre 2011, à 7h16

@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.
Karn le 18 novembre 2011, à 7h19

@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 ?
Ian Letourneau le 18 novembre 2011, à 10h36

@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 ;)
Karn le 18 novembre 2011, à 12h49

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.
Jonathan le 20 novembre 2011, à 18h35

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 :)
Karn le 20 novembre 2011, à 18h47

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.
Jonathan le 22 novembre 2011, à 20h25

Oui, c'est vrai que le site du zéro est vraiment génial :) !
Hosni le 23 novembre 2011, à 11h01

C'est un excellent example. ca m'a été personnellement utile.
Jonathan le 24 novembre 2011, à 21h54

De rien je connais même l'un des créateurs !!! ;)
nico le 01 décembre 2011, à 8h34

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?
Jonathan le 01 décembre 2011, à 16h41

Comment tu veux dire que les deux images sont cote a cote ?
Précise !
nico le 01 décembre 2011, à 17h45

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...
Jonathan le 03 décembre 2011, à 13h51

Mmmh....
Je vais chercher et je vais me renseigner Nico !
Merci tu m'as donné un défi !!! ;)
Karn le 04 décembre 2011, à 10h16

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.
Jonathan le 04 décembre 2011, à 15h02

Mouais pareil !
Je vais continuer à chercher !
Kevin le 04 décembre 2011, à 21h14

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.
nico le 04 décembre 2011, à 21h38

hello Kevin
essaie :
<script type="text/javascript">
au lieu de :
<script type=\"text/javascript\">
Jonathan le 05 décembre 2011, à 18h52

Oui merci Nico ca m'a aussi aidé
cyrber le 06 décembre 2011, à 2h03

Bonjour
Super module, mais ... comment ajouter un lien sur le fond ? Une idée m?intéresserait beaucoup.
Merci d'avance
Jonathan le 06 décembre 2011, à 16h55

Il doit y avoir une propriété pour ca ...
Je vais encore chercher !!!
Jonathan le 18 décembre 2011, à 12h21

Je trouve pas aidez-moi !!!!!!!!!!!!
Karn le 18 décembre 2011, à 13h06

@crash__ sur twitter il va te dire vite fais comment faire.
Karn le 18 décembre 2011, à 13h07

http://twitter.com/#!/crash__
nico le 19 décembre 2011, à 8h31

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?
Jonathan le 22 décembre 2011, à 15h32

non desolé
Martine le 10 janvier 2012, à 15h40

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.
Nico le 10 janvier 2012, à 16h15

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à.
Martine le 10 janvier 2012, à 17h12

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.
Martine le 10 janvier 2012, à 17h23

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 !
Jonathan le 11 janvier 2012, à 17h31

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 !
Martine le 12 janvier 2012, à 11h48

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 !
Jonathan le 12 janvier 2012, à 19h57

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
Martine le 13 janvier 2012, à 14h19

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
Jonathan le 14 janvier 2012, à 21h07

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 !
Martine le 14 janvier 2012, à 21h31

Non, pas un Mac :-) mais windows 7
Bon courage, j'espère que tu vas trouver sans trop de peine, bonne soirée
Jonathan le 16 janvier 2012, à 17h05

je cherche je cherche !!! :p
Martine le 16 janvier 2012, à 17h07

C'est sympa, je te remercie et j'espère que tu trouveras ! bon courage !
Thomas le 19 janvier 2012, à 14h58

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?
Martine le 19 janvier 2012, à 16h22

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.
Jonathan le 19 janvier 2012, à 18h24

c'est bon je suis la mais c'est juste que le site était bloqué un certain temps ,vous avez vu ?
Martine le 19 janvier 2012, à 18h53

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à !
Jonathan le 19 janvier 2012, à 21h48

ouais mias ca m'énerve je trouve pas alors que je l'ai déjà fait !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
ouiiiiiiiiiiiin
Martine le 19 janvier 2012, à 21h53

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.
Jonathan le 20 janvier 2012, à 17h32

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 !
Karn le 20 janvier 2012, à 18h00

hello,

Martine tu pourrai montrer ton code, ce serait plus aisé de trouver l'erreur provoquée par le script.
Martine le 20 janvier 2012, à 18h23

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
Karn le 20 janvier 2012, à 19h50

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"></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>

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

<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>"
Martine le 20 janvier 2012, à 20h01

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.
Karn le 20 janvier 2012, à 22h14

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.
Martine le 21 janvier 2012, à 17h34

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.
Karn le 21 janvier 2012, à 22h12

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 ?
Karn le 21 janvier 2012, à 22h14

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.
Martine le 22 janvier 2012, à 11h35

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 !
Karn le 22 janvier 2012, à 12h14

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.
Jonathan le 24 janvier 2012, à 17h28

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 !
Karn le 24 janvier 2012, à 19h03

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...
Jonathan le 24 janvier 2012, à 19h29

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 ?
Jonathan le 24 janvier 2012, à 19h31

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 !
Jonathan le 24 janvier 2012, à 19h31

Donc voila mon site web : http://jonathanlemagicien.franceserv.fr
Martine le 24 janvier 2012, à 19h41

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 !
Karn le 24 janvier 2012, à 19h49

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.
Jonathan le 24 janvier 2012, à 19h58

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 ?
Karn le 24 janvier 2012, à 20h31

Messages croisés avec martine...

Pour le fondu rien de plus simple :
fadeAfter : 0, //toujours fondu
fadeOptions : { duration : 5000 } // durée
Karn le 24 janvier 2012, à 20h34

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>
Jonathan le 25 janvier 2012, à 14h12

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 !
Jonathan le 25 janvier 2012, à 18h02

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 ! :)
karn le 25 janvier 2012, à 18h09

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>
Jonathan le 25 janvier 2012, à 18h35

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 :)
karn le 25 janvier 2012, à 20h01

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 ?
Jonathan le 25 janvier 2012, à 20h54

quel est le but du mode max ?
eh oui c'est vrai elle est là ou pas martine ?
karn le 25 janvier 2012, à 21h30

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 ;-)
Jonathan le 26 janvier 2012, à 15h10

merci mon site s'améliore :)
Karn le 26 janvier 2012, à 21h28

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.
Jonathan le 27 janvier 2012, à 16h36

sur quel href ?
Karn le 27 janvier 2012, à 21h00

en haut à gauche ou c'est écris "ton nom et qui mène sur http://www.youtube.com/user/jonathanlemagicien?feature=mhee
Jonathan le 28 janvier 2012, à 12h29

JE COMPRENDS MERCI BONNE ID2E JE VASIVOIR
Jonathan le 28 janvier 2012, à 12h33

au fait mon site s'adapte il a ta résolution ?
Karn le 28 janvier 2012, à 13h06

Oui, sur opera, firefox et google chrome pas de problème.
Jonathan le 28 janvier 2012, à 13h39

et internet ? je carins le pire de ce navigateur horrible :p !
Karn le 28 janvier 2012, à 14h22

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).
Jonathan le 28 janvier 2012, à 15h03

ouias ie parce que je déteste ce naviguateur !
Karn le 28 janvier 2012, à 18h44

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.
Jonathan le 28 janvier 2012, à 22h04

mouais mais quand meme ! au fait c'est bon jai mis target blank ^^
Jonathan le 29 janvier 2012, à 17h16

tu es la martine ?
Martine le 29 janvier 2012, à 17h19

Oui mais j'essaye de mettre deux fichiers dans un dossier !!!
karn le 29 janvier 2012, à 18h22

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.
carambar le 29 janvier 2012, à 20h47

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.
carambar le 29 janvier 2012, à 20h50

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;
}
karn le 29 janvier 2012, à 20h57

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.
karn le 29 janvier 2012, à 21h00

.. le css n'a aucune importance dans le cas présent.
carambar le 29 janvier 2012, à 21h01

Merci Karn
karn le 29 janvier 2012, à 21h16

De rien, d'autant que j'ai oublié une ligne avant "bgMax.init" :

<script type="text/javascript">
Jonathan le 29 janvier 2012, à 21h27

martine tu a réussi ?
enfin de nouveaux visiteurs !!!ca faisait longtemps !
carambar le 29 janvier 2012, à 23h06

Merci,
sans vouloir faire le boulet :-)
et pour ie 7 ,
carambar le 29 janvier 2012, à 23h07

?
karn le 29 janvier 2012, à 23h17

Essaye ça dans le <head> et dis nous si ça fonctionne :
carambar le 29 janvier 2012, à 23h23

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!:(
carambar le 30 janvier 2012, à 0h33

Non 
ne marche pas!
karn le 30 janvier 2012, à 0h34

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...
karn le 30 janvier 2012, à 0h36

J'ai l'air idiot avec ta réponse qui arrive avant ma question :)
carambar le 30 janvier 2012, à 0h50

Le plus idiot de nous 2 dans ce domaine c'est moi! :)
Merci tout de même.
Jonathan le 30 janvier 2012, à 16h28

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 !
Pascal le 30 janvier 2012, à 19h39

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 ?
Jonathan le 30 janvier 2012, à 20h16

....
Pascal le 30 janvier 2012, à 21h58

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.
karn le 30 janvier 2012, à 23h27

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)
Pascal le 30 janvier 2012, à 23h29

Ok merci à toi
karn le 30 janvier 2012, à 23h33

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é ?
carambar le 30 janvier 2012, à 23h52

Je suis le sujet, mais je laisse les grands parler! :)
karn le 31 janvier 2012, à 14h43

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 ?
karn le 31 janvier 2012, à 14h44

(début 2011 sorry, ce serait bien que l'on puisse éditer)
Jonathan le 31 janvier 2012, à 17h52

oui en fait moi aussi j'aimerai bien le script que tu auras trouvé pascal ca m'aiderait !!!
merci d'avance !
carambar le 31 janvier 2012, à 20h11

Personne n'a essayé jqhery ? http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html
karn le 31 janvier 2012, à 22h14

Si, c'est à priori impeccable avec, mais on sors de ce script donc ...
Chupa Chups le 01 février 2012, à 9h14

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.
Chupa Chups le 01 février 2012, à 10h34

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.
carambar le 01 février 2012, à 11h32

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?
Pascal le 02 février 2012, à 3h29

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">
karn le 03 février 2012, à 0h40

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 ?
karn le 03 février 2012, à 0h45

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.
Chupa Chups le 03 février 2012, à 4h52

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
Monsieur Tigre le 18 février 2012, à 15h43

En bas de votre menu, il est écrit "Souternir webbricks" au lieu de "Soutenir webbricks". C'est juste une petite faute, mais bon...
Renaud le 22 février 2012, à 21h20

Merci infiniment! Ton script m'a sauvé! Merci aussi à C. pour l'astuce "Afficher le contenu du paquet" sous Mac!
zoomzen le 24 mars 2012, à 2h27

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
xabix le 04 avril 2012, à 13h52

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.

Dans cette page

Plus de scripts

Gardons le contact