D
deleted34147
Salut,
Je vous partages quelques codes Javascript et HTML assez marrant, et utile en même temps.
Faire clignote un texte :
Aperçu ?
____________
Faire défiler un texte.
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 ?
(cc @Suuprem
)
Aperçu :
__________
Défilement du texte :
Vers le haut :
Rebondissement :
Vers l'infinie, et l'haut delaaaa !!!! :
Aperçu :
(cc @Jeson)
Défillement avec une image :
__________
Texte néon :
_________
Texte qui ZOOM / DEZOOM
:
___
FIN.
Site utiliser et utile pour vous:
AND

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 ?
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
____________
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 ?

HTML:
<script src="http://ddata.over-blog.com/xxxyyy/0/06/31/40/scripts/flocons/coeurs.js"></script></div>
Aperçu :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
__________
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 :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
(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
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:
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
AND
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.

Dernière édition par un modérateur: