Your browser does not support CSS. If images appear below, please disregard them.
Connexion

iWeb Beginner Forum Iweb Beginner : Forum d'assistance sur Apple iWeb

FAQ Membres>M’enregistrer

Bibliothèque de Code HTML pour iWeb

Pour aller plus loin avec iWeb

Modérateurs: kanak, mutru, zepatente

Re: Bibliothèque de Code HTML pour iWeb

Messagede Caribou » Mer 21 Jan 2009 14:02

Erreur Désolé. :oops:
Dernière édition par Caribou le Ven 20 Mar 2009 13:10, édité 2 fois.
Avatar de l’utilisateur
Caribou
Génius
Génius
 
Messages: 2391
Inscription: Lun 14 Avr 2008 11:31
Localisation: Sud
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP

Re: Bibliothèque de Code HTML pour iWeb

Messagede Caribou » Mer 21 Jan 2009 14:25

Nom de la fonction : Message télétype simple

Quel est son but : Un message écrit lettre par lettre.

Code :
Code: Tout sélectionner
<html>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--  début du masquage
  var esp = "                  ";
  var txt = "Votre message ici";
  var letexte   = esp + txt + esp;
  var i = 0;
  var pause = 70; //pause entre les lettres
  var sens = 0;
function tty()
{
//
document.affichage.texte_tty.value = letexte.substring(esp.length,i);
if (sens == 0)
    i++;
  else
    i--;
  if (i == letexte.length+1)
    sens = 1;
  if (i == 0)
    sens = 0;
  setTimeout("tty()",pause);
}
// fin du masquage -->
</SCRIPT>
</HEAD>
<body onload="tty()">
<form name="affichage">
  <INPUT TYPE=text SIZE=30 NAME="texte_tty">
</form>
</BODY>
</HTML>


Mise en place du code : le code sera à copier puis coller dans un fragment html

Option du code :
➡Pause entre les lettres.
➡Longueur de la case.
Avatar de l’utilisateur
Caribou
Génius
Génius
 
Messages: 2391
Inscription: Lun 14 Avr 2008 11:31
Localisation: Sud
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP

Re: Bibliothèque de Code HTML pour iWeb

Messagede Caribou » Mer 21 Jan 2009 16:12

Nom de la fonction : Des fenêtres multiples pour la pub

Quel est son but : Une ouverture multiple de fenêtres popups.
Une fenetre s'ouvre toutes les 5 secondes .

Code:
Code: Tout sélectionner
<html>
<HEAD>
<script language="JavaScript">
<!--
var temps=0;var num=0;
function affichepub(num) {
}
function pub() {
temps+=1; // 1 seconde de plus
if (temps==8) { // apres 10 seconde (3600 pour 1 heure par exemple)
  affichepub(num);
  num+=1; // publicité suivante
  if (num>5) {num=0;}
  temps=0; // remise du compteur a 0
}
tempo=setTimeout("pub()",1000); // on attend 1 seconde et on recommence la fonction Pub()
}
//-->
</script>
</HEAD>
<BODY onload="pub();">
<br><br><center>Ouverture nouveau popup toutes les 5 secondes...</center>
</BODY>
</HTML>


Mise en place du code : le code sera à copier puis coller dans un fragment html

Option du code :
➡Temps paramettrable entre chaque fenêtre.
Avatar de l’utilisateur
Caribou
Génius
Génius
 
Messages: 2391
Inscription: Lun 14 Avr 2008 11:31
Localisation: Sud
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP

Re: Bibliothèque de Code HTML pour iWeb

Messagede Caribou » Mer 21 Jan 2009 16:22

Nom de la fonction : Ouverture et fermeture automatiques

Quel est son but : La fenêtre s'ouvre au chargement de la page.
Elle se referme seule ou bout d'un certain temps, le temps que vous aurez choisi.

Code :
Code: Tout sélectionner
<html>
<HEAD>
<script>
function message(){
f = window.open("","","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,width=350,height=100")
f.document.write("<B><center>LA FENÊTRE VA SE FEMER<br>DANS<br>5 SECONDE")
compt=setTimeout("f.self.close()",5000);}
</script>
</HEAD>
<body onload="compt=setTimeout('message()',0000)">
</BODY>
</HTML>


Mise en place du code : le code sera à copier puis coller dans un fragment html

Option du code :
➡Temps d'ouverture paramettrable.
Avatar de l’utilisateur
Caribou
Génius
Génius
 
Messages: 2391
Inscription: Lun 14 Avr 2008 11:31
Localisation: Sud
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP

