[et JAVASCRIPT] Quelques codes marrant, à intégrer sur vos sites !

  • Auteur de la discussion Auteur de la discussion deleted34147
  • Créé le Créé le
D

deleted34147

Salut,

Je vous partages quelques codes Javascript et HTML assez marrant, et utile en même temps. ;)

Faire clignote un texte :

HTML:
<span style="text-decoration:blink;">VOTRE TEXTE ICI</span>

Aperçu ?

____________

Faire défiler un texte.

HTML:
<marquee scrolldelay="1" scrollamount="3" width="600" height="300" direction="up" ><span style="font-family: arial;"><span style="font-size: 15pt;">TEXTE<br />TEXTE<br />TEXTE<br />TEXTE<br />TEXTE<br />TEXTE<br />TEXTE<br />TEXTE<br /></span></marquee>

Pour ajouter du texte supplémentaire:
il vous d'ajouter TEXTE<br />avant la balise </span>

Pour supprimer du texte :
il vous suffit d'enlever un TEXTE<br />
attention à ne rien oublier sinon il y aura une erreur!

___________

Faire tomber des coeurs sur votre page ? :troll: (cc @Suuprem (l))

HTML:
<script src="http://ddata.over-blog.com/xxxyyy/0/06/31/40/scripts/flocons/coeurs.js"></script></div>

Aperçu :

__________

Défilement du texte :

Vers le haut :
HTML:
<marquee direction="up"> Saisissez votre texte ici </ marquee>[HTML]
Vers le bas : [HTML]<marquee direction="down"> Saisissez votre texte ici </ marquee>

Rebondissement :
HTML:
<marquee behavior="alternate"> Saisissez votre texte ici </ marquee>

Vers l'infinie, et l'haut delaaaa !!!! :
HTML:
<marquee scrollamount="1"> Saisissez votre texte ici </ marquee><marquee scrollamount="5"> Saisissez votre texte ici </ marquee><marquee scrollamount="10"> Saisissez votre texte ici </ marquee>

Aperçu :

(cc @Jeson)

Défillement avec une image :
HTML:
<comportement chapiteau = direction "scroll" = " droite "> <img src="votre nom_de_fichier.gif (ou .jpg)"> <BR> Votre texte va ici </ marquee>

__________


Texte néon :
HTML:
<center><h1>
<script language="JavaScript1.2">
var message="Optimisation-blogger.blogspot.com" //
var neonbasecolor="black" //couleur de base du texte
var neontextcolor="#509188"
var neontextcolor2="#C3F1EB"
var flashspeed=100 // vitesse du flashing en millisecondes
var flashingletters=3 // nombre de lettres qui flashent en neontextcolor
var flashingletters2=1 // nombre de lettres qui flashent en neontextcolor2 (0 pour désactiver)
var flashpause=0 // pause entre les cycles de flashing en millisecondes

///Ne rien toucher sous cette ligne///
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)

function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}

function neon(){

//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}

//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor

if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor


if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}

function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script></h1></center>[HTML]

Aperçu : http://loukileplusbeau.craym.eu/louki/Ca_clignote.html

_________


Machine à écrire :s : [HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Superbe texte défilant</title>
<style>
#ticker{font-family:cursive;color:blue;
}
</style>
  <script type="text/javascript">
<!--
var speed = 10            //vitesse d'écriture
var speed2 = 100000        //temp de pause
// Ci-dessous : Rajoutez des messages sans oublier de changer le numéro du msg[...]
msg = []
function upticker(){
if (y > msg2.length - 1) {
y = 0; setTimeout("upticker()",speed);}
else{if (x > msg2[y].length) {
msg = msg2[y];x = 0; y++;
setTimeout("upticker()",speed2);}
else {msg = msg2[y].substring(0,x++);
setTimeout("upticker()",speed);}
t.innerHTML = msg };}
setTimeout("upticker()",speed);
function init(){t=document.getElementById("ticker");
msg[0]=t.innerHTML;msg2 = msg;x = y = 0;
upticker()
}
window.onload=init
//-->
</script>
</head>
<body >
<div id="ticker">Bonjour je vous présente ce texte défilant type machine à écrire.<br>
Comme vous le voyez vous pouvez sauter de ligne a tout moment attention on y va !.<br>
Il suffit de mettre la balise <br /> et voila.<br>
  Vous pouvez changer :
