BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Scripts pour votre site
  Nouveaux messages Nouveaux messages Fil RSS  - Trois scripts
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

Trois scripts

 Répondre Répondre Page  12>
Auteur
Message
erbemd54 allez vers le bas
Senior Member
Senior Member


Depuis le: 12 Sep 2012
Status: Inactif
Points: 176
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer erbemd54 Citer  RépondreRéponse Lien Direct à ce Post Sujet: Trois scripts
    Envoyé : 07 Jan 2013 à 22:49

Voici pour vos sites OpenElement 3 nouveaux scripts (JavaScript), libre de droits. A copier tel quel ou en modifiant les variables, ils sont à placer suivant les instructions. Faite un essai sur une page blanche.

<!-- ****************************************************** -->

<!-- Ce script visionne en superposant 4 images (ou plus) de même taille avec un timeDelay de = 5 (modifiable),  il peut servir à varier votre banderolle de site ou des images -->
<!-- Les fichiers (.jpg) doivent être placés à la racine du site ou dans Files/Image/ (adaptez var Pix).  -->
<!-- NOTA: vous devez créer les fichiers en jpg, ils ne sont pas intégrés dans le script.-->
<!-- Si vous prenez d'autres fichiers remplacer le nom du fichier "v**.jpg" par les vôtres -->
<!-- A placer dans un bloc de code masqué -->
<!-- Emplacement dans l'entête (<head></head>) -->

<script language="JavaScript">
<!--
var timeDelay = 5;
var Pix = new Array
("v01.jpg"
,"v02.jpg"
,"v03.jpg"
,"v04.jpg"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
document["ChangingPix"].src = PicCurrent.src;
}
//  End -->
</script>

<!-- Ensuite placer la ligne ci-dessous dans un autre bloc masqué -->
<!-- Emplacement au début du body (<body></body>) -->
<!-- ATTENTION: Ici changer Type de script en HTML -->

<body OnLoad="startPix()"></body>

<!-- Enfin placer la ligne ci-dessous dans un autre bloc simple, et positionnez ce bloc à l'endroit ou vous voulez voir les images apparaître -->

<img name="ChangingPix" src="mon_image_01.jpg">

<!-- ****************************************************** -->

<!-- Ce script visionne 4 images (ou plus) de même taille avec une var rotate_delay = 5000 (modifiable) et current=0 l'image de départ,  il sert de visionneuse -->
<!-- A placer dans un bloc de code masqué -->
<!-- Emplacement dans l'entête (<head></head>) -->

<script language="JavaScript">
<!--
var rotate_delay = 5000;
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 >= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == "Stop") ? "Start" : "Stop";
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == "Stop") {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout("rotate()", rotate_delay);
   }
}
//  End -->
</script>

<!-- Ensuite placer les lignes ci-dessous dans un autre bloc simple, et positionnez ce bloc à l'endroit ou vous voulez voir les images apparaître -->
<!-- Les fichiers (.jpg) doivent être placés à la racine du site ou dans Files/Image/ (adaptez <img et <option).  -->
<!-- NOTA: vous devez créer les fichiers en jpg, ils ne sont pas intégrés dans le script.-->
<!-- Si vous prenez d'autres fichiers remplacer le nom du fichier "v**.jpg" par les vôtres -->

<form name=slideform>
<table cellspacing=1 cellpadding=4 bgcolor="#05cdff">
<tr>
<td align=center bgcolor="white">
<b>Image Slideshow</b>
</td>
</tr>
<tr>
<td align=center bgcolor="white" width=200 height=150>
<img src="v01.jpg" name="show">
</td>
</tr>
<tr>
<td align=center bgcolor="#05cdff">
<select name="slide" onChange="change();">
<option value="v01.jpg" selected>Nom de l'image 1
<option value="v02.jpg">Nom de l'image 2
<option value="v03.jpg">Nom de l'image 3
<option value="v04.jpg">Nom de l'image 4
</select>
</td>
</tr>
<tr>
<td align=center bgcolor="#05cdff">
<input type=button onClick="first();" value="|<<" title="Beginning">
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value=">>|" title="End">
</td>
</tr>
</table>
</form>

<!-- ****************************************************** -->

<!-- Ce script réalise un fondu entre deux images de même taille (ici 101/110 pixels) sur un clic. Le temps du fondu est (duration=3) modifiable -->
<!-- Les fichiers (.jpg) doivent être placés à la racine du site ou dans Files/Image/ (adaptez var Pix).  -->
<!-- NOTA: vous devez créer les fichiers en jpg, ils ne sont pas intégrés dans le script.-->
<!-- Si vous prenez d'autres fichiers remplacer le nom du fichier "v**.jpg" par les vôtres -->
<!-- A placer dans un bloc de code masqué -->
<!-- Emplacement dans l'entête (<head></head>) -->

<script language="JavaScript">
var fRunning = 0
function startTrans()
{
if (fRunning == 0)
{
  fRunning = 1
  imageid.filters.blendTrans.Apply();
  imageid.src = "v01.jpg";
  imageid.filters.blendTrans.Play()
}
}
</script>
<script for="mon_image" event="onfilterchange">
fRunning = 0
</script>

<!-- Ensuite placer la ligne ci-dessous dans un autre bloc simple, et positionnez ce bloc à l'endroit ou vous voulez voir les images apparaître -->

<img id="imageid" src="v02.jpg" style="filter:blendTrans(duration=3)" onclick="startTrans()" WIDTH="110" HEIGHT="110">

<!-- ****************************************************** -->

Autres scritpts pour OE
 
erbemd54 01/2013
Haut de la page
fgardi allez vers le bas
Newbie
Newbie


Depuis le: 01 Feb 2013
Status: Inactif
Points: 4
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer fgardi Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 01 Feb 2013 à 11:19
Bonjour,
Je trouve le premier script très simple et bien Clap.
Je voudrai intégrer un fondu entre chaque image est-ce possible?
Merci d'avance pour la réponse.
Fgardi
Haut de la page
erbemd54 allez vers le bas
Senior Member
Senior Member


Depuis le: 12 Sep 2012
Status: Inactif
Points: 176
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer erbemd54 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 06 Feb 2013 à 12:57
Bonjour fgardi,
Je viens répondre un peu tardivement à votre demande.
Oui, bien sur un fondu peut être incorporé dans le script. Avez vous regardé le 3éme script de ce fil, c'est justement un script de fondu d'image, vous pouvez soit l'incorporer dans le premier soit l'ouvrir à partir du premier en l'adaptant.
Cordialement
Haut de la page
fgardi allez vers le bas
Newbie
Newbie


Depuis le: 01 Feb 2013
Status: Inactif
Points: 4
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer fgardi Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 07 Feb 2013 à 07:22
Merci pour la réponse.
Ben même intégrer des lignes je ne sais pas faire .
Si vous pouvez me faire un exemple  Smile 
A+
Fgardi
Haut de la page
nicocs allez vers le bas
Groupie
Groupie
Avatar

Depuis le: 05 Feb 2013
Status: Inactif
Points: 86
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nicocs Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 07 Feb 2013 à 15:41
Bonjour,
Tout novice je commence mon site...
Et malgré avoir suivi à la lettre les instructions, il apparait juste un petit carré (ressemble à un graphique).
Une idée de ce qui peut bien se passer?

Meme problème en voulant intégrer un code css (pour un bouton)...
Et tant qu'à y être, est-il possible de créer de jolis boutons via OE??

Merci d'avance!

Nicocs
Haut de la page
erbemd54 allez vers le bas
Senior Member
Senior Member


Depuis le: 12 Sep 2012
Status: Inactif
Points: 176
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer erbemd54 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 07 Feb 2013 à 17:29
Bonsoit fgardi,
Voici le script 1 avec fondu. Seul 2 lignes on été ajoutées dans le if et la derniére ligne modifiée. Cela à partir du 3éme script.
Cordialement
erbemd54
 