Re: Bibliothèque de Code HTML pour iWeb

Messagede Caribou » Ven 23 Jan 2009 11:48

Nom de la fonction : Faire exploser une image

Quel est son but :Un click dessus l'image la fait exploser en plusieurs petits morceaux.

Code :
Code: Tout sélectionner
<html>
<HEAD>
<script language="JavaScript">
// La largeur de l'image en pixels
var imgwidth=468
// La hauteur de l'image en pixels
var imgheight=60
// Le nom de l'image à faire exploser
var imgurl="ban468x60.gif"
// L'adresse de destination après l'explosion
var redirurl="#"
// La position de l'image par rapport au bord gauche
var x_finalpos=200
// La position de l'image par rapport au bord supérieur
var y_finalpos=200
// Le nombre de blocs découpés par ligne
var x_slices=8
// Le nombre de ligne de découpe
var y_slices=5

// La vitesse d'explosion
// Speed of explosion
var pause=10
/////// Ne MODIFIEZ PLUS RIEN /////////////
var marginright
var width_slice=Math.floor(imgwidth/x_slices)
var height_slice=Math.floor(imgheight/y_slices)
var cliptop=0
var clipbottom=height_slice
var clipleft=0
var clipright=width_slice
var spancounter=0
var x_random=new Array()
var y_random=new Array()
var max_explsteps=15
var i_explsteps=0
function initiate() {
spancounter=0
for (i=0;i<=y_slices-1;i++) {
   for (ii=0;ii<=x_slices-1;ii++) {
   x_random[spancounter]=Math.ceil(240*Math.random())-120
   y_random[spancounter]=Math.ceil(240*Math.random())-120
   spancounter++
   }
}
}
function explode_IE() {
spancounter=0
if (i_explsteps<=max_explsteps) {
   for (i=0;i<=y_slices-1;i++) {
      for (ii=0;ii<=x_slices-1;ii++) {
      var thisspan=eval("document.all.span"+spancounter+".style")
      thisspan.posLeft+=x_random[spancounter]
      thisspan.posTop+=y_random[spancounter]
      spancounter++
      }
   }
   i_explsteps++
   var timer=setTimeout("explode_IE()",pause)
}
else {
   spancounter=0
   for (i=0;i<=y_slices-1;i++) {
      for (ii=0;ii<=x_slices-1;ii++) {
      var thisspan=eval("document.all.span"+spancounter+".style")
      thisspan.posLeft=-5000
      spancounter++
   }
}
clearTimeout(timer)
window.location=redirurl
}
}
// -->
</script>