</p>
<ul>
  <li>Le contenu HTML dans le div id="sticker"</li>
  <li>Le style dans la feuille de  style </li>
  <li>Dans le script
    <ul>
      <li>La vitesse d'écriture.
  </li>
      <li>Le temps de pause a la fin du texte.</li>
    </ul>
  </li>
</ul>
   Voila j'espère que la démo vous a plus.<br>
Si vous voulez m'envoyer un mail voici mon adresse :<br>
ici ton adresse e-mail
<center>
  <p>Salut a tous les webmaster et bon surf a tous.
</p>
  <p>RealityGaming</p>
</center>
</div>

</body>
</html>

_________


Texte qui ZOOM / DEZOOM :O :
HTML:
<script type="text/javascript">

/*
Inserer ici les messages à afficher
*/
var message2 = new initTableau(
"Optimisation-blogger.blogspot.com",
"vous propose",
"des tonnes de codes",
"pour votre site !"
);

/*
Déclaration de variables
vous pouvez modifier la vitesse et la taille de police max!
Attention : Plus vitesse est haut, plus la vitesse diminue!
*/
var vitesse = 1;
var cycle = 1000;
var taillemax = 36;
var police = "Arial";
var x = 0;
var y = 0;
var message, taille;


/*
Ne plus rien modifié sous cette ligne
*/

function initTableau() {
this.length = initTableau.arguments.length;
for (var i = 0; i < this.length; i++) {
  this[i] = initTableau.arguments[i];
    }
}

function AugmenteTaille(){
message = message2[y];
if (x < taillemax) {
  x++;
  setTimeout("AugmenteTaille()",vitesse);
}
else setTimeout("DiminueTaille()",cycle);

//Utilisation différente du dhtml selon Netscape ou Internet Explorer
if(navigator.appName == "Netscape" && navigator.appVersion.indexOf("5") == -1) {
  taille = "<font point-size='"+x+"pt'>";
  document.calque.document.write(taille+"<center><font face="+police+">"+message+"</center></font></font>");
  document.calque.document.close();
  }
/*
Condition pour Netscape 6
*/
if((navigator.appName == "Netscape") && (navigator.appVersion.indexOf("5") != -1)){
  document.getElementById("calque").innerHTML = "<center><font face="+police+" style='font-size:"+x+"px'>"+message+"</center></font>";
  }
if (navigator.appVersion.indexOf("MSIE") != -1){
  calque.innerHTML = "<center><font face="+police+">"+message+"</center></font>";
  calque.style.fontSize=x+'px'
     }
}

function DiminueTaille(){
if (x > 1) {
  x--;
  setTimeout("DiminueTaille()",vitesse);
  }
else {
  setTimeout("AugmenteTaille()",cycle);
  y++;
  if (y > message2.length - 1) y = 0;
  }

if(navigator.appName == "Netscape" && navigator.appVersion.indexOf("5") == -1){
  taille = "<font point-size='"+x+"pt'>";
  document.calque.document.write(taille+"<center><font face=Arial>"+message+"</center></font></font>");
  document.calque.document.close();
  }
/*
Condition pour Netscape 6
*/
if((navigator.appName == "Netscape") && (navigator.appVersion.indexOf("5") != -1)){
  document.getElementById("calque").innerHTML ="<center><font face="+police+" style='font-size:"+x+"px'>"+message+"</center></font>";

  }

if (navigator.appVersion.indexOf("MSIE") != -1){
  calque.innerHTML = "<center><font face=Arial>"+message+"</center></font>";
  calque.style.fontSize=x+'px'
    }
}



