scripts - eudistes-de-france

Scripts divers

date du jour	champ de recherche	texte défilant	diaporama
image background	image agrandie souris	moteur recherche	rollover + lien
image flottante	ascenseur

date du jour (bandeau page accueil)

script champ de recherche

<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/coop/api/008934273018277043951/cse/jihlddlq97u/gadget&synd=open&w=320&h=75&title=Moteur+de+recherche+Eudistes-de-France&border=%23ffffff%7C1px%2C1px+solid+%2366ccff%7C1px%2C2px+solid+%2366ccff&output=js"></script>

script texte défilant :
<marquee Class="Scroller" behavior="scroll" direction="left" width="100%" height="19" scrollamount="4" scrolldelay="0" onmouseover="this.stop()" onmouseout="this.start()">votre texte ici</marquee>

script diaporama

t maintenant, la partie technique.
Afin de mettre en place un diaporama, procédez ainsi :

insérez le code suivant à l'emplacement souhaité :

<script src="http://so.fun.free.fr/modules/commun/scripts/diaporama_objet.js"></script>
<script>
	nouveau_id_diaporama = monDiaporama.length;
	monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 50, 10, 2000, 500, 600);
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://mon.serveur.fr/.../photo_01.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://mon.serveur.fr/.../photo_02.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://mon.serveur.fr/.../photo_03.jpg");
	monDiaporama[nouveau_id_diaporama].ajoutePhoto("http://mon.serveur.fr/.../photo_xx.jpg");
	monDiaporama[nouveau_id_diaporama].masquerPanneauCommande();
	monDiaporama[nouveau_id_diaporama].ajouteCadre(3, "#000000");
	monDiaporama[nouveau_id_diaporama].placeDiaporama();
	monDiaporama[nouveau_id_diaporama].testImagesOk();
</script>

apportez les modification suivantes :
- ligne "new Diaporama" :
  - 50 : temps, en millisecondes, entre chaque étape de réduction de la photo au premier plan. Plus le nombre est grand, plus la transition est longue, et inversement.
  - 10 : nombre de pixels retirés à chaque étape de réduction de la photo au premier plan. Varie entre 1 et la largeur de la photo. Plus le nombre est petit, plus la transition est fluide et lente.
  - 2000 : temps de pause, en millisecondes, entre chaque photo.
  - 500 : largeur des photos en pixel. La photo réelle doit avoir exactement cette largeur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
  - 600 : hauteur des photos en pixel. La photo réelle doit avoir exactement cette hauteur car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
- ligne "ajoutePhoto" : cette ligne permet d'ajouter une photo au diaporama. Il faut un minimum de trois photo pour le faire fonctionner. Le maximum n'est limité que par le nombre de vos photos. Je pense qu'il est inutile de préciser que la partie en gras doit être remplacée par l'adresse de vos photos.
- ligne "masquerPanneauCommande" : cette fonction, facultative (je vous invite à supprimer cette ligne entièrement), permet de masquer la case à cocher servant à mettre en pause le diaporama.
- ligne "ajouteCadre" : une autre ligne facultative qui permet d'ajouter une bordure au diaporama.
  - 3 : épaisseur de la bordure en pixels.
  - #000000 : code couleur pour la bordure.

Si vous conservez la toute première ligne intacte, le script sera utilisé à partir de ce site. Cela ne me pose aucun problème. Je tiens seulement à préciser que celui-ci peut être modifié à tout moment afin d'apporter des corrections pour résoudre les problèmes qui me sont signalés ou d'y ajouter de nouvelles fonctionnalités. En revanche, et bien que je fasse tout ce qui m'est possible pour éviter d'y apporter tout problème nouveau par rapport aux versions précédentes, il n'est pas impossible d'obtenir des effets secondaires indésirables (je ne parles pas de risques d'embrasement instantanné d'immeubles, je me suis ammélioré depuis). Je vous conseille donc de garder une copie du javascript que vous pouvez télécharger ici. (Avec Firefox, il faut faire un "click droit" sur le lien puis "Enregistrer la cible du lien sous..."). Dans le cas de utilisation de votre copie du fichier javascript, il vous faut remplacer l'adresse par la votre.

Voila, je pense que ça devrait suffire comme explication, mais n'hésitez pas à demander des précisions.
Je vous invite également à laisser un commentaire avec le lien de vos diaporamas afin de montrer que ça marche ailleurs qu'ici.

pour transformer le "glisser" par le "fondu-enchaîné" :

Pour la mise en place, la procédure est exactement la même que pour le diaporama en "slide" (je ne trouve pas de mot français pour le désigner). Il suffit ensuite de modifier la ligne :


monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 50, 10, 2000, 500, 600);

... en y ajoutant un nouveau paramètre :


monDiaporama[nouveau_id_diaporama] = new Diaporama(nouveau_id_diaporama, 100, 2, 2000, 500, 600, "flou");