</HEAD>
<body onLoad="initiate()">
<br><br><center>Faites un click sur l'image pour la faire exploser...</center><br><br>
<script language="JavaScript">
<!--
for (i=0;i<=y_slices-1;i++) {
for (ii=0;ii<=x_slices-1;ii++) {
marginright=screen.width+50
document.write("<span id='span"+spancounter+"' style='position:absolute;visibility:visible; left:"+x_finalpos+"px;top:"+y_finalpos+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")
document.write("<a href='javascript:explode_IE()'>")
document.write("<img src='"+imgurl+"' border='0'><BR>")
document.write("</a>")
document.write("</span>")
clipleft+=width_slice
clipright+=width_slice
spancounter++
}
clipleft=0
clipright=width_slice
cliptop+=height_slice
clipbottom+=height_slice
}
// -->
</script>
</BODY>
</HTML>


Mise en place du code : le code sera à copier puis coller dans un fragment html

Option du code :
➡Le nombre de morceaux est à votre choix.
➡La vitesse de l'explosion.
➡Le nombre de blocs découpés par ligne.
➡L'adresse de destination après l'explosion.
➡La position de l'image, la hauteur et la largeur de celle-ci.
Avatar de l’utilisateur
Caribou
Génius
Génius
 
Messages: 2391
Inscription: Lun 14 Avr 2008 11:31
Localisation: Sud
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP

Re: Bibliothèque de Code HTML pour iWeb

Messagede zepatente » Ven 30 Jan 2009 14:10

Nom de la fonction : Formulaire simple

Quel est son but :Envoie le nom ,prénom et courrier via un formulaire

Code :
Code: Tout sélectionner
<form action="mailto:votrecourriel@me.com" method=post enctype="text/plain">
Votre Prénom.
<input type="text" name="prenom" size=30 maxlength=40 value="Prénom">
Votre Nom.
<input type="text" name="nom" size=30 maxlength=40 value="Nom">
Votre E-Mail.
    <input type="text" name="email" size=30 maxlength=40 value="nom@provider.domaine">
        <input type="submit" value="Envoyer">
    <input type="reset" value="Annuler">
</form>


Mise en place du code : le code sera à copier puis coller dans un fragment html

Option du code : le code est modifiable à volonté pour ajouter des informations . Ce code n'est pas sécurisé pour les spam
Avatar de l’utilisateur
zepatente
Administrateur du site
Administrateur du site
 
Messages: 5005
Inscription: Lun 7 Avr 2008 10:58
Localisation: Québec
Votre version d'iWeb: iWeb 09
Votre hébergement: MobileMe

Re: Bibliothèque de Code HTML pour iWeb

Messagede Caribou » Dim 1 Fév 2009 14:52

Nom de la fonction : Un Effet de Zoom sur plusieurs images au survol de La souris

Quel est son but : Tout est dans le titre.

Code :
Code: Tout sélectionner
<html>
<head>
<script language="JavaScript">
var coeff=4;//Coefficient de reduction
var larg=200;//largeur maxi de l'image
var haut=194;//hauteur maxi de l'image
var coeffinit=coeff;
function changer(nom_de_limage) {
if (document.images[nom_de_limage].width < larg) {
coeff = coeff-0.2;
document.images[nom_de_limage].width = Math.round(larg/coeff);
document.images[nom_de_limage].height = Math.round(haut/coeff);
chang=window.setTimeout('changer("'+document.images[nom_de_limage].name+'");',60);//vitesse de l'effet
}
else {window.clearTimeout(chang);}
}
function initial(nom_de_limage) {
if (document.images[nom_de_limage].width > larg/coeffinit) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.images[nom_de_limage].width = Math.round(larg/coeff);
document.images[nom_de_limage].height = Math.round(haut/coeff);
initi=window.setTimeout('initial("'+document.images[nom_de_limage].name+'");',60);//vitesse de l'effet
}
else {window.clearTimeout(initi);}
}
//-->
</script>
</head>
<body>
<p align="center">
<a href="#" onMouseOut="initial('image1')" onMouseOver="changer('image1')" ><img src="nom de l'image ici" name="image1" border="0"></a>
</p>
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
document.image1.width = Math.round(larg/coeff);
document.image1.height = Math.round(haut/coeff);
//-->
</script>
<p align="center">
<a href="#" onMouseOut="initial('image2')" onMouseOver="changer('image2')" ><img src="nom de l'image ici" name="image2" border="0"></a>
</p>
<script language="JavaScript">
<!--
document.image2.width = Math.round(larg/coeff);
document.image2.height = Math.round(haut/coeff);
//-->
</script>
<p align="center">
<a href="#" onMouseOut="initial('image3')" onMouseOver="changer('image3')" ><img src="nom de l'image ici" name="image3" border="0"></a>
</p>
<script language="JavaScript">
<!--
document.image3.width = Math.round(larg/coeff);
document.image3.height = Math.round(haut/coeff);
//-->
</script>
</body>
</html>


Mise en place du code : le code sera à copier puis coller dans un fragment html

Option du code :
➡Coefficient de réduction.
➡Largeur maxi de l'image.
➡Hauteur maxi de l'image.
Avatar de l’utilisateur
Caribou
Génius
Génius
 
Messages: 2391
Inscription: Lun 14 Avr 2008 11:31
Localisation: Sud
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP

Re: Bibliothèque de Code HTML pour iWeb

Messagede zepatente » Mar 10 Fév 2009 15:02

Nom de la fonction : Afficher la date

Quel est son but : Permet d'afficher la date sur son site web

Code: Tout sélectionner
<script type="text/javascript">
        d = new Date();
      document.write("<p>Aujourd'hui, nous sommes le : <span style='font:bold 20px arial;'>");
      document.write(d.toLocaleDateString());
      document.write("</span></p>");
    </script>


Mise en place du code : le code sera à copier puis coller dans un fragment html
Avatar de l’utilisateur
zepatente
Administrateur du site
Administrateur du site
 
Messages: 5005
Inscription: Lun 7 Avr 2008 10:58
Localisation: Québec
Votre version d'iWeb: iWeb 09
Votre hébergement: MobileMe

Re: Bibliothèque de Code HTML pour iWeb

Messagede Caribou » Jeu 12 Fév 2009 14:36

Nom de la fonction : Menu très simple (layer)

Quel est son but : Un menu qui s'ouvre au passage de la souris pour afficher un sous-menu.

