Pour accéder plus rapidement au sommaire correspondant à cet article, cliquez sur le lien :

Une iframe est un cadre incorporé dans une page Web.C'est un petit code tout simple. Il permet d'appeler une page dans une autre page à la taille voulue et à l'endroit désiré.

Supposons que vous vouliez proposer à vos visiteurs des calendriers à utiliser. Au lieu de leur donner le code complet à installer en mode source :

 

<script type="text/javascript"><!--
var d = new Date();
var dm = d.getMonth() + 1;
var dan = d.getYear();
if(dan < 999) dan+=1900;
calendrier(dm,dan);

function calendrier(mois,an) {
nom_mois = new Array
("Janvier","F&eacute;vrier","Mars","Avril","Mai","Juin","Juillet",
"Ao&ucirc;t","Septembre","Octobre","Novembre","D&eacute;cembre");
jour = new Array ("Lu","Ma","Me","Je","Ve","Sa","Di");

var police_entete = "Arial"; /* police entête de calendrier  */
var taille_pol_entete = 1;           /* taille de police 1-7 entête de calendrier  */
var couleur_pol_entete = "#f5f5dc";     /* couleur de police entête de calendrier  */
var arrplan_entete = "#000033";        /* couleur d'arrière plan entête de calendrier  */
var police_jours = "Arial"; /* police affichage des jours  */
var taille_pol_jours = 1;           /* taille de police 1-7 affichage des jours  */
var coul_pol_jours = "#f5f5dc";     /* couleur de police affichage des jours  */
var arrplan_jours = "#000033";        /* couleur d'arrière plan affichage des jours  */
var couleur_dim = "#ff0000";        /* couleur de police pour dimanches  */
var couleur_cejour = "#ff0000";        /* couleur d'arrière plan pour aujourd'hui  */

var maintenant = new Date();
var ce_mois = maintenant.getMonth() + 1;
var cette_annee = maintenant.getYear();
if(cette_annee < 999) cette_annee+=1900;
var ce_jour = maintenant.getDate();
var temps = new Date(an,mois-1,1);
var Start = temps.getDay();
if(Start > 0) Start--;
else Start = 6;
var Stop = 31;
if(mois==4 ||mois==6 || mois==9 || mois==11 ) --Stop;
if(mois==2) {
 Stop = Stop - 3;
 if(an%4==0) Stop++;
 if(an%100==0) Stop--;
 if(an%400==0) Stop++;
}
document.write('<table border="3" cellpadding="1" cellspacing="1">');
var entete_mois = nom_mois[mois-1] + " " + an;
inscrit_entete(entete_mois,arrplan_entete,couleur_pol_entete,taille_pol_entete,police_entete);
var nombre_jours = 1;
for(var i=0;i<=5;i++) {
  document.write("<tr>");
  for(var j=0;j<=5;j++) {
    if((i==0)&&(j < Start))
     inscrit_cellule("&#160;",arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
    else {
      if(nombre_jours > Stop)
        inscrit_cellule("&#160;",arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
      else {
        if((an==cette_annee)&&(mois==ce_mois)&&(nombre_jours==ce_jour))
         inscrit_cellule(nombre_jours,couleur_cejour,coul_pol_jours,taille_pol_jours,police_jours);
        else
         inscrit_cellule(nombre_jours,arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
        nombre_jours++;
        }
      }
    }
    if(nombre_jours > Stop)
      inscrit_cellule("&#160;",arrplan_jours,couleur_dim,taille_pol_jours,police_jours);
    else {
      if((an==cette_annee)&&(mois==ce_mois)&&(nombre_jours==ce_jour))
        inscrit_cellule(nombre_jours,couleur_cejour,couleur_dim,taille_pol_jours,police_jours);
      else
        inscrit_cellule(nombre_jours,arrplan_jours,couleur_dim,taille_pol_jours,police_jours);
      nombre_jours++;
    }
    document.write("</tr>");
  }
document.write("</table>");
}

function inscrit_entete(titre_mois,couleurAP,couleurpolice,taillepolice,police) {
document.write("<tr>");
document.write('<td align="center" colspan="7" valign="middle" bgcolor="'+couleurAP+'">');
document.write('<font size="'+taillepolice+'" color="'+couleurpolice+'" face="'+police+'"><b>');
document.write(titre_mois);
document.write("</b></font></td></tr>");
document.write("<tr>");
for(var i=0;i<=6;i++)
  inscrit_cellule(jour[i],couleurAP,couleurpolice,taillepolice,police);
document.write("</tr>");
}

function inscrit_cellule(contenu,couleurAP,couleurpolice,taillepolice,police) {
document.write('<td align="center" valign="middle" bgcolor="'+couleurAP+'">');
document.write('<font size="'+taillepolice+'" color="'+couleurpolice+'" face="'+police+'"><b>');
document.write(contenu);
document.write("</b></font></td>");
}
//-->
</script></a>

 

Vous copiez ce code dans le bloc-note, vous le nommez calendrier1.htm

Vous hébergez ce fichier sur OB (si vous êtes en privilège ou premium) ou chez un hébergeur (en confiance)

Vous notez son URL : http://ddata.over-blog.com/xxxyyy/0/37/17/67/javascript/calendrier1.htm

Vous allez chez COOLMAN utiliser leur générateur d'iframe.

Vous donnez un titre, saisissez l'URL, décidez si vous voulez ou non un ascenseur (scrollbar), bordures et dimensions.

Vous générez le code :

 

<iframe name="Calendrier" SRC="http://ddata.over-blog.com/xxxyyy/0/37/17/67/javascript/calendrier1.htm" scrolling="no" FRAMEBORDER="yes"></iframe>

Vous le mettez en mode source et vous obtenez :

 

commentaires (1)    ajouter un commentaire

Publicité

Présentation

: Les ficelles d Anna K.
: 26/06/2006
annak : Aide et astuces pour créer et personnaliser un blog. Toutes les étapes pour créer un blog sur Over-Blog : les premiers pas, la gestion quotidienne (écrire des articles, placer des photos...), les modifications de CSS (changer les fonds, les couleurs de police...), des idées de design...et le personnaliser quelle que soit la plateforme : mettre en valeur les images et les textes, créer des menus, installer de la musique, des gadgets, des compteurs, des astuces de référencement...

Recherche Rapide Sur le Site

Sommaires

Dernières Astuces

liste complète

Commentaires

Contact - C.G.U. - Rémunération en droits d'auteur avec TF1 Network - Signaler un abus