La ligne "new Diaporama" s'utilise alors ainsi :

100 : temps, en millisecondes, entre chaque étape de réduction de la photo au premier plan. Plus le nombre est grand, plus la transition est longue, et inversement.
2 : pourcentage de progression effectué à chaque étape. Varie entre 1 et 100. Plus le nombre est petit, plus la transition est fluide et lente.
2000 : temps de pause, en millisecondes, entre chaque transition.
500 : largeur des photos en pixel. La photo réelle doit avoir exactement la même largeur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.
600 : hauteur des photos en pixel. La photo réelle doit avoir exactement la même hauteur que celle que vous aurez définit ici car elle ne sera pas redimentionnée automatiquement comme avec une balise IMG.

Pour le premier paramètre, je conseille de ne pas le diminuer en dessous de 50 : mon PC, bien qu'il tienne la route, travaille à plus de 50% lors d'une transition à cette cadence, donc il faut penser à vos visiteurs qui peuvent avoir une machine qui commence à souffrir.
De plus, 100 et 2 donnent à peu près le même résultat que 50 et 1.
La durée théorique d'une transition peut être calculée ainsi :

paramètre_1 x 100 / paramètre_2 = durée en millisecondes.
exemple : 100 x 100 / 2 = 2000 millisecondes, soit 2 secondes.

image background - sous tableau
Bonjour,

On va encore dire avec mes tableau ^^, mais bien souvent ils reglent beaucoup de problemes,

Alors voila, crée un tableau avec les dimentions de ta photos (un peu plus petit que ta photo pour la compatibilité firefox) exemple : 800 x 900

Ensuite, dans ta cellule, clique droit, puis clique sur propriété de la cellule.

Ensuite ajoute une couleur unique (qui ne se trouve nulpart ailleur sur ta page) exemple #ffffff et copie le code

Ensuite apuis sur ok, une fois que ta cellule à son fond coloré, clique sur

puis recherche la couleur via le code couleur que tu à copié cf:#ffffff puis clique sur rechercher,

Ensuite tu aura un code un peu du genre :

bgcolor="#ffffff" </td>

Remplace le code en bleu par

background="http://adresseimage.png">

Voilà, tu as maintenant un fond que pour ta page d'accueil, mais attention, ce n'est pas aussi beau que tu le crois

image agrandie passage souris
<style type="text/css">
a span { display: none;}
a:hover span { display: inline;
position: absolute;
top: 0px;
left: 0px;
background:#FFFFDD;
}
</style>
<a href="http://s1.e-monsite.com/2009/04/16/50418157cadre-oiseau-jpg.jpg">
<img src="adresse de l'image miniature.jpg" />
<span><img src=" http://s1.e-monsite.com/2009/04/16/50418157cadre-oiseau-jpg.jpg " /></span></a>

Moteur de recherche
<form method=get action="http://www.google.com/search">
Rechercher sur le site :<br>
<input type=hidden name=ie value=windows-1252>
<input type="text" size="20" name="q" VALUE="">
<input type=hidden name=sitesearch value="http://pause-cafe.e-monsite.com">
<input type=hidden name=hl value=fr>
<input type="submit" name="mmt" VALUE="OK">
</form>

Rollover avec lien
<td><a href="http://www.eudistes-france.com/vocations-1.php"> <img alt="Enter" src="http://www.eudistes-france.com/images/MARCHAND-Pierre-small.jpg" onmouseover="this.src='http://www.eudistes-france.com/images/HADENGUE-Jacques-small.jpg'" onmouseout="this.src='http://www.eudistes-france.com/images/MARCHAND-Pierre-small.jpg'" /></a></td>

Image flottante
les images s'agrandissent au clic de la souris et sont (déplaçables) sur l'écran.<br><br> <a onclick="return hs.expand(this)" class="highslide" href="http://s1.e-monsite.com/2009/07/29/6427189pause-cafe-400x300-jpg.jpg"><img title="Click to enlarge" alt="Highslide JS" src="http://s1.e-monsite.com/2009/07/19/1391272pause-cafe100x75-jpg.jpg" /></a>
<div class="highslide-caption">Bienvenue sur pause-cafe</div><br>
<a onclick="return hs.expand(this)" class="highslide" href="http://s1.e-monsite.com/2009/07/29/96275985ticoune-400x300-jpg.jpg"><img title="Click to enlarge" alt="Highslide JS" src="http://s1.e-monsite.com/2009/07/19/28521782ti-coune-100x75-jpg.jpg" /></a>
<div class="highslide-caption">Site d humour</div><br>
<script type="text/javascript" src="http://ddata.over-blog.com/xxxyyy/0/37/17/67/highslide/highslide.js">
</script>

Ascenseur
<div style="height: 250px; width: 650px; overflow: auto;">VOTRE ARTICLE</div>