Dans notre sujet d'aujourd'hui, nous afficherons un ensemble important de codes javascript et html pour les concepteurs de sites Web et les blogs dont ils ont absolument besoin lors de toute modification du site.
Premièrement: les codes de texte
Code de texte en gras
<b>اكتب النص هنا </b>
Code de réglage de l'orientation du texte
<p dir="rtl" align="right">اكتب هنا النص الذي سيظهر من اليمين إلى اليسار</p>
Code pour contrôler la taille, la couleur et le type de police
<CENTER><FONT COLOR="#كود اللون المرغوب" FACE="اسم الخط المرغوب" SIZE="4">اكتب هنا ما تريد</FONT></CENTER>
Le code texte monte
<marquee behavior="scroll" direction="up" height="140" scrollamount="1" scrolldelay="60" onMouseOver="this.stop()" onMouseOut="this.start()"> <center><br>اكتب هنا النص الذي سيتحرك للأعلى الفقرة 1 <br>اكتب هنا النص الذي سيتحرك للأعلى الفقرة 2 <br>مدونة كن داعيا للخير 3 <br>اكتب هنا النص الذي سيتحرك للأعلى الفقرة 4 <br>......</center> </marquee>
Code de texte qui se développe et se contracte
<table align="center" width="98%"><tr><td> <HTML> <HEAD> <script language="JavaScript"> var sizes = new Array("0px", "1px", "2px", "3px", "4px"); 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"><font size="3">مدونة كن داعيا للخير</font></hi> </BODY> </HTML></td></tr></table>
Code texte basculé à gauche et à droite
<marquee scrolldelay="60" scrollamount="3" width="400" direction="left" behavior="alternate" bgcolor="#FF0000">مدونة كن داعيا للخير</marquee>
Code affichant du texte avec des liens alternés
<div style="position:relative;center:0px;top:0px"> <span id="highlighter" style="position:absolute;left:0;top:0;font-size:18px;font-family:Verdana;background-color:yellow;clip:rect(0px 0px auto 0px)"></span> </div> <script type="text/javascript"> var tickercontents=new Array() tickercontents[0]='مدونة كن داعيا للخير <a href="http://conda3ianllkhir.blogspot.com/"rel="nofollow" target="_blank">text</a>' tickercontents[1]='اكتب هنا نص عادي رقم 1 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي">text</a>' tickercontents[2]='اكتب هنا نص عادي رقم 2 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي">text</a>' tickercontents[3]='اكتب هنا نص عادي رقم 0 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي">text</a>' var tickdelay=3000 //delay btw messages var highlightspeed=10 //10 pixels at a time. ////Do not edit pass this line//////////////// var currentmessage=0 var clipwidth=0 function changetickercontent(){ crosstick.style.clip="rect(0px 0px auto 0px)" crosstick.innerHTML=tickercontents[currentmessage] highlightmsg() } function highlightmsg(){ var msgwidth=crosstick.offsetWidth if (clipwidth<msgwidth){ clipwidth+=highlightspeed crosstick.style.clip="rect(0px "+clipwidth+"px auto 0px)" beginclip=setTimeout("highlightmsg()",20) } else{ clipwidth=0 clearTimeout(beginclip) if (currentmessage==tickercontents.length-1) currentmessage=0 else currentmessage++ setTimeout("changetickercontent()",tickdelay) } } function start_ticking(){ crosstick=document.getElementById? document.getElementById("highlighter") : document.all.highlighter crosstickParent=crosstick.parentNode? crosstick.parentNode : crosstick.parentElement if (parseInt(crosstick.offsetHeight)>0) crosstickParent.style.height=crosstick.offsetHeight+'px' else setTimeout("crosstickParent.style.height=crosstick.offsetHeight+'px'",100) //delay for Mozilla's sake changetickercontent() } if (document.all || document.getElementById) window.onload=start_ticking </script>
Code de texte animé
<div align="center"> <table border="0" width="100%" style="border-collapse: collapse"> <tr><td class="alt1" colspan="3"><b> <font size="4" color="000000"> <marquee direction="right" width="100%" height="20"direction="right" onmouseover="this.stop()" onmouseout="this.start()" scrolldelay="0" scrollamount="5">مدونة كن داعيا للخير </marquee></font></b></td> </tr></table></div>
Code à barres animé avec liens
<marquee direction="right" width="100%" height="20"direction="right" onmouseover="this.stop()" onmouseout="this.start()" scrolldelay="0" scrollamount="5"> <a href="اكتب هنا عنوان الموقع">اكتب هنا اسم الموقع</a> ------ </marquee>
Le code texte s'allume progressivement
<h2> <script language="JavaScript1.2"> var message="مدونة كن داعيا للخير" var neonbasecolor="gray" var neontextcolor="yellow" var flashspeed=100 //in milliseconds ///No need to edit below this line///// 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++) //eval("document.all.neonlight"+m).style.color=neonbasecolor crossref(m).style.color=neonbasecolor } //cycle through and change individual letters to neon color crossref(n).style.color=neontextcolor if (n<message.length-1) n++ else{ n=0 clearInterval(flashing) setTimeout("beginneon()",1500) return } } function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed) } beginneon() </script> </h2> </font></p>
Code de texte qui s'allume de différentes couleurs
<b> <font size="5"> <script> // ********** عدل هنا var text="مدونة كن داعيا للخير" var speed=80 // سرعه تغير الالوان // ********** لا تعدل شي هنا if (document.all||document.getElementById){ document.write('<span id="highlight">' + text + '</span>') var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight } else document.write(text) var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0") var r=1 var g=1 var b=1 var seq=1 function changetext(){ rainbow="#"+hex[r]+hex[g]+hex[b] storetext.style.color=rainbow } function change(){ if (seq==6){ b-- if (b==0) seq=1 } if (seq==5){ r++ if (r==12) seq=6 } if (seq==4){ g-- if (g==0) seq=5 } if (seq==3){ b++ if (b==12) seq=4 } if (seq==2){ r-- if (r==0) seq=3 } if (seq==1){ g++ if (g==12) seq=2 } changetext() } function starteffect(){ if (document.all||document.getElementById) flash=setInterval("change()",speed) } starteffect() </script> </font></b> </font></p>
Deuxièmement: les codes d'image
Ajouter un code d'image
<img src="رابط الصورة" >
Code image avec lien
<CENTER><a href="الرابط"> <img src="رابط الصورة" width="30" height="80" border="2" align=" middle" /></a></CENTER>
Le code change automatiquement les images
<center><style type="text/css"> #pscroller1{ font-size: 14px; font-family: Tahoma; width: 250px; height: 250px; border: 0px solid black; padding: 5px; background-color: white; } </style> <script type="text/javascript"> /*Example message arrays for the two demo scrollers*/ var pausecontent=new Array() pausecontent[0]='<img border="0" src="https://lh6.googleusercontent.com/-MzjplMi8KoQ/TtZvZy6ociI/AAAAAAAAAu4/QarCCQhJFaI/s125/%2525D8%2525A8%2525D8%2525A7%2525D9%252586%2525D8%2525B1-%2525D8%2525AC%2525D8%2525AF%2525D9%25258A%2525D8%2525AF.gif">' pausecontent[1]='<img border="0" src="رابط الصورة 2">' pausecontent[2]='<img border="0" src="رابط الصورة 3">' pausecontent[3]='<img border="0" src="رابط الصورة 1">' </script> <script type="text/javascript"> /*********************************************** * Pausing up-down scroller- © Dynamic Drive (www.dynamicdrive.com) ***********************************************/ function pausescroller(content, divId, divClass, delay){ this.content=content //message array content this.tickerid=divId //ID of ticker div to display information this.delay=delay //Delay between msg change, in miliseconds. this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is) this.hiddendivpointer=1 //index of message array for hidden div document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>') var scrollerinstance=this if (window.addEventListener) //run onload in DOM2 browsers window.addEventListener("load", function(){scrollerinstance.initialize()}, false) else if (window.attachEvent) //run onload in IE5.5+ window.attachEvent("onload", function(){scrollerinstance.initialize()}) else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec setTimeout(function(){scrollerinstance.initialize()}, 500) } // ------------------------------------------------------------------- // initialize()- Initialize scroller method. // -Get div objects, set initial positions, start up down animation // ------------------------------------------------------------------- pausescroller.prototype.initialize=function(){ this.tickerdiv=document.getElementById(this.tickerid) this.visiblediv=document.getElementById(this.tickerid+"1") this.hiddendiv=document.getElementById(this.tickerid+"2") this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv)) //set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2) this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px" this.getinline(this.visiblediv, this.hiddendiv) this.hiddendiv.style.visibility="visible" var scrollerinstance=this document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1} document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0} if (window.attachEvent) //Clean up loose references in IE window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null}) setTimeout(function(){scrollerinstance.animateup()}, this.delay) } // ------------------------------------------------------------------- // animateup()- Move the two inner divs of the scroller up and in sync // ------------------------------------------------------------------- pausescroller.prototype.animateup=function(){ var scrollerinstance=this if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){ this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px" this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px" setTimeout(function(){scrollerinstance.animateup()}, 50) } else{ this.getinline(this.hiddendiv, this.visiblediv) this.swapdivs() setTimeout(function(){scrollerinstance.setmessage()}, this.delay) } } // ------------------------------------------------------------------- // swapdivs()- Swap between which is the visible and which is the hidden div // ------------------------------------------------------------------- pausescroller.prototype.swapdivs=function(){ var tempcontainer=this.visiblediv this.visiblediv=this.hiddendiv this.hiddendiv=tempcontainer } pausescroller.prototype.getinline=function(div1, div2){ div1.style.top=this.visibledivtop+"px" div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px" } // ------------------------------------------------------------------- // setmessage()- Populate the hidden div with the next message before it's visible // ------------------------------------------------------------------- pausescroller.prototype.setmessage=function(){ var scrollerinstance=this if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it) setTimeout(function(){scrollerinstance.setmessage()}, 100) else{ var i=this.hiddendivpointer var ceiling=this.content.length this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1 this.hiddendiv.innerHTML=this.content[this.hiddendivpointer] this.animateup() } } pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any if (tickerobj.currentStyle) return tickerobj.currentStyle["paddingTop"] else if (window.getComputedStyle) //if DOM2 return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top") else return 0 } </script> <script type="text/javascript"> //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds) new pausescroller(pausecontent, "pscroller1", "someclass", 3000) document.write("<br />") </script> </center>
Code animé
<img src="رابط الصورة المتحركة" onload="NcodeImageResizer.createOn(this);" border="0" originalWidth="250" originalHeight="270">
Code à barres animé avec liens
Vous pouvez contrôler la hauteur et la largeur des images en changeant manuellement leurs valeurs et en changeant la direction de la bande en changeant le mot vers le haut dans le code en bas, à droite ou en soulevant
<center/> <div class="textwidget"><marquee direction="up" width="115" onmouseover="this.stop()" scrollamount="2" onmouseout="this.start()" height="125" align="left"><br /> <a href="http://conda3ianllkhir.blogspot.com/" rel="nofollow"><img border="0" alt="مدونة كن داعيا للخير" width="115" src="http://img12.imageshack.us/img12/914/75539242.png" height="115" /></a> <br/> <a href="http://conda3ianllkhir.blogspot.com/" rel="nofollow"><img border="0" alt="مدونة كن داعيا للخير" width="115" src=" https://lh6.googleusercontent.com/-MzjplMi8KoQ/TtZvZy6ociI/AAAAAAAAAu4/QarCCQhJFaI/s125/%2525D8%2525A8%2525D8%2525A7%2525D9%252586%2525D8%2525B1-%2525D8%2525AC%2525D8%2525AF%2525D9%25258A%2525D8%2525AF.gif"height="115" /></a> <br/> <a href="ضع الرابط هنا" rel="nofollow"><img border="0" alt="اسم الصورة" width="115" src="رابط الصورة" height="115" /></a> <br/> <a href=" ضع الرابط هنا" rel="nofollow"><img border="0" alt="اسم الصورة" width="115" src=" رابط الصورة"height="115" /></a> <br/> <a href="ضع الرابط هنا" rel="nofollow"><img border="0" alt="اسم الصورةرابط الصورة" height="115" /></a> <br/> <a href="ضع الرابط هنا/search?updated-max=2011-07-26T10%3A47%3A00-07%3A00&max-results=7 " rel="nofollow"><img border="0" alt="اسم الصورة" width="115" src="رابط الصورة "height="115" /></a> " width="115" src=" <p/></p></marquee></div></center>
Troisièmement: les codes de liens
Ajouter un code de lien
<a href="ضع الرابط هنا">Nom du site</a>
Ouvrir le lien dans une nouvelle fenêtre
<a href="ضع الرابط هنا" target="_blank">Nom du site</a>
Ouvrir le lien dans la même fenêtre
<a href="ضع الرابط هنا" target="_self">Nom du site</a>
Couleur du lien
<a style="color:اسم اللون باللغة الانجليزية;" href="رابط الموقع">Nom du site</a>
Quatrièmement: les codes islamiques
<center><iframe align="center" allowtransparency="1" frameborder="0" height="334" id="IW_frame_1438" scrolling="no" src="http://www.tvquran.com/add/index.htm" width="302"></iframe></center></div>
<iframe align="center" src="http://www.wathakker.net/outdoor-strip-marquee.html" frameborder="0" allowtransparency="1" scrolling="no" width="474" height="41" vspace="0"></iframe>
Cinquième: codes de nouvelles
<iframe name="I1" marginwidth="1" marginheight="1" height="30" width="90%" scrolling="no" border="0" frameborder="0" src="http://news.bbc.co.uk/hi/arabic/news/ticker.stm"></iframe>
Bar Al-Jazeera
<iframe frameborder="0" height="50" marginheight="0" marginwidth="0" scrolling="no" src="http://www.faisal1.com/News_Grab/jazeera.php" width="100%"></iframe>
Bande filet Al Arabiya
<div width="600"><script src="http://www.alarabiya.net/ara_v_ticker.html"></script></div>
Sixième: divers scripts
Code du mode flash (Vous pouvez contrôler la longueur et la largeur en modifiant les valeurs de largeur, hauteur)
<object width="150" height="340"> <param value="MYFLASH.swf" name="movie"/> <embed width="150" src="URL OF MYFLASH.swf" height="340"> </embed> </object>
Code pour ajouter une page de site dans votre page de site
<div dir="rtl" style="text-align: right;" trbidi="on"> <iframe height="500" src="رابط الموقع" width="600"></iframe></div> </div>
Script pour imprimer la page
<a href="javascript:window.print()">اطبع هذه الصفحة</a>
Calculatrice de script
<SCRIPT> function compute(obj) {obj.expr.value = eval(obj.expr.value)} var one = '1' var two = '2' var three = '3' var four = '4' var five = '5' var six = '6' var seven = '7' var eight = '8' var nine = '9' var zero = '0' var plus = '+' var minus = '-' var multiply = '*' var divide = '/' var decimal = '.' function enter(obj, string) {obj.expr.value += string} function clear(obj) {obj.expr.value = ''} </SCRIPT> <FONT COLOR="#CC0000" face="Arial"><P><B>الألة الحاسبة الإلكترونية</B></P></FONT> <FORM name="calc"> <DIV align="center"> <TABLE border="1" bgcolor="#0033CC"> <TR> <TD colSpan="4"><INPUT size=30 name=expr action="compute(this.form)"></TD></TR> <TR> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, seven)" type=button value=" 7 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, eight)" type=button value=" 8 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, nine)" type=button value=" 9 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, divide)" type=button value=" / "></P></TD></TR> <TR> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, four)" type=button value=" 4 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, five)" type=button value=" 5 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, six)" type=button value=" 6 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, multiply)" type=button value=" * "></P></TD></TR> <TR> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, one)" type=button value=" 1 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, two)" type=button value=" 2 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, three)" type=button value=" 3 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, minus)" type=button value=" - "></P></TD></TR> <TR> <TD bgColor="#000033" colSpan=2> <P><INPUT onclick="enter(this.form, zero)" type=button value=" 0 "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, decimal)" type=button value=" . "></P></TD> <TD bgColor="#000033"> <P><INPUT onclick="enter(this.form, plus)" type=button value=" + "></P></TD></TR> <TR> <TD bgColor="#000033" colSpan=2> <P><INPUT onclick=compute(this.form) type=button value=" = "></P></TD> <TD bgColor="#000033" colSpan=2> <P><INPUT onclick=clear(this.form) type=reset value=AC> </P></TD></TR></TABLE></DIV></FORM> <P align="center"> <FONT face="Courier , New tahoma , erdana, arial, helveticav" size="2" color="#0000FF"><B><A target="_blank"