Code :
Code: Tout sélectionner
<html>
<HEAD>
<script language="JavaScript">
// Script to create a drop-down menu effect using layers.
//(c)Copyright Daren Craddock 2002
//You may use this code in any application, no limits,
//provided that you acknowledge Daren Craddock as the originator.
// big() makes selected layer longer (height property)
function big(lyr) {
document.all[lyr].style.height='180px'; }
/* small() makes selected layer shorter (height property)*/
function small(lyr) {
document.all[lyr].style.height='32px';
}
/* start() makes all layers short to start with (height property)*/
function start() {
document.all.Layer1.style.height='32px';
document.all.Layer2.style.height='32px';
document.all.Layer3.style.height='32px'; }
//-- !>
</script>
</HEAD>
<BODY onLoad="start()">
<div id="Layer1" style="position:absolute; width:155px; height:180px; z-index:1; left: 74px; top: 208px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer1')"; onMouseOut="small('Layer1')">
  <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
    <a href="JavaScript:">Menu 1</a>
    <br>
    <br>
    <a href="JavaScript:">Lien 1</a><br>
    <br>
    <a href="JavaScript:">Lien 2</a><br>
    <br>
    <a href="JavaScript:">Lien 3</a><br>
    <br>
    <a href="JavaScript:">Lien 4</a></font></div>
</div>
<div id="Layer2" style="position:absolute; width:155px; height:180px; z-index:1; left: 236px; top: 208px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer2')"; onMouseOut="small('Layer2')">
  <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
    <a href="JavaScript:">Menu 2</a>
    <br>
    <br>
    <a href="JavaScript:">Lien 5</a><br>
    <br>
    <a href="JavaScript:">Lien 6</a><br>
    <br>
    <a href="JavaScript:">Lien 7</a><br>
    <br>
    <a href="JavaScript:">Lien 8</a></font></div>
</div>
<div id="Layer3" style="position:absolute; width:155px; height:180px; z-index:1; left: 398px; top: 208px; background-color: #FFFFCC; layer-background-color: #FFFFCC; border: 1px none #000000; overflow: hidden" onMouseOver="big('Layer3')"; onMouseOut="small('Layer3')">
  <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif">
    <a href="JavaScript:">Menu 3</a>
    <br>
   <br>
    <a href="JavaScript:">Lien 9</a><br>
    <br>
    <a href="JavaScript:">Lien 10</a><br>
    <br>
    <a href="JavaScript:">Lien 11</a><br>
    <br>
    <a href="JavaScript:">Lien 12</a></font></div>
</div
</BODY>
</HTML>


Mise en place du code : le code sera à copier puis coller dans un fragment html

Option du code :
➡ Modification des couleurs.
➡Changement de police.
Avatar de l’utilisateur
Caribou
Génius
Génius
 
Messages: 2391
Inscription: Lun 14 Avr 2008 11:31
Localisation: Sud
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP

Re: Bibliothèque de Code HTML pour iWeb

Messagede Caribou » Ven 20 Mar 2009 13:09

Nom de la fonction : Un menu déroulant qui apparait et qui change le fond d'écran

Quel est son but :Tout est dans le titre.

Code :
Code: Tout sélectionner
<html>
  <body>
    <form name="myform">
<div align="center"><center><p><font size="2" face="Arial"><strong><select name="D1"
size="1" onchange="document.bgColor=this.options[this.selectedIndex].value">
<option selected value="FFFFF">Choisissez une couleur pour votre page</option>
<option value="blue">Bleu </option>
<option value="aquamarine">Vert clair </option>
<option value="chocolate">Brun </option>
<option value="darkred">Marron </option>
<option value="gold">Or </option>
<option value="red">Rouge </option>
<option value="yellow">Jaune </option>
<option value="hotpink">Rose </option>
<option value="lime">Lime </option>
<option value="darkkhaki">Kaki </option>
<option value="cadetblue ">Violet </option>
<option value="darkslateblue">Bleu marine </option>
<option value="turquoise">Turquoise </option>
<option value="000000">Noir</option>
</select></strong></font></p>
</center></div>
</form>
  </body>
</html>


Mise en place du code : le code sera à copier puis coller dans un fragment html

Option du code :
➡Choisissez une couleur pour votre page
Avatar de l’utilisateur
Caribou
Génius
Génius
 
Messages: 2391
Inscription: Lun 14 Avr 2008 11:31
Localisation: Sud
Votre version d'iWeb: iWeb 09
Votre hébergement: FTP

PrécédenteSuivante

Retourner vers Code HTML

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité