Translation




 

 

 
 
French to English French to German French to Italian French to Spanish
French to Japanese French to Korean French to Russian French to Chinese (Simplified)
 

 

 
 

 

 

 

 

Ombre et lumière

1 juillet 1995 6 01 /07 /juillet /1995 01:00

La pluie d'étoiles

 

   Promener votre curseur dans cet article.

 

Voyez vous les étoiles créées par le curseur ?

 

Ceci est très facile à faire. Un simple copier/coller en 4 étapes.

 

 

 

Le code html (à mettre dans le source de votre article)

 

   Etape 1 :

  • * Question à se poser : "Quelle doit être la couleur de mes étoiles ?"
  • * Une fois définie, vous devez trouver son code hexadécimal --> Par exemple sur ce site.
  • * Notez le sur un papier (par exemple).

 


 

   Etape 2 :  

  • * Voici, ci-dessous, le code. Ne paniquez pas, il n'y a rien à comprendre.

 

<script type="text/javascript">
var colour="#000000";
var sparkles=50;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
    var i, rats, rlef, rdow;
    for (var i=0; i<sparkles; i++) {
    var rats=createDiv(3, 3);
    rats.style.visibility="hidden";
    document.body.appendChild(tiny[i]=rats);
    starv[i]=0;
    tinyv[i]=0;
    var rats=createDiv(5, 5);
    rats.style.backgroundColor="transparent";
    rats.style.visibility="hidden";
    var rlef=createDiv(1, 5);
    var rdow=createDiv(5, 1);
    rats.appendChild(rlef);
    rats.appendChild(rdow);
    rlef.style.top="2px";
    rlef.style.left="0px";
    rdow.style.top="0px";
    rdow.style.left="2px";
    document.body.appendChild(star[i]=rats);
  }
  set_width();
  sparkle();
}}
function sparkle() {
  var c;
  if (x!=ox || y!=oy) {
    ox=x;
    oy=y;
    for (c=0; c<sparkles; c++) if (!starv[c]) {
      star[c].style.left=(starx[c]=x)+"px";
      star[c].style.top=(stary[c]=y)+"px";
      star[c].style.clip="rect(0px, 5px, 5px, 0px)";
      star[c].style.visibility="visible";
      starv[c]=50;
      break;
    }
  }
  for (c=0; c<sparkles; c++) {
    if (starv[c]) update_star(c);
    if (tinyv[c]) update_tiny(c);
  }
  setTimeout("sparkle()", 40);
}
function update_star(i) {
  if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
  if (starv[i]) {
    stary[i]+=1+Math.random()*3;
    if (stary[i]<shigh+sdown) {
      star[i].style.top=stary[i]+"px";
      starx[i]+=(i%5-2)/5;
      star[i].style.left=starx[i]+"px";
    }
    else {
      star[i].style.visibility="hidden";
      starv[i]=0;
      return;
    }
  }
  else {
    tinyv[i]=50;
    tiny[i].style.top=(tinyy[i]=stary[i])+"px";
    tiny[i].style.left=(tinyx[i]=starx[i])+"px";
    tiny[i].style.width="2px";
    tiny[i].style.height="2px";
    star[i].style.visibility="hidden";
    tiny[i].style.visibility="visible"
  }
}
function update_tiny(i) {
  if (--tinyv[i]==25) {
    tiny[i].style.width="1px";
    tiny[i].style.height="1px";
  }
  if (tinyv[i]) {
    tinyy[i]+=1+Math.random()*3;
    if (tinyy[i]<shigh+sdown) {
      tiny[i].style.top=tinyy[i]+"px";
      tinyx[i]+=(i%5-2)/5;
      tiny[i].style.left=tinyx[i]+"px";
    }
    else {
      tiny[i].style.visibility="hidden";
      tinyv[i]=0;
      return;
    }
  }
  else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
  set_scroll();
  y=(e)?e.pageY:event.y+sdown;
  x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
  if (typeof(self.pageYOffset)=="number") {
    sdown=self.pageYOffset;
    sleft=self.pageXOffset;
  }
  else if (document.body.scrollTop || document.body.scrollLeft) {
    sdown=document.body.scrollTop;
    sleft=document.body.scrollLeft;
  }
  else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
    sleft=document.documentElement.scrollLeft;
    sdown=document.documentElement.scrollTop;
  }
  else {
    sdown=0;
    sleft=0;
  }
}
window.onresize=set_width;
function set_width() {
  if (typeof(self.innerWidth)=="number") {
    swide=self.innerWidth;
    shigh=self.innerHeight;
  }
  else if (document.documentElement && document.documentElement.clientWidth) {
    swide=document.documentElement.clientWidth;
    shigh=document.documentElement.clientHeight;
  }
  else if (document.body.clientWidth) {
    swide=document.body.clientWidth;
    shigh=document.body.clientHeight;
  }
}
function createDiv(height, width) {
  var div=document.createElement("div");
  div.style.position="absolute";
  div.style.height=height+"px";
  div.style.width=width+"px";
  div.style.overflow="hidden";
  div.style.backgroundColor=colour;
  return (div);
}
// ]]>
</script>

 

 


 

   Etape 3

  • * Copiez le code ci dessus.
    • - Il commence par : <script type="text/javascript">
    • - Et se termine par : </script>
  • * Puis il faudra le coller en appuyant sur le bouton HTML avant.
  • * Si vous souhaitez cette pluie dans tous les articles, collez le code dans un module texte libre. Cette boite peut être mise  dans :
    • - L'entête,
    • - Ou le pieds de page,
    • - Ou un module latéral.
  • * Mais si vous souhaitez cette pluie dans un seul article (comme moi), collez ce code dans l'article (N'oubliez pas d'appuyer sur le bouton html avant).

 


 

   Etape 4

  • * Changez la couleur si besoin.... C'est la 2ème ligne : var colour="#000000";
  • * Validez votre code "html"
  • * Allez voir votre blog
  • * Appuyez  sur la touche F5 pour vider la "mémoire du blog".

 

Maintenant dégustez votre oeuvre !

 

 

 

Limitation
   Ce code contient du Javascript. Il est donc interdit au niveau "confiance" sur Over-Blog.

 

 

 

 

Retour menu Widget 

 

Repost 0
Published by Le Chevalier Dauphinois - dans ** Mes Widgets
commenter cet article
2 février 1995 4 02 /02 /février /1995 10:00
   Le but de ce petit "truc" est de faire apparaitre de nouvelles images (3 dans cet exemple) en mettant la souris sur des zones définies . Pas besoin de cliquer.


Voici l'image
Dans cette image, il faut trouver ZOE (une peluche).


En mettant le curseur dans le feuillage, une aide est proposée.

 



Le code html (à mettre dans le source "html" de votre article)


<p align="center">
<a class="CtreTexte">
<img src="http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery1.jpg" usemap="#map" name="zoe" id="zoe" border="0" width="599" height="445" />
</a>
</p>

<map id="map" name="map">

<area onmouseover="document.zoe.src='http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery2.jpg'" onmouseout="document.zoe.src='http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery1.jpg'" shape="circle" coords="305,144,55" />

<area onmouseover="document.zoe.src='http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery3.jpg'" onmouseout="document.zoe.src='http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery1.jpg'" shape="rect" coords="0,300,590,440" />

<area onmouseover="document.zoe.src='http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery4.jpg'" onmouseout="document.zoe.src='http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery1.jpg'" shape="rect" coords="1,1,146,117" />

</map>




Explication