/*
On adapte le calque selon le navigateur
*/

if(navigator.appName == "Netscape" && navigator.appVersion.indexOf("5") == -1)
document.write('<layer id="calque"></layer><br>');
if((navigator.appName == "Netscape") && (navigator.appVersion.indexOf("5") != -1))
document.write('<DIV STYLE="font-size:12px" ID="calque"></DIV>');
if (navigator.appVersion.indexOf("MSIE") != -1)
document.write('<span id="calque"></span><br>');




setTimeout("AugmenteTaille()",vitesse);
</script><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript>

___

FIN.

Site utiliser et utile pour vous:





AND

:modo:
 
Dernière édition par un modérateur:
Fail

Tu a utiliser quoi pour faire le site ?
Un site, des connaissances, un FTP (d)


┏***┓┏┓╋┏┓┏**┓╋┏***┓┏****┓┏***┓┏***┓

┗┓┏┓***╋***┏┓*╋*┏*┓**┏┓┏┓**┏**┛*┏*┓*

╋******╋***┗┛┗┓*┗**┓┗┛**┗┛*┗**┓*┗*┛*

╋******╋***┏*┓*┗**┓*╋╋**╋╋*┏**┛*┏**┛

┏┛┗┛**┗*┛**┗*┛**┗*┛*╋╋**╋╋*┗**┓**

┗***┛┗***┛┗***┛┗***┛╋╋┗┛╋╋┗***┛┗┛
 