<!-- ****************************************************** -->
<!-- Variante avec fondu du premier script -->
<!-- Ce script visionne 4 images (ou plus) de même taille avec un timeDelay de = 5 (modifiable),  il peut servir à varier votre banderolle de site ou des images -->
<!-- Un fondu modifiable à lieu entre chaque image (duration=3) dans le bloc simple -->
<!-- Les fichiers (.jpg) doivent être placés à la racine du site ou dans Files/Image/ (adaptez var Pix).  -->
<!-- NOTA: vous devez créer les fichiers en jpg, ils ne sont pas intégrés dans le script.-->
<!-- Si vous prenez d'autres fichiers remplacer le nom du fichier "v**.jpg" par les vôtres -->
<!-- A placer dans un bloc de code masqué -->
<!-- Emplacement dans l'entête (<head></head>) -->
<script language="JavaScript">
<!--
var timeDelay = 5;
var Pix = new Array
("v01.jpg"
,"v02.jpg"
,"v03.jpg"
,"v04.jpg"
);
var howMany = Pix.length;
timeDelay *= 1000;
var PicCurrentNum = 0;
var PicCurrent = new Image();
PicCurrent.src = Pix[PicCurrentNum];
function startPix() {
setInterval("slideshow()", timeDelay);
}
function slideshow() {
PicCurrentNum++;
if (PicCurrentNum == howMany) {
PicCurrentNum = 0;
}
PicCurrent.src = Pix[PicCurrentNum];
  ChangingPix.filters.blendTrans.Apply();
document["ChangingPix"].src = PicCurrent.src;
  ChangingPix.filters.blendTrans.Play();
}
//  End -->
</script>
<!-- Ensuite placer la ligne ci-dessous dans un autre bloc masqué -->
<!-- Emplacement au début du body (<body></body>) -->
<!-- ATTENTION: Ici changer Type de script en HTML -->
<body OnLoad="startPix()"></body>
<!-- Enfin placer la ligne ci-dessous dans un autre bloc simple, et positionnez ce bloc à l'endroit ou vous voulez voir les images apparaître -->
<img name="ChangingPix" src="Files/Image/v01.jpg" style="filter:blendTrans(duration=3)">
<!-- ****************************************************** -->


Edité par erbemd54 - 07 Feb 2013 à 17:35
Haut de la page
erbemd54 allez vers le bas
Senior Member
Senior Member


Depuis le: 12 Sep 2012
Status: Inactif
Points: 176
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer erbemd54 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 07 Feb 2013 à 17:33
Bonsoir nicocs,
L'erreur la plus connue provient de Windows lorsque le pare feu n'autorise pas l'exécution des scripts javascript, une box avec croix apparaît à la place de l'image regardez de ce côté. Pour les boutons vous pouvez utiliser Gimp (le "Photoshop" gratuit) pour faire des boutons avec texte sans texte en 3D des ronds des carrés ... ou des cadres, suivant votre imagination.
erbemd54


Edité par erbemd54 - 07 Feb 2013 à 18:09
Haut de la page
nicocs allez vers le bas
Groupie
Groupie
Avatar

Depuis le: 05 Feb 2013
Status: Inactif
Points: 86
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nicocs Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 07 Feb 2013 à 18:55
Bonjour Erbemb54,
Merci de ta réponse, j'ai trouvé la solution pour mon script.
Pour ce qui est des boutons, je vais esayer GImp.
Quoi qu'il en soit, avec un éditeur de bouton en ligne j'ai répupéré le code CSS suivant, comment faire pour l'intégrer à ma page?

J'image copier le code en bloc masqué et après?


.button {
   border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

Merci!
Nicocs
Haut de la page
erbemd54 allez vers le bas
Senior Member
Senior Member


Depuis le: 12 Sep 2012
Status: Inactif
Points: 176
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer erbemd54 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 07 Feb 2013 à 22:27
Bonsoir nicocs,
Dans un bloc de code masqué/Type de script/css.
erbemd54


Edité par erbemd54 - 07 Feb 2013 à 22:28
Haut de la page
nicocs allez vers le bas
Groupie
Groupie
Avatar

Depuis le: 05 Feb 2013
Status: Inactif
Points: 86
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer nicocs Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 07 Feb 2013 à 22:36
j'ai fait mais rien n'apparait! Ou alors le bouton est invisible!!

merci qd même
Nicocs
Haut de la page
 Répondre Répondre Page  12>
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.