iWeb Beginner Le forum qui vous aide à utiliser iWeb

[zepatente]

Bonjour,

voici une bibliothèque regroupant les codes html que nous utilisons sous iweb.
Les codes à proposer devront avoir été testé avant de les proposer


liens vers les sujets :

* L'iframe
* Texte défilant
* Texte défilant vers le haut
* Texte défilant sur un bandeau de couleur
* Rollover
* Texte clignotant
* Insérer une image et lui affecter un lien vers une page
* Texte qui s'affiche mot par mot
* Texte élastique
* Défilement barre des titres
* Message télétype simple
* Des fenêtres multiples pour la pub
* Ouverture et fermeture automatiques
* Faire exploser une image
* Formulaire simple
* Un Effet de Zoom sur plusieurs images au survol de La souris
* Afficher la date
* Menu très simple (layer)
* Faire un lien avec un effet sonore
* Texte clignotant avec multiple couleur
* Horloge


Merci de les proposer tel que suit :

Nom de la fonction : Le titre

Quel est son but : faire un descriptif de la fonction du code

Code :

Code: Tout sélectionner

le code est à insérer ici

Mise en place du code : Expliquer où placer le code , Fragment HTML ou autres

Explication du code : donner les indications sur le code , tel que champs à remplacer ou options..

Liens vers http://www.iwebeginner.com : oui - non - donnez le lien ici

liens de sujet dans le forum merci de le mettre à jour au fur et à mesure ( via mp à l'attention des modérateurs ou moi même )

Divers :

Aucune demande d'explication ou d'assistance ne seront faites sous cette rubrique ( tous les messages en dehors du code seront effacés)

@+

[zepatente]

Nom de la fonction : L'iframe

Quel est son but : Permet d'insérer une page HTML dans une autre

Code :

Code: Tout sélectionner

<iframe name src="Adresse de la page cible.htlm"
style="width:600px; height:150px;
border-width:0px;
border-color:#990033;
border-style:solid;"
scrolling="auto" >
</iframe>

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

Explication du code : Voici la description rapide des arguments suivants :
➡SRC : permet de définir la source du document à afficher
➡Height et Width definissent la taille de l'iframe ;
➡Border permet de controler les caractéristiques des bordures
➡Scrolling paramètre la présence ou non d'une barre de défilement.

Liens vers http://www.iwebeginner.com : oui - non - http://www.iwebeginner.com/iwebeginner/Automator/Entrées/2008/9/9_iframe.html

liens de sujet dans le forum topic489.html

Divers : le référencement des pages insérer ne sera pas fait par google

[Caribou]

Nom de la fonction : Texte défilant

Quel est son but : Comme son nom l'indique, il sert à faire défiler un texte horizontalement.

Code :

Code: Tout sélectionner

<marquee behavior="scroll" direction="left" scrollamount="2" scrolldelay="50">Bonne Année 2009</marquee>


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

Option du code :
➡scrollamount: Définit de combien de pixels le texte avance.
➡scrolldelay: Définit le temps ou le texte reste dans la même position.

[Caribou]

Nom de la fonction : Texte défilant sur un bandeau de couleur

Quel est son but : Direction de départ vers la gauche et ensuite alternée...

Code :

Code: Tout sélectionner

<marquee scrolldelay="60" scrollamount="3" width="400" direction"left" behavior="alternate" bgcolor="#FF0000">Bonne Année 2009</marquee>


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

Option du code :
➡scrolldelay: Définit le temps ou le texte reste dans la même position.
➡scrollamount: Définit de combien de pixels le texte avance.
➡width: Définit la longueur de la zone de défilement.
➡bgcolor: Couleur.

[zepatente]

Nom de la fonction : Rollover

Quel est son but : Le rollover, appelé aussi image réactive, permet de changer d'image lorsque le curseur de la souris passe sur celle-ci

Code :

Code: Tout sélectionner

a href="http://l’adresse de la page vers où vous desirez faire un lien ”>
<script type="text/javascript">
function SourisSur()
{
document.adresse.src ="http:// l’adresse de votre image lors que la souris passe au dessus de l’image"
}
function Sourisdehors()
{
document.adresse.src ="http:// l’adresse de votre image lors que la souris est en dehors de la zone de l’image"
}
</script>

<img  src="http://adresse de l’image par défault" name="adresse"
width="100" height="30"
border="0"
alt="iwebegginer - Le site pour débuter"
onmouseover="SourisSur()"
onmouseout="Sourisdehors()"
/></a>

Mise en place du code : le code sera à copier puis coller dans un fragment html . deux images seront à créer et placer dans votre dossier d'hébergement

Explication du code :
width et height représentent la hauteur et la largueur du roll over
Border est un argument qui vous permet d’ajouter une bordure à votre rollover.
Alt est la description de votre image qui sera affiché

Liens vers http://www.iwebeginner.com : oui - non - http://www.iwebeginner.com/iwebeginner/Automator/Entrées/2008/6/1_Rollover.html


Divers : La ligne <a href="http://l’adresse de la page vers où vous désirez faire un lien ”> permet de faire ce bouton un lien. Si vous désirez faire un roll-over sans lien , il vous suffit d’enlever cette ligne.

[DCDP]

Nom de la fonction : Texte clignotant

Quel est son but : Comme son nom l'indique, il sert à faire clignoter un texte.

Code :

Code: Tout sélectionner

<html>
<head>
<title>Clignotement</title>
<script language="JavaScript">
i=0;
function couleur()
{
   tabColoris = new Array ("#ffffff","#CE5852");// Vous pouvez changer les couleurs ou en rajouter
   if (i+1 == tabColoris.length) i=0;
   else i++;
   document.getElementById("texte").setAttribute('color',tabColoris[i]);
   setTimeout("couleur()",500);
}
</script>
</head>
<body topmargin="0" leftmargin="0" onload="couleur()">
<p align="center"><font id="texte" size="8">Votre texte</font></b></p>
</form>
</body>
</html>

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

Option du code :
Vous modifier votre texte à "Votre texte", la taille des caractère à "size=8", et son alignement à "align=center".
Vous pouvez modifier les couleurs à " ("#ffffff","CE5852") ". Vous trouverez les codes couleurs là: http://www.dsi.univ-paris5.fr/cocoul3t.html (merci Caroline)
Par contre, nous ne savons pas comment modifier la police.
Vous pouvez modifier la vitesse de clignotement ici " "500) "

[zepatente]

Nom de la fonction : Insérer une image et lui affecter un lien vers une page

Quel est son but : afficher une image , tel un gif , et lui associer un lien à cette image

Code :

Code: Tout sélectionner

<a href=" http://www.votre page de destination.com" target="_blank"><IMG SRC="http://www.votre site.com / dossier ou est l'image/image.gif" border=0 width=190 height=190 ALT="description ou mots clefs" TITLE="titre de l'image"></a>

Mise en place du code : le code sera à copier puis coller dans un fragment html et placer votre image dans un dossier de l'hébergement

Explication du code : width et height représentent la hauteur et la largueur de l'image
Border est un argument qui vous permet d’ajouter une bordure à votre image
Alt est la description de votre image qui sera affichée

Liens vers http://www.iwebeginner.com : oui - non

liens de sujet dans le forum

[Caribou]

Nom de la fonction : Texte défilant vers le haut.

Quel est son but : Texte défilant vers le haut.

Code :

Code: Tout sélectionner

<marquee behavior="scroll" direction="up" height="140" scrollamount="1" scrolldelay="60" onMouseOver="this.stop()" onMouseOut="this.start()">Bonne Année 2009</marquee>


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

Option du code : Stop le texte au passage de la souris.
➡scrolldelay: Définit le temps ou le texte reste dans la même position.
➡scrollamount: Définit de combien de pixels le texte avance.
➡onMouseOver: La souris rentre sur la zone du block
➡onMouseOut: La souris sort de la zone du block

[Caribou]

Nom de la fonction : Texte qui s'affiche mot par mot.

Quel est son but : Le mot est petit et grandit à une taille au choix.

Code :

Code: Tout sélectionner

<HTML>
<HEAD>
</HEAD>
<BODY>
<script language="JavaScript" type="text/javascript">
<!--
if  ((document.getElementById) &&
window.addEventListener || window.attachEvent){
if  (!window.opera){
(function(){
//Configure ici.
var message = "Bonne Année 2009";
var col = new Array('#000000','#778899','#ff0000'); //add more if needed.
var xyz = 26 ; //Taille maximum des messages. default:26
var spd = 30; //Vitesse d'affichage. default:30
//Fin configuration.
var msg = message.split(" ");
var timer = null;
var clrPos = 0;
var msgPos = 0;
var jog = 1;
var currentStep = 10;
var step = 8;
var h,w,y,x,r,xy;
var d = document;
var pix = "px";
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var running = true;
var box,txt;
var ovrflw =  (d.documentElement.style &&
typeof d.documentElement.style.MozOpacity == "string")
?"-moz-scrollbars-none":"hidden";
var idx = d.getElementsByTagName('div').length;
d.write("<div id='_box"+idx+"' style='position:absolute;top:0px;left:0px;"
+"height:10px;width:10px;text-align:center;overflow:"+ovrflw+"'>"
+"<div id='_txt"+idx+"' style='position:absolute;top:0px;left:0px;width:1px;"
+"height:1px;font-family:arial,sans-serif;font-size:1px'>.<\/div><\/div>");
if (domWw) r = window;
else{
  if (d.documentElement &&
  typeof d.documentElement.clientWidth == "number" &&
  d.documentElement.clientWidth != 0)
  r = d.documentElement;
else{
  if (d.body &&
  typeof d.body.clientWidth == "number")
  r = d.body;
}
}
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
  if (d.documentElement && d.defaultView &&
  typeof d.defaultView.scrollMaxY == "number"){
  oh = d.documentElement.offsetHeight;
  sy = d.defaultView.scrollMaxY;
  ow = d.documentElement.offsetWidth;
  sx = d.defaultView.scrollMaxX;
  rh = oh-sy;
  rw = ow-sx;
}
else{
  rh = r.innerHeight;
  rw = r.innerWidth;
}
h = rh;
w = rw;
}
else{
h = r.clientHeight;
w = r.clientWidth;
}
y = Math.floor(h/2);
x = Math.floor(w/2);
xy = (w >= h)?w:h;
}
function scrl(yx){
var sy,sx;
if (domSy){
sy = r.pageYOffset;
sx = r.pageXOffset;
}
else{
sy = r.scrollTop;
sx = r.scrollLeft;
}
return (yx == 0)?sy:sx;
}
function dsply(){
step += 15;
currentStep += step;
txt.top = y + Math.floor(-currentStep/16) + pix;
txt.left = x + Math.floor(-currentStep/2) + pix;
txt.width = currentStep + pix;
txt.fontSize = Math.floor(currentStep/8) + pix;
txt.color = col[clrPos];
d.getElementById("_txt"+idx).firstChild.data = msg[msgPos];
if (currentStep > xy * xyz){
currentStep = 10;
step = 8;
msgPos += jog;
clrPos += jog;
}
if (clrPos >= col.length){
clrPos = 0;
}
timer = setTimeout(dsply,spd);
if (msgPos >= msg.length){
running = false;
box.width = 1 + pix;
box.height = 1 + pix;
box.visibility = "hidden";
txt.width = 1 + pix;
txt.height = 1 + pix;
txt.visibility = "hidden";
clearTimeout(timer);
}
box.top = scrl(0) + pix;
box.left = scrl(1) + pix;
}
function dims(){
if (domWw) box.width = "100%";
else box.width = w + pix;
box.height = h + pix;
}
function init(){
winsize();
box = document.getElementById("_box"+idx).style;
txt = document.getElementById("_txt"+idx).style;
dims();
dsply();
}
function rsz(){
if (running){
  winsize();
  dims();
}
}
if (window.addEventListener){
window.addEventListener("resize",rsz,false);
window.addEventListener("load",init,false);
} 
else if (window.attachEvent){
window.attachEvent("onresize",rsz);
window.attachEvent("onload",init);
}
})();
}
}
// --->
</script>
<p align="center">Un coucou de Caribou</p>
</BODY>
</HTML>

Mise en place du code : le code sera à copier puis coller dans un fragment html
Option du code :
➡Taille maximum des messages.
➡Vitesse d'affichage.
➡Vous pouvez modifier les couleurs du texte.

[Caribou]

Nom de la fonction : Texte élastique

Quel est son but : Le texte est sans arret déformé du style élastique.

Code :

Code: Tout sélectionner

<HTML>
<HEAD>
<script language="JavaScript">
var sizes = new Array("0px", "1px", "2px", "4px", "8px");
sizes.pos = 0;
function elast() {
var el = document.all.elastic;
if (null == el.direction)
   el.direction = 1;
else if ((sizes.pos > sizes.length - 4) || (0 == sizes.pos))
   el.direction *= -1;
   el.style.letterSpacing = sizes[sizes.pos += el.direction];
}
setInterval('elast()', 100)
</script>
</HEAD>
<BODY>
<h1 align="center" id="elastic">Un coucou de Caribou</hi> </h1>
</BODY>
</HTML>

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

Option du code :
➡ setInterval: Vitesse de l'étirement.