Dernière édition par un modérateur:
Code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="Generator" content="iWeb 3.0.4" />
    <meta name="iWeb-Build" content="local-build-20130922" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta name="viewport" content="width=700" />
    <title>Bienvenue sur mon site</title>
    <link rel="stylesheet" type="text/css" media="screen,print" href="Bienvenue_files/Bienvenue.css" />
    <!--[if lt IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Bienvenue_files/BienvenueIE.css'/><![endif]-->
    <!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Media/IE8.css'/><![endif]-->
    <style type="text/css">
/*<![CDATA[*/
    @import "Scripts/Widgets/HTMLRegion/Paste.css";
/*]]>*/
</style><style type="text/css"> <!--
    @import "Scripts/Widgets/YouTube/YouTube.css";
--></style>
    <style type="text/css"><!--
    @import "Scripts/Widgets/Timer/TimerWidget.css";
--></style>
    <script type="text/javascript" src="Scripts/iWebSite.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/Navbar/navbar.js"></script>
    <script type="text/javascript" src="Scripts/iWebImage.js"></script>
    <script type="text/javascript" src="Scripts/iWebMediaGrid.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/HTMLRegion/Paste.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/YouTube/YouTube.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/YouTube/localizedStrings.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/Timer/TimerWidget.js"></script>
    <script type="text/javascript" src="Scripts/Widgets/Timer/localizedStrings.js"></script>
    <script type="text/javascript" src="Bienvenue_files/Bienvenue.js"></script>
  </head>
  <body style="background: rgb(0, 0, 0); margin: 0pt; " onload="onPageLoad();" onunload="onPageUnload();">
    <div style="text-align: center; ">
      <div style="margin-bottom: 0px; margin-left: auto; margin-right: auto; margin-top: 0px; overflow: hidden; position: relative; word-wrap: break-word;  background: rgb(0, 0, 0); text-align: left; width: 700px; " id="body_content">
        <div style="margin-left: 0px; position: relative; width: 700px; z-index: 0; " id="nav_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div class="com-apple-iweb-widget-navbar flowDefining" id="widget0" style="margin-left: 35px; margin-top: 0px; opacity: 1.00; position: relative; width: 630px; z-index: 1; ">
   
            <div id="widget0-navbar" class="navbar">

     
              <div id="widget0-bg" class="navbar-bg">

       
                <ul id="widget0-navbar-list" class="navbar-list">
<li></li>
</ul>
               
     
</div>
             
   
</div>
          </div>
          <script type="text/javascript"><!--//--><![CDATA[//><!--
new NavBar('widget0', 'Scripts/Widgets/Navbar', 'Scripts/Widgets/SharedResources', '.', {"path-to-root": "", "navbar-css": ".navbar {\n\tfont-family: Arial, sans-serif;\n\tfont-size: 1em;\n\tcolor: #A1A1A1;\n\tmargin: 9px 0px 6px 0px;\n\tline-height: 30px;\n}\n\n.navbar-bg {\n\ttext-align: center;\n}\n\n.navbar-bg ul {\n\tlist-style: none;\n\tmargin: 0px;\n\tpadding: 0px;\n}\n\n\nli {\n\tlist-style-type: none;\n\tdisplay: inline;\n\tpadding: 0px 10px 0px 10px;\n}\n\n\nli a {\n\ttext-decoration: none;\n\tcolor: #A1A1A1;\n}\n\nli a:visited {\n\ttext-decoration: none;\n\tcolor: #A1A1A1;\n}\n\n\nli a:hover\n{\n\ttext-decoration: none;\n \tcolor: #eee;\n}\n\n\nli.current-page a\n{\n\ttext-decoration: none;\n\t color: #fff;\n\tfont-weight: bold;\n\n}", "current-page-GUID": "DE31E35D-5D91-4983-BF20-0BB3A990DE16", "isCollectionPage": "NO"});
//--><!]]></script>
          <div style="clear: both; height: 0px; line-height: 0px; " class="spacer"> </div>
        </div>
        <div style="height: 74px; margin-left: 0px; position: relative; width: 700px; z-index: 10; " id="header_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div id="id1" style="height: 51px; left: 35px; position: absolute; top: 23px; width: 630px; z-index: 1; " class="style_SkipStroke shape-with-text">
            <div class="text-content style_External_630_51" style="padding: 0px; ">
              <div class="style">
                <p style="padding-bottom: 0pt; padding-top: 0pt; " class="Header">Bienvenue sur mon site</p>
              </div>
            </div>
          </div>
         


          <div style="height: 1px; width: 630px;  height: 1px; left: 35px; position: absolute; top: 3px; width: 630px; z-index: 1; " class="tinyText">
            <div style="position: relative; width: 630px; ">
              <img src="Bienvenue_files/shapeimage_1.jpg" alt="" style="height: 1px; left: 0px; position: absolute; top: 0px; width: 630px; " />
            </div>
          </div>
          <div class="com-apple-iweb-widget-HTMLRegion" id="widget1" style="height: 18px; left: 497px; opacity: 1.00; position: absolute; top: 4px; width: 200px; z-index: 1; ">
            <script type="text/javascript"><!--//--><![CDATA[//><!--
    var widget1_htmlMarkupURL = ".//Bienvenue_files/widget1_markup.html";
//--><!]]></script>
            <div id="widget1-htmlRegion" class="html_region_widget"></div>
          </div>
          <script type="text/javascript"><!--//--><![CDATA[//><!--
new Paste('widget1', 'Scripts/Widgets/HTMLRegion', 'Scripts/Widgets/SharedResources', '.', {"emptyLook": false});
//--><!]]></script>
        </div>
        <div style="margin-left: 0px; position: relative; width: 700px; z-index: 5; " id="body_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div style="height: 1px; line-height: 1px; " class="tinyText"> </div>
          <div style="margin-left: 35px; margin-top: 387px; position: relative; width: 630px; z-index: 1; " class="style_SkipStroke_1 shape-with-text flowDefining">
            <div class="text-content style_External_630_180" style="padding: 0px; ">
              <div class="style">
                <p style="padding-bottom: 0pt; padding-top: 0pt; " class="Body"><br />Ce site, ne sert strictement à rien.<br />Je test juste, mes connaissance en HTML.</p>
              </div>
              <div style="height: 107px; line-height: 107px; " class="tinyText"> </div>
            </div>
          </div>
         


          <div id="id2" style="height: 33px; left: 35px; position: absolute; top: 359px; width: 630px; z-index: 1; " class="style_SkipStroke_2 shape-with-text">
            <div class="text-content graphic_shape_layout_style_default_External_630_33" style="padding: 0px; ">
              <div class="graphic_shape_layout_style_default">
                <p style="padding-bottom: 0pt; padding-top: 0pt; " class="Title">Bienvenue sur le site de Louki. </p>
              </div>
            </div>
          </div>
          <div class="com-apple-iweb-widget-YouTube aboveStrokesAndFrames" id="widget2" style="height: 355px; left: 137px; opacity: 1.00; position: absolute; top: 519px; width: 425px; z-index: 1; ">
            <div id="widget2-youTube" class="youtube_widget"></div>
          </div>
          <script type="text/javascript"><!--//--><![CDATA[//><!--
new YouTubeWidget('widget2', 'Scripts/Widgets/YouTube', 'Scripts/Widgets/SharedResources', '.', {"movieURL": "http:\/\/www.youtube.com\/v\/3QA97ZCbtfQ", "lastNormalizedAddress": "http:\/\/www.youtube.com\/watch?v=3QA97ZCbtfQ", "address": "http:\/\/www.youtube.com\/watch?v=3QA97ZCbtfQ", "showRelatedVideos": true});
//--><!]]></script>
          <div style="height: 306px; width: 827px;  height: 306px; left: -64px; position: absolute; top: 15px; width: 827px; z-index: 1; " class="tinyText style_SkipStroke_3">
            <img src="Bienvenue_files/1010592_365045120273893_1986039107_n.jpg" alt="" style="border: none; height: 306px; width: 827px; " />
          </div>
          <div style="height: 306px; line-height: 306px; " class="spacer"> </div>
        </div>
        <div style="height: 150px; margin-left: 0px; position: relative; width: 700px; z-index: 15; " id="footer_layer">
          <div style="height: 0px; line-height: 0px; " class="bumper"> </div>
          <div class="com-apple-iweb-widget-timer" id="widget3" style="height: 50px; left: 268px; opacity: 1.00; position: absolute; top: 25px; width: 163px; z-index: 1; ">
            <div id="widget3-timer" class="timer_widget noAutoPNGFixInTree"></div>
          </div>
          <script type="text/javascript"><!--//--><![CDATA[//><!--
new TimerWidget('widget3', 'Scripts/Widgets/Timer', 'Scripts/Widgets/SharedResources', '.', {"labelsEnabled": 1, "2": "Bienvenue_files\/2.png", "bg-cap-right": "Bienvenue_files\/bg-cap-right.png", "fg-separator": "Bienvenue_files\/fg-separator.png", "3": "Bienvenue_files\/3.png", "9": "Bienvenue_files\/9.png", "type": 1, "4": "Bienvenue_files\/4.png", "5": "Bienvenue_files\/5.png", "target": 1382470860000, "labelFontSize": 10, "6": "Bienvenue_files\/6.png", "bg-cap-left": "Bienvenue_files\/bg-cap-left.png", "7": "Bienvenue_files\/7.png", "bg-center": "Bienvenue_files\/bg-center.png", "0": "Bienvenue_files\/0.png", "8": "Bienvenue_files\/8.png", "1": "Bienvenue_files\/1.png", "unitsRange": {"location": 1, "length": 4}});
//--><!]]></script>
        </div>
      </div>
    </div>
  </body>
</html>
 
Dommage, le site n'est plus en service :sad:

Ca peut être utile pour les codes source de deface :$
 
Retour
Haut