Il est facile de comprendre ce "truc-machin-bidule" :

  • 1 - Au début en noir, il faut déclarer une image en la définissant comme une carte : (#map)
  • 2 - Il faut ensuite nommer cette carte : (name="zoe").... Ce nom peut être changer évidemment.

    Vient enfin la partie d'affichage des images (la partie créatrice la plus amusante).

  • 3 - Il faut réaliser un classique rollover .....Mais en lui donnant le nom de la map : document.zoe
  • 4 - Chaque couleur précédée par <area  concerne une nouvelle image. Elle s'affiche en fonction de la zone définie dans l'image principale... Soit par un cercle ("circle" ), soit pas un rectangle ("rect")
  • Pour mieux comprendre ces instructions et surtout faciliter leur utilisation, je vous propose cet article d'aide.

Nota :
 * Il est plus logique de créer des images (1+3 dans cet exemple) de taille identique. Le "trucage" ne se verra pas et impressionnera votre visiteur.
 *  Il est possible de réaliser plus de 3 rollovers, mais parfois, l'affichage peut devenir lent (à vous de tester).
 * Attention à ne pas charger des images trop lourdes, l'effet serait inverse, et votre visiteur va se lasser.
 * Pour la lenteur, la solution serait peut être de charger les images avant avec un "truc" comme cela  (à vérifier):

<img src="http://url-image-1.jpg" style="display:none;" border="0">




Limitation
   Aucune. Ce code ne contient pas de Javascript. Il suffit de l'écrire dans le html d'un article.


Extention possible
    En plus de faire apparaître un nouvelle image (comme ci-dessus), il est possible de rendre chaque zone cliquable (essayez sur la grotte de Zoé). Cela transforme votre image en menu original. Comme vous savez faire un lien, il n'y a pas de problème.

 

  Retour menu Widget 
Repost 0
Published by Le Chevalier Dauphinois - dans ** Mes Widgets
commenter cet article
1 février 1995 3 01 /02 /février /1995 01:00


 

exemple 2 exemple 3 exemple 4




Voici le code à mettre dans le html


<table border="0" bordercolor="#000000"  align="center">
<tbody>
<tr>


<td><a class="menu3" title="blabla exemple 1" href="http://chateau.over-blog.net/article-13475146.html">Exemple 1</a></td>

<td><a class="menu3" title="blabla exemple 2" href="http://chateau.over-blog.net/article-5560154.html" target="_blank">exemple 2</a></td>

<td><a class="menu3" title="blabla exemple 3" href="http://chateau.over-blog.net/article-3300915.html">exemple 3</a></td>

<td><a class="menu3" title="blabla exemple 4" href="http://chateau.over-blog.net/article-27336809.html">exemple 4</a></td>

</tr>
</tbody>
</table>




<style type="text/css">
a.menu3 { display:block; margin-top:1px; text-align:center; font:10pt; font:bold;
width:154px; border-style:ridge; border-width:5px; border-color:#0000AA; padding:0px; }

a.menu3:link { color:#2F485D; text-decoration:none; }
a.menu3:visited { color:#2F485D; text-decoration:none; }
a.menu3:hover {  color:#ffffff; background-color: red; text-decoration:none; border-color:#000000; }
a.menu3:active { color:#ffffff; background-color:#4A546F; text-decoration:none; }
</style>

<style type="text/css">
a.lien {color:#2F485D;text-decoration:none;}
a.lien:hover{color:#969696;filter:glow(color=#ffa900,strength=4);width=50%;}
</style>




===============================================================

Explication de ce "bidule"

* Les textes en couleurs entre les <td> et </td> sont les rectangles pour le menu.
J'en ai mis 4 mais on peut agrandir à l'infini... heu.. presque
 :
* Evidemment, il faut changer la prose; Par exemple :
 
exemple 4, on peut mettre -->  MUSIQUE
  exemple 1, on peut mettre -->  CINEMA
etc....

*
http://chateau.over-blog.net/article-13475146.html    représente l'url (adresse) de destination... Le lien en réalité

* et blabla exemple 4 c'est... l'info bulle  (le texte qui apparait quand la souris est sur le rectangle).

Nota : Après avoir collé ce code dans le html, il est possible de modifier le tableau, les proses, les infobulles, les liens avec le clic droit (sans revenir dans le html)

 
=============================================

J'ai mis en gras les couleurs.
Il faut simplement mettre le code couleur précédé d'un # ..... ou ..... la couleur primaire comme red, blue....

* color:#ffffff représente la couleur de l'écriture.
* background-color:#4A546F correspond à la couleur du fond des cellules.
*border-color:#0000AA définit la couleur de la bordure des cellules.

==> a.menu:hover  est pour définir les caractéristiques de la cellule lorsque la souris pointe dedans.

--> Vous avez remarqué que sur la ligne  a.menu3:hover  j'ai redéfini la couleur de la bordure quand la souris pointe dans la cellule : border-color:#000000;   La couleur peut évidemment être modifiée.
.. Si vous pensez que le changement de bordure surcharge la vue, vous pouvez supprimer cette instruction : border-color:#000000;

============================================

Faites des essaies.... ce script est très facile à comprendre avec un peu de patience.



Limitation
   Aucune. Ce code ne contient pas de Javascript. Il suffit de le coller dans le texte libre en haut de votre blog dans le mode html.




 

  Retour menu Widget 

 

 

Repost 0
Published by Le Chevalier Dauphinois - dans ** Mes Widgets
commenter cet article
7 janvier 1995 6 07 /01 /janvier /1995 07:30

 

Avant tout, j'aimerais remercier Gifman pour cette astuce qu'il a développée.

 

Je n'ai fait que la mettre en forme pour mon besoin.

 

Allez voir son blog passionnant --> clic

 

--------------------------------------------------------

 

  Le but est d'afficher une image au centre d'un tableau en mettant simplement le curseur sur une des 6 images mignatures.

 

Une image valant mieux qu'un long discours, amusez vous avec ceci :

 

1 2 3 4 5 6

 


 

  Cette astuce n'est réalisée qu'en html.

Elle est facile à comprendre.

Elle est possible sur tous les blogs.

 

Voici le code..... Ne paniquez pas, il est symétrique.

 


 

 <p>&nbsp;</p>
<table style="border: 2px solid #999; width: 640px; background-color: #ffffff3; text-align: center;" border="2" align="center">
<tbody>


<tr style="text-align: center;">
<td>
          1
        </td>
<td>
          2
        </td>
<td>
          3
        </td>
<td>
          4
        </td>
<td>
          5
        </td>
<td>
          6
        </td>
</tr>


<tr style="text-align: center;">
<td>
          <img src="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-02.jpg" onmouseover="tableau1.src='http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-02.jpg'" style="width: 98px;" />
        </td>


<td>
          <img src="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-03.jpg" onmouseover="tableau1.src='http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-03.jpg'" style="width: 98px;" />
        </td>


<td>
          <img src="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-05.jpg" onmouseover="tableau1.src='http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-05.jpg'" style="width: 98px;" />
        </td>


<td>
          <img src="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-29.jpg" onmouseover="tableau1.src='http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-29.jpg'" style="width: 98px;" />
        </td>


<td>
          <img src="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-33.jpg" onmouseover="tableau1.src='http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-33.jpg'" style="width: 98px;" />
        </td>


<td>
          <img src="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-35.jpg" onmouseover="tableau1.src='http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-35.jpg'" style="width: 98px;" />
        </td>


</tr>
<tr style="text-align: center;">
<td colspan="6">
          <img src="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-02.jpg" style="width: 640px;" id="tableau1" name="tableau1" />
        </td>
</tr>
</tbody>
</table>

  <p>&nbsp;</p>

 


 

Explication de cette astuce :

 

* Le texte en JAUNE-ITALIQUE correspond à la ligne de chiffre.

--> Il me permet de commenter mes images.

---> Vous pouvez supprimer tout ce jaune si vous n'en voulez pas.

 

* Chaque texte en ROUGE-GRAS correspond à l'adresse d'une image.

--> Il est important entre chaque <td> (chaque bloc) d'inscrire 2 fois la même adresse..

--> Certains d'entre vous ont peut être reconnu le principe du Rollover.

--> Si vous n'avez pas reconnu le Rollover, cela n'a aucune importance.

 

* Le texte en ROUGE-GRAS-SOULIGNE est l'adresse de l'image qui apparaît au début.

--> Vous pouvez mettre l'une des 6 adresses, cela n'a pas d'importance.

--> Par habitude, je mets la même que la  1ère.

 

* Le chiffre en ROSE est la taille de chacune des 6 petites images. J'ai mis 98px.

--> Ne changez pas ce chiffre pour l'instant. Je vous explique ci-dessous comment faire.

 

* Le chiffre en ROSE-GRAS est la taille du tableau. Je l'ai définie en 640px

--> Important : Cette dimension du tableau est inscrite à 2 endroits.

--> Astuce :

** Vous pouvez avoir un tableau plus petit ... Par exemple : 520px

** Il faudra donc changer ce chiffre à 2 endroits.

** Mais surtout redéfinir par programme la taille des petites images.

** C'est facile...... 640 - 520 = 120 pixels en moins.

** Comme il y a 6 cellules, il suffit de diviser ce chiffre : 120 / 6 = 20 pixels en moins pour chaque miniature.

** Donc, chaque petite image sera plus petite de 20 pixels.

** Le chiffre en ROSE devient : 98 - 20 = 78

** Il suffit de remplacer à 6 endroits la taille de la vignette.

** Vous constatez que cette astuce est simple à comprendre.

==> Super astuce (pour ceux qui ont compris le raisonnement ci-dessus) :

*** Il est possible de mettre plus que 6 images.. Par exemple 10.

*** Pour cela il suffit de changer le : <td colspan="6">

*** Il faut remplacer 6 par 10.

*** Puis refaire le calcul ci-dessus en divisant par 10 et non pas par 6.

 

* tableau1 est le nom de ce tableau.

--> Ceux qui ont reconnu le rollover comprennent la détermination d'un nom.

--> Si vous n'avez pas reconnu le Rollover, cela n'a aucune importance.

--> Astuce :

** Si, dans le même article, vous souhaitez mettre un autre tableau..... C'est facile :

** Il suffit de nommer le 2ème autrement : Par exemple tableau2

** Ceci est à faire 8 fois dans mon exemple.

** Vous constatez que cette astuce est simple à comprendre.  

 

* Pour la décoration et les couleurs des bordures, c'est un classique tableau.

<table style="border: 2px solid #999; width: 640px; background-color: #ffffff3; text-align: center;" border="2" align="center">

--> Les "experts" peuvent le modifier dans le html.

--> Pour les autres, il suffit de cliquer sur l'icône "tableau"..... Et de faire les classiques réglages.

 

 

* -* Lorsque vous aurez compris cette astuce, les possibilités sont "infinies".

* - * Mon ami Gifman a fait une variante ici.

* - * Plus modestement, j'ai créé celle-ci.

 

Conseil final :

* Pour cette astuce, il est préférable (et fortement recommandé) d'avoir les images de taille identique.

* Évitez de mélanger les vues verticales et horizontales sur la même ligne.

* Sinon, la ligne de vignettes sera asymétrique.

* Et l'image agrandie fera sauter le tableau.

* Il est possible de gérer les dimensions vignettes/tableau.... Mais je le déconseille aux débutants.

 

==================================

 

Faites des essaies.... Ce script est facile à comprendre avec un peu de patience.



Limitation
   Aucune. Ce code ne contient pas de Javascript. Il suffit de le coller dans un article de votre blog dans le mode html.


 

 

  Retour menu Widget 

 

 

Repost 0
Published by Le Chevalier Dauphinois - dans ** Mes Widgets
commenter cet article
6 janvier 1995 5 06 /01 /janvier /1995 01:00

 

But

    Le but de cette astuce est d'afficher une image sur un mot sans faire un clic de souris. Il suffit de poser le curseur sur le mot ou la phrase.

 

 

Voici deux exemples

 

  Posez votre curseur ici

 

                                                   Ou posez le là

 

 

 

Autre exemple

 

  Cette astuce est utilisée sur ce blog.

 

 

Le code à mettre dans le CSS  (A ne pas mettre dans le  html de votre article) 

 

==> Il suffit simplement de coller ce qui est en gras dans le css de votre blog.

La fonction se nomme : voir-une-image  ---> mais vous pouvez la renommer


a.voir-une-image {
position:relative;
font-size: 11px;   -----Ceci modifie la taille du texte, cela peut être supprimé
font-weight: bold;  ---- Ceci met le texte en gras, cela peut être supprimé
}

 

a.voir-une-image span {display: none;}

a:hover.voir-une-image span {
display: inline;
position: absolute;
top: -20px; ----- Cette valeur correspond au décalage (sur le haut si le chiffre est négatif) de l'image par rapport au début du mot
left:150px; ----- Cette valeur est le décalage (sur la droite si le chiffre est positif) de l'image par rapport au début du mot
z-index: 20;
width:100%; ----- Ceci est la taille de l'image, avec 100% elle s'affichera en entier.
padding:2px 4px;
}

 

 

 

 

Le code html (à mettre dans le  source de votre article)

 

Maintenant que le css est définitivement réalisé, il faut coller ceci dans le html de l'article

 

<a class="voir-une-image" href="votre lien"> Posez votre curseur ici <span><img src="url de l'image" alt="Hooo, c'est beau !" /></span></a>



Limitation
   Aucune. Ce code ne contient pas de Javascript.

 

 

 

 

   

Retour menu Widget 

 

Repost 0
Published by Le Chevalier Dauphinois - dans ** Mes Widgets
commenter cet article
1 janvier 1995 7 01 /01 /janvier /1995 05:12

 Ce petit widget traduit votre texte Français dans l'une des 24 autres langues.


 
Voici l'image affichée

 

 

Google-Translate-English to French Traduire français en Arabic Google-Translate-Chinese (Simplified) BETA Traduire français en Arabic Traduire français en Arabic Traduire français en Croatian Traduire français en Czech Traduire français en danish Traduire français en Dutch Traduire français en Finnish Traduire français en German Traduire français en Greek Traduire français en Hindi  Traduire français en Italian Google-Translate-English to Japanese BETA Traduire français en Korean BETA Traduire français en Norwegian Traduire français en Polish Traduire français en Portuguese Traduire français en Romanian Traduire français en Russian Traduire français en Russian BETA Traduire français en Spanish Traduire français en Swedish

 


Le code html (à mettre dans le  source de votre article)

 

 

 


<div>

<a title="Google-Traduction-Fran&ccedil;ais-en-anglais " onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cen&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Google-Translate-English to French " src="http://i321.photobucket.com/albums/nn397/rodney2006_2008/flag_usa.gif" title="Google-Traduction-Fran&ccedil;ais-en-anglais " border="0" width="24" height="18" /></a>

 <a title="Traduire fran&ccedil;ais en Arabic" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Car&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Arabic" src="http://i263.photobucket.com/albums/ii150/mohamedrias/Arabic_Flag.png" title="Traduire fran&ccedil;ais en Arabic" border="0" width="24" height="18" /></a>

 <a title="Translate to Chinese (Simplified) BETA" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Czh-CN&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Google-Translate-Chinese (Simplified) BETA" src="http://i263.photobucket.com/albums/ii150/mohamedrias/_chinese_s.png" title="Translate to Chinese (Simplified) BETA" border="0" width="24" height="18" /></a>

<a title="Traduire fran&ccedil;ais en Bulgarian" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cbg&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Arabic" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Bulgarian_Flag.png" title="Translate to Bulgarian" border="0" width="24" height="18" /></a>

 <a title="Traduire fran&ccedil;ais en Traditional Chinese" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Czh-TW&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Arabic" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Mandarin_Flag.png" title="Translate to traditional Chinese" border="0" width="24" height="18" /></a>

<a title="Traduire fran&ccedil;ais en Croatian" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Chr&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Croatian" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Croatian_Flag.png" title="Translate to Croatian" border="0" width="24" height="18" /></a>

<a title="Traduire fran&ccedil;ais en Czech" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Ccs&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Czech" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Czech_Flag.png" title="Translate to Czech" border="0" width="24" height="18" /></a>

 <a title="Traduire fran&ccedil;ais en Danish" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cda&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en danish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Danish_Flag.png" title="Translate to Danish" border="0" width="24" height="18" /></a>

<a title="Traduire fran&ccedil;ais en Dutch" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cnl&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Dutch" src="http://i40.photobucket.com/albums/e208/winglord01/nederlands.gif" title="Translate to Dutch" border="0" width="24" height="18" /></a>

 <a title="Traduire fran&ccedil;ais en Finnish" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cfi&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Finnish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Finnish_Flag.png" title="Translate to Finnish" border="0" width="24" height="18" /></a>

<a title="Traduire fran&ccedil;ais en German" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cde&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en German" src="http://i263.photobucket.com/albums/ii150/mohamedrias/_german_s.png" title="Traduire fran&ccedil;ais en German" border="0" width="24" height="18" /></a>

<a title="Traduire fran&ccedil;ais en Greek" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cel&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Greek" src="http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_gr.gif" title="Translate to Greek" border="0" width="24" height="18" /></a>

 <a title="Traduire fran&ccedil;ais en Hindi" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Chi&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Hindi" src="http://i323.photobucket.com/albums/nn467/techbookmark/hindi.png" title="Translate to Hindi" border="0" width="24" height="18" /></a>

<a title="Google-Translate-English to Italian" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cit&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt=" Traduire fran&ccedil;ais en Italian" src="http://i263.photobucket.com/albums/ii150/mohamedrias/_italian_s.png" title=" Traduire fran&ccedil;ais en Italian" border="0" width="24" height="18" /></a>

<a title="Google-Translate-English to Japanese BETA" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cja&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Google-Translate-English to Japanese BETA" src="http://i187.photobucket.com/albums/x307/Mafishioso/_japanese_s.png" title="Traduire fran&ccedil;ais en Japanese BETA" border="0" width="24" height="18" /></a>

<a title=" Traduire fran&ccedil;ais en Korean BETA" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cko&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Korean BETA" src="http://i263.photobucket.com/albums/ii150/mohamedrias/_korean_s.png" title="Traduire fran&ccedil;ais en Korean BETA" border="0" width="24" height="18" /></a>

 <a title="Traduire fran&ccedil;ais en Norwegian" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cno&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Norwegian" src="http://i536.photobucket.com/albums/ff328/pmhrid/norway_flag.png" title="Translate to Norwegian" border="0" width="24" height="18" /></a>

<a title="Traduire fran&ccedil;ais en Polish" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cpl&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Polish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Polish_Flag.png" title="Translate to Polish" border="0" width="24" height="18" /></a>

 <a title="Traduire fran&ccedil;ais en Portuguese" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cpt&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Portuguese" src="http://i18.photobucket.com/albums/b120/pdhinderlie/Web%20Stuff/Flags/flag_pt.gif" title="Translate to Portuguese" border="0" width="24" height="18" /></a>

 <a title="Traduire fran&ccedil;ais en Romanian" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cro&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Romanian" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Romansh_Flag.png" title="Translate to Romanian" border="0" width="24" height="18" /></a>

 <a title="Traduire fran&ccedil;ais en Russian" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cru&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Russian" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Russian_Flag.png" title="Translate to Russian" border="0" width="24" height="18" /></a>

<a title=" Traduire fran&ccedil;ais en Russian BETA " onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Cru&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Russian BETA " src="http://i263.photobucket.com/albums/ii150/mohamedrias/_russian_s.png" title=" Traduire fran&ccedil;ais en Russian BETA " border="0" width="24" height="18" /></a>

 <a title="Traduire fran&ccedil;ais en Spanish" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Ces&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Spanish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Spanish_Flag.png" title="Traduire fran&ccedil;ais en Spanish" border="0" width="24" height="18" /></a>

<a title="Traduire fran&ccedil;ais en Swedish" onclick="window.open('http://www.google.com/translate_p?u='+encodeURIComponent(location.href)+'&amp;langpair=fr%7Csv&amp;hl=fr&amp;ie=UTF8'); return false;" rel="nofollow" target="_blank"><img style="cursor: pointer;" alt="Traduire fran&ccedil;ais en Swedish" src="http://i166.photobucket.com/albums/u106/language_forum/Languages/Swedish_Flag.png" title="Translate to Swedish" border="0" width="24" height="18" /></a>

</div>
 
====================================
  • * Faites un simple copier-coller, il n'y a rien à comprendre
  • * Evidemment, vous pouvez enlever des langues qui ne vous semblent pas utiles. Chaque "paquet" correspond à une langue.


 

 


Limitation
   Aucune. Ce code ne contient pas de Javascript.

 

 

 

 

 

Retour menu Widget 

 

 

 

Repost 0
Published by Le Chevalier Dauphinois - dans ** Mes Widgets
commenter cet article
1 janvier 1995 7 01 /01 /janvier /1995 00:59
 Ce petit widget affiche la météo du jour et permet un lien vers un site d'informations de la ville choisie.
  La météo est moyennement fiable.
 
 
Voici l'image affichée

Les Villes
 
Les Villes
  Avec ce code, en cliquant sur l'image, vous affichez la page d'accueil du site "LesVilles.com".
 
  Avec ce code, en cliquant sur l'image, vous affichez la page de la ville choisie sur le site "LesVilles.com".


Le code html (à mettre dans le  source de votre article)

En cliquant sur le nom d'une des villes ci-dessous, une page s'ouvre listant quelques caractéristiques de la cité. Sur la droite,apparaît le module météo.
  • * Il suffit de cliquer sur le lien pour faire apparaître une code de ce type :
  • Exemple :
<a href="http://www.lesvilles.com/"><img alt="La France" title="La France" src="http://www.lesvilles.com/meteo.php?id=38185&c=FFFFFF" border="0"/></a>
  • * Collez le dans votre source.
  • * Il est possible de définir la couleur du fond.


Limitation
   Aucune. Ce code ne contient pas de Javascript
 
 
Racourcis vers les villes de ce site
 
Alsace
  Strasbourg Mulhouse Colmar Haguenau Schiltigheim Illkirch-Graffenstaden Saint-Louis Sélestat Lingolsheim Bischheim Wittenheim Illzach Rixheim Riedisheim Kingersheim Bischwiller Guebwiller Saverne Ostwald Hœnheim Obernai Cernay Wittelsheim Erstein Molsheim
 
Aquitaine
  Bordeaux Pau Mérignac Pessac Bayonne Talence Anglet Périgueux Agen Biarritz Mont-de-Marsan Villenave-d'Ornon Bergerac Saint-Médard-en-Jalles La Teste-de-Buch Villeneuve-sur-Lot Bègles Le Bouscat Gradignan Libourne Lormont Cenon Dax Eysines Marmande
 
Auvergne
  Clermont-Ferrand Montluçon Aurillac Vichy Moulins Le Puy-en-Velay Cournon-d'Auvergne Riom Chamalières Issoire Cusset Thiers Yzeure Beaumont Aubière Gerzat Pont-du-Château Domérat Bellerive-sur-Allier Lempdes Romagnat Cébazat Monistrol-sur-Loire Ambert Commentry
 
Bourgogne
  Paris Boulogne-Billancourt Argenteuil Montreuil Saint-Denis Versailles Nanterre Créteil Aulnay-sous-Bois Vitry-sur-Seine Colombes Asnières-sur-Seine Champigny-sur-Marne Rueil-Malmaison Saint-Maur-des-Fossés Courbevoie Aubervilliers Drancy Antony Neuilly-sur-Seine Noisy-le-Grand Sarcelles Cergy Levallois-Perret Issy-les-Moulineaux
 
Bretagne
  Rennes Brest Quimper Lorient Vannes Saint-Malo Saint-Brieuc Lanester Fougères Concarneau Lannion Ploemeur Morlaix Douarnenez Vitré Cesson-Sévigné Landerneau Pontivy Hennebont Bruz Guipavas Plérin Plougastel-Daoulas Plouzané Auray
 
Centre
  Tours Orléans Bourges Châteauroux Blois Chartres Joué-lès-Tours Dreux Vierzon Fleury-les-Aubrais Olivet Romorantin-Lanthenay Saint-Jean-de-Braye Vendôme Lucé Saint-Jean-de-la-Ruelle Saint-Cyr-sur-Loire Saint-Pierre-des-Corps Gien Montargis Saran Châteaudun Saint-Avertin Châlette-sur-Loing Issoudun
 
Champagne Ardenne
  Reims Troyes Charleville-Mézières Châlons-en-Champagne Saint-Dizier Chaumont Épernay Sedan Vitry-le-François Romilly-sur-Seine La Chapelle-Saint-Luc Saint-André-les-Vergers Sainte-Savine Tinqueux Langres Revin Rethel Givet Nouzonville Saint-Julien-les-Villas Cormontreuil Bar-sur-Aube Nogent-sur-Seine Bétheny Bogny-sur-Meuse
 
Corse
  Ajaccio Bastia Porto-Vecchio Corte Calvi Biguglia Borgo Furiani Lucciana Sartène Ghisonaccia Propriano Ville-di-Pietrabugno L' Île-Rousse Bastelicaccia Prunelli-di-Fiumorbo Bonifacio San-Martino-di-Lota Alata Penta-di-Casinca Vescovato Grosseto-Prugna Afa Ventiseri Aléria
 
  Franche Comté
Besançon Belfort Montbéliard Dole Lons-le-Saunier Pontarlier Vesoul Audincourt Valentigney Saint-Claude Héricourt Lure Champagnole Luxeuil-les-Bains Bethoncourt Gray Delle Morteau Morez Seloncourt Baume-les-Dames Beaucourt Mandeure Grand-Charmont Valdoie
 
Ile de France
  Paris Boulogne-Billancourt Argenteuil Montreuil Saint-Denis Versailles Nanterre Créteil Aulnay-sous-Bois Vitry-sur-Seine Colombes Asnières-sur-Seine Champigny-sur-Marne Rueil-Malmaison Saint-Maur-des-Fossés Courbevoie Aubervilliers Drancy Antony Neuilly-sur-Seine Noisy-le-Grand Sarcelles Cergy Levallois-Perret Issy-les-Moulineaux

Languedoc Roussillon
  Montpellier Nîmes Perpignan Béziers Narbonne Carcassonne Sète Alès Lunel Agde Frontignan Bagnols-sur-Cèze Mauguio Castelnau-le-Lez Lattes Beaucaire Mende Villeneuve-lès-Avignon Saint-Gilles Castelnaudary Vauvert Canet-en-Roussillon Saint-Estève Limoux Pont-Saint-Esprit
 
Limousin
  Limoges Brive-la-Gaillarde Tulle Guéret Ussel Saint-Junien Panazol Isle Saint-Yrieix-la-Perche Couzeix Malemort-sur-Corrèze Le Palais-sur-Vienne Aixe-sur-Vienne La Souterraine Feytiat Ambazac Saint-Léonard-de-Noblat Aubusson Bellac Condat-sur-Vienne Égletons Saint-Pantaléon-de-Larche Rochechouart Rilhac-Rancon Bort-les-Orgues
 
Lorraine
  Metz Nancy Thionville Épinal Vandœuvre-lès-Nancy Montigny-lès-Metz Sarreguemines Forbach Saint-Dié-des-Vosges Lunéville Verdun Toul Bar-le-Duc Saint-Avold Villers-lès-Nancy Laxou Hayange Yutz Pont-à-Mousson Longwy Freyming-Merlebach Creutzwald Woippy Sarrebourg Stiring-Wendel
 
Midi Pyrénées
  Toulouse Montauban Tarbes Albi Castres Colomiers Rodez Tournefeuille Auch Millau Muret Blagnac Cahors Lourdes Plaisance-du-Touch Pamiers Cugnaux Graulhet Moissac L' Union Balma Villefranche-de-Rouergue Ramonville-Saint-Agne Castelsarrasin Gaillac
 
Basse Normandie
  Caen Cherbourg-Octeville Alençon Hérouville-Saint-Clair Lisieux Saint-Lô Équeurdreville-Hainneville Tourlaville Flers Argentan Bayeux Vire Granville Mondeville Coutances Ifs L' Aigle Ouistreham Avranches Falaise Honfleur Valognes La Ferté-Macé Carentan Colombelles
  
Haute Normandie
  Le Havre Rouen Évreux Dieppe Sotteville-lès-Rouen Saint-Étienne-du-Rouvray Le Grand-Quevilly Vernon Le Petit-Quevilly Mont-Saint-Aignan Fécamp Louviers Elbeuf Montivilliers Canteleu Val-de-Reuil Barentin Bolbec Maromme Bois-Guillaume Oissel Bernay Gisors Yvetot
    
Nord Pas de Calais
 Lille Roubaix Tourcoing Calais Dunkerque Villeneuve-d'Ascq Boulogne-sur-Mer Douai Wattrelos Valenciennes Arras Marcq-en-Barœul Lens Cambrai Maubeuge Liévin Lambersart Béthune Armentières Hénin-Beaumont Coudekerque-Branche Bruay-la-Buissière Saint-Pol-sur-Mer Grande-Synthe Mons-en-Barœul

Pays de Loire
  Nantes Angers Le Mans Saint-Nazaire Cholet Laval La Roche-sur-Yon Saint-Herblain Rezé Saumur Saint-Sébastien-sur-Loire Orvault Vertou Couëron La Chapelle-sur-Erdre Challans La Baule-Escoublac Bouguenais Les Sables-d'Olonne Carquefou La Flèche Les Herbiers Fontenay-le-Comte Mayenne Guérande
 
Picardie
  Amiens Saint-Quentin Beauvais Compiègne Creil Soissons Laon Abbeville Nogent-sur-Oise Senlis Tergnier Château-Thierry Noyon Crépy-en-Valois Méru Chauny Pont-Sainte-Maxence Montataire Chantilly Hirson Albert Villers-Cotterêts Clermont Gouvieux Chambly
  
Poitou Charentes
  Poitiers La Rochelle Niort Angoulême Châtellerault Rochefort Saintes Cognac Bressuire Royan Thouars Parthenay Soyaux Buxerolles Aytré Loudun Saint-Jean-d'Angély Mauléon Ruelle-sur-Touvre Chauvigny Saint-Benoît Montmorillon La Couronne Tonnay-Charente Saint-Maixent-l'École

Provence Alpes Côte d'Azur
  Marseille Nice Toulon Aix-en-Provence Avignon Antibes Cannes La Seyne-sur-Mer Hyères Arles Fréjus Cagnes-sur-Mer Grasse Martigues Aubagne Le Cannet Istres Salon-de-Provence Vitrolles Gap Marignane Draguignan Six-Fours-les-Plages La Ciotat Saint-Raphaël
 
Rhône Alpes
Lyon Saint-Étienne Grenoble Villeurbanne Valence Vénissieux Chambéry Annecy Caluire-et-Cuire Saint-Priest Bourg-en-Bresse Vaulx-en-Velin Roanne Saint-Chamond Bron Saint-Martin-d'Hères Échirolles Romans-sur-Isère Montélimar Villefranche-sur-Saône Vienne Thonon-les-Bains Rillieux-la-Pape Meyzieu Annemasse
 


retour-widget-1.gif Retour menu Widget 
Repost 0
Published by Le Chevalier Dauphinois - dans ** Mes Widgets
commenter cet article
1 janvier 1994 6 01 /01 /janvier /1994 01:01

Les widgets sont des petits "gadgets" amusants et parfois utiles agrémentant nos blogs et sites web.

  Je vais tenter de vous lister les plus fiables, après les avoir testés bien sur.

 

  J'enlève donc mon armure de Chevalier Dauphinois et j'enfile l'imperméable de l'inspecteur gadget.


Légende :
  S= Sans Javascript
  J = Widget possédant du Javascript
 
 

               
--> Météo  
 Météo sur 1 jour avec informations S              
                 
--> Diaporama
                 
                 
                 
--> Menu Dynamique
 Menu horizontal avec fond dynamique S              
                 
                 
--> Traduction d'un article de votre blog
Traduction texte Français en 24 langues - Drapeaux S              
                 
                 
 --> Images (animation, transformation ...)
Agrandir plusieurs images dans un tableau sans clic S        1 mapping avec 3 rollover S    
Afficher une image si le curseur est sur un mot sans clic S              
                 
                 
 --> Divers
Un curseur faisant une pluie d'étoiles      J          
                 
                 
                 
                 
                 
                 
                 
                 
                 
Repost 0
Published by Le Chevalier Dauphinois - dans ** Mes Widgets
commenter cet article