بسم الله الرحمن الرحيم
والصلاة والسلام على أشرف المرسلين
سيدنا محمد وعلى آله وصحبه أجمعين
هذه مجموعة هامة من أكواد الجافاسكريبت و html لمصممى المواقع والمدونات
ويمكن أيضا إضافتها لصفحات الفيس بوك
أولا: أكواد النصوص
كود النص العريض<b> اكتب النص هنا </ b>
كود تحديد اتجاه النص
<p dir="rtl" align="right"> اكتب هنا النص الذي سيظهر من اليمين إلى اليسار </ p>
كود التحكم فى حجم الخط ولونه ونوعه
<CENTER> <FONT COLOR="#كود اللون المرغوب" FACE="اسم الخط المرغوب" size="4"> اكتب هنا ما تريد </ FONT> </ CENTER>
أكواد الألوان موجودة هناااا
كود نص يتحرك لأعلى
<marquee behavior="scroll" direction="up" height="140" scrollamount="1" scrolldelay="60" onMouseOver="this.stop()" onMouseOut="this.start()"> <center> <br> اكتب هنا النص الذي سيتحرك للأعلى الفقرة 1 Photos اكتب هنا النص الذي سيتحرك للأعلى الفقرة 2 Photos مدونة كن داعيا للخير 3 Photos اكتب هنا النص الذي سيتحرك للأعلى الفقرة 4 Photos ...... </ center> </ Marquee>
كود نص يتمدد وينكمش
<table align="center" width="98%"> <tr> <td>
<HTML>
<HEAD>
<script language="JavaScript">
tailles var = new Array ("0px", "1px", "2px", "3 pixels", "4px");
sizes.pos = 0;
fonction 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 = tailles [sizes.pos + = el.direction];
}
setInterval ('elast () ", 100)
</ Script>
</ HEAD>
<BODY>
<h1 align="center" id="elastic"> <font size="3"> مدونة كن داعيا للخير </ font> </ salut>
</ BODY>
</ HTML> </ td> </ tr> </ table>
كود نص متأرجح يمينا ويسارا
<marquee scrolldelay="60" scrollamount="3" width="400" direction="left" behavior="alternate" bgcolor="#FF0000"> مدونة كن داعيا للخير </ marquee>
كود إظهار نصوص بها روابط بالتناوب
<div style="position:relative;center:0px;top:0px">
<Span id = "surligneur" 0px 0px auto) "> </ span>
</ Div>
<script type="text/javascript">
tickercontents var = new Array ()
tickercontents [0] = 'مدونة كن داعيا للخير <a href="http://conda3ianllkhir.blogspot.com/"> texte </ a>'
tickercontents [1] = 'اكتب هنا نص عادي رقم 1 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي"> texte </ a>'
tickercontents [2] = 'اكتب هنا نص عادي رقم 2 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي"> texte </ a>'
tickercontents [3] = 'اكتب هنا نص عادي رقم 0 دون روابط <a href="الرابط الذي سيوضع فوق النص التالي"> texte </ a>'
var tickdelay = 3000 / / retard btw messages
var highlightspeed = 10 / / 10 pixels à la fois.
/ / / / Ne pas modifier passer cette ligne / / / / / / / / / / / / / / / /
var currentmessage = 0
var ClipWidth = 0
fonction changetickercontent () {
crosstick.style.clip = "rect (0px 0px auto 0px)"
crosstick.innerHTML = tickercontents [currentmessage]
highlightmsg ()
}
fonction highlightmsg () {
var = msgwidth crosstick.offsetWidth
si (ClipWidth <msgwidth) {
ClipWidth + = highlightspeed
crosstick.style.clip = "rect (0px" + ClipWidth + "0px auto px)"
beginclip = setTimeout ("highlightmsg ()", 20)
}
else {
ClipWidth = 0
clearTimeout (beginclip)
si (currentmessage == tickercontents.length-1) = 0 currentmessage
autre currentmessage + +
setTimeout ("changetickercontent ()", tickdelay)
}
}
fonction start_ticking () {
crosstick = document.getElementById? document.getElementById ("surligneur"): document.all.highlighter
crosstickParent = crosstick.parentNode? crosstick.parentNode: crosstick.parentElement
if (parseInt (crosstick.offsetHeight)> 0)
crosstickParent.style.height crosstick.offsetHeight = + 'px'
autre
setTimeout ("crosstickParent.style.height = crosstick.offsetHeight +" px ", 100) / / retard à cause de Mozilla
changetickercontent ()
}
if (document.all | | document.getElementById)
window.onload = start_ticking
</ Script>
كود نص متحرك
<div align="center"> <table border="0" width="100%" style="border-collapse: collapse"> <tr> <td class="alt1" colspan="3"> <b> <font size="4" color="000000"> <Direction chapiteau = "right" width = "100%" height = "20" direction = "right" onmouseover = "this.stop ()" onmouseout = "this.start ()" scrolldelay = "0" scrollamount = "5 "> مدونة كن داعيا للخير </ marquee> </ font> </ b> </ td> </ Tr> </ table> </ div>
كود شريط متحرك مع روابط
<Direction chapiteau = "right" width = "100%" height = "20" direction = "right" onmouseover = "this.stop ()" onmouseout = "this.start ()" scrolldelay = "0" scrollamount = "5 "> <a href="اكتب هنا عنوان الموقع"> اكتب هنا اسم الموقع </ a> ------ </ Marquee>
كود نص يضئ بالتدريج
<h2>
<script language="JavaScript1.2">
var message = "مدونة كن داعيا للخير"
var neonbasecolor = "gris"
var neontextcolor = "jaune"
var flashspeed = 100 / / en millisecondes
/ / / Pas besoin de modifier dessous de cette ligne / / / / /
var n = 0
if (document.all | | document.getElementById) {
document.write ('<font color="'+neonbasecolor+'">')
pour (m = 0, m <message.length; m + +)
document.write ('<span id="neonlight'+m+'">' + message.charAt (m) + '</ span>')
document.write ('</ font>')
}
autre
document.write (message)
fonction crossref (nombre) {
var crossobj = document.all? eval ("document.all.neonlight" + nombre): document.getElementById ("neonlight" + nombre)
retourner crossobj
}
fonction néon () {
/ / Les lettres en couleur de base
si (n == 0) {
pour (m = 0, m <message.length; m + +)
/ / Eval ("document.all.neonlight" + m). Style.color = neonbasecolor
crossref (m). style.color = neonbasecolor
}
/ / Parcourir et modifier les lettres individuelles de couleur néon
crossref (n). style.color = neontextcolor
si (n <message.length-1)
n + +
else {
n = 0
clearInterval (clignotant)
setTimeout ("beginneon ()", 1500)
retour
}
}
fonction beginneon () {
if (document.all | | document.getElementById)
clignotant = setInterval ("néon ()", flashspeed)
}
beginneon ()
</ Script>
</ H2>
</ Font> </ p>
كود نص يضئ بألوان مختلفة
<b>
<font size="5">
<script>
/ / ********** عدل هنا
var text = "مدونة كن داعيا للخير"
var = vitesse de 80 / / سرعه تغير الالوان
/ / ********** لا تعدل شي هنا
if (document.all | | document.getElementById) {
document.write ('<span id="highlight">' + texte + '</ span>')
var storetext = document.getElementById? document.getElementById ("highlight"): document.all.highlight
}
autre
document.write (texte)
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 suivants = 1
fonction ChangeText () {
arc en ciel = "#" + H [r] + H [g] + H [b]
storetext.style.color = arc
}
changement de fonction () {
si (seq == 6) {
b -
si (b == 0)
suivants = 1
}
si (seq == 5) {
r + +
if (r == 12)
suivants = 6
}
si (seq == 4) {
g -
if (g == 0)
suivants = 5
}
si (seq == 3) {
b + +
si (b == 12)
suivants = 4
}
si (seq == 2) {
r -
if (r == 0)
suivants = 3
}
si (seq == 1) {
g+ +
if (g == 12)
suivants = 2
}
ChangeText ()
}
fonction startEffect () {
if (document.all | | document.getElementById)
Flash = setInterval ("changement ()", vitesse)
}
startEffect ()
</ Script>
</ Font> </ b>
</ Font> </ p>
ثانيا: أكواد الصور
كود إضافة صورة
<img src="رابط الصورة">
كود صورة مع رابط
<CENTER> <a Href="الرابط"> <img src="رابط الصورة" width="30" height="80" border="2" align=" middle" /> </ a> </ CENTER>
كود تغيير الصور تلقائيا
<center> <style type="text/css">
# {Pscroller1
font-size: 14px;
font-family: Tahoma;
largeur: 250px;
hauteur: 250px;
frontière: 0px solid black;
padding: 5px;
background-color: white;
}
</ Style>
<script type="text/javascript">
/ * Exemple de message tableaux pour les deux changeurs de démonstration * /
var pausecontent = new Array ()
pausecontent [0] = '<img border = "0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYsyLIqf6vw45MVmsaa511cazZukzhorbp48Zp3WBhhGnOJQC91TWfWnh4SOwQHpwpIQ1LrYakf6rRoygMo_DiXF4oiEah2pdvLdUuKLpxQOaQlgs-AGZ8rc3hdAFdEO1M5o01q7RrrpO1/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">
/ ***********************************************
* Pause haut-bas-scroller © Dynamic Drive (www.dynamicdrive.com)
*********************************************** /
fonction pausescroller (contenu, divId, divClass, retard) {
this.content = contenu / / le contenu du message de tableau
this.tickerid = divId / / ID de ticker div pour afficher des informations
this.delay = retard / / Délai entre le changement de msg, en millisecondes.
this.mouseoverBol = 0 / / booléenne pour indiquer si la souris est actuellement sur scroller (et pause si elle est)
this.hiddendivpointer = 1 / / index de tableau des messages pour div caché
document.write ('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"> <div class = "innerDiv" style = "position: absolute; largeur : 100% "id =" "+ divId + '1"> '+ contenu [0] +' </ div> <div class = "" style = "innerDiv position: absolute; width: 100%; visibility: hidden" id = "" + divId + '2 "> '+ contenu [1] +' </ div> </ div> ')
var = scrollerinstance ce
si (window.addEventListener) / / onload fonctionner dans les navigateurs DOM2
window.addEventListener ("load", function () {scrollerinstance.initialize ()}, false)
else if (window.attachEvent) / / onload fonctionner dans IE 5.5 +
window.attachEvent ("onload", function () {scrollerinstance.initialize ()})
else if (document.getElementById) / / si navigateurs héritage DOM, il suffit de commencer scroller après 0,5 sec
setTimeout (function () {scrollerinstance.initialize ()}, 500)
}
/ / ------------------------------------------------ -------------------
/ / Initialiser () - Initialisation méthode de défilement.
/ /-Get div objets, définir les positions initiales, démarrer en bas 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 largeur de DIV internes à la largeur de moins de rembourrage extérieur DIV (rembourrage supposée être supérieure rembourrage 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 ce
document.getElementById (this.tickerid). onmouseover = function () {scrollerinstance.mouseoverBol = 1}
document.getElementById (this.tickerid). onmouseout = function () {scrollerinstance.mouseoverBol = 0}
si (window.attachEvent) / / Nettoyer références en vrac dans IE
window.attachEvent ("onunload", function () {scrollerinstance.tickerdiv.onmouseover = scrollerinstance.tickerdiv.onmouseout = null})
setTimeout (function () {scrollerinstance.animateup ()}, this.delay)
}
/ / ------------------------------------------------ -------------------
/ / Animateup () - Déplacez les deux divs internes de la barre de défilement vers le haut et en synchronisation
/ / ------------------------------------------------ -------------------
pausescroller.prototype.animateup = function () {
var = scrollerinstance ce
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 () - Echange entre lesquels est visible et ce qui est le div caché
/ / ------------------------------------------------ -------------------
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 () - Remplir le div caché avec le message suivant avant qu'il ne soit visible
/ / ------------------------------------------------ -------------------
pausescroller.prototype.setmessage = function () {
var = scrollerinstance ce
si (this.mouseoverBol == 1) / / si la souris est actuellement sur scoller, ne rien faire (mettre en pause)
setTimeout (function () {scrollerinstance.setmessage ()}, 100)
else {
var i = this.hiddendivpointer
var plafond = this.content.length
this.hiddendivpointer = (i +1> plafond-1)? 0: i 1
this.hiddendiv.innerHTML = this.content [this.hiddendivpointer]
this.animateup ()
}
}
pausescroller.getCSSpadding = function (tickerobj) {/ / obtenir la valeur de remplissage de CSS, le cas échéant
si (tickerobj.currentStyle)
retourner tickerobj.currentStyle ["paddingTop"]
else if (window.getComputedStyle) / / si DOM2
retourner window.getComputedStyle (tickerobj, ""). getPropertyValue ("padding-top»)
autre
retourner 0
}
</ Script>
<script type="text/javascript">
/ / Nouvelle pausescroller (name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds)
nouvelle pausescroller (pausecontent, "pscroller1", "SomeClass", 3000)
document.write ("<br />")
</ Script>
</ Center>
كود صور متحركة
<Img
src = "رابط الصورة المتحركة"
onload = "NcodeImageResizer.createOn (this);" border = "0"
originalWidth = "250" originalHeight = "270">
كود شريط الصور المتحرك مع روابط
يمكن التحكم فى طول وعرض الصور بتغيير قيمها يدويا وتغيير إتجاه الشريط بتغيير Bayt jusqu'à بالكود إلى bas أو droit أو ascenseur
<center/>
<div class="textwidget"> <direction chapiteau = "up" width = "115" onmouseover = "this.stop ()" scrollamount = "2" onmouseout = "this.start ()" height = "125" align = "gauche"> <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 "
/> </ 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? jour-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>
ثالثا: أكواد الروابط
كود إضافة رابط
<a href="ضع الرابط هنا"> Nom du site </ a>
فتح الرابط في نافذة جديدة
<a href="ضع الرابط هنا" Nom target="_blank"> du site </ a>
فتح الرابط في نفس النافذة
<a href="ضع الرابط هنا" target="_self"> Nom du site </ a>
لون الرابط
<A style = "color: اسم اللون باللغة الانجليزية;" href = "رابط الموقع"> Nom du site </ a>
رابعا: أكواد إسلامية
خامسا: أكواد إخبارية
سادسا: سكربتات متنوعة
<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 >
خامسا: أكواد إخبارية
أخبار BBC
<Nom de iframe = "I1" marginwidth = "1" marginheight = "1" height = "30" width = "90%" scrolling = "no" border = frameborder "0" = "0" src = "http:// news.bbc.co.uk / salut / arabe / nouvelles / ticker.stm "> </ iframe>
شريط قناة الجزيرة
شريط العربية نت
<Iframe frameborder = "0" height = "50" marginheight = "0" marginwidth = "0" scrolling = "no" src = "http://www.faisal1.com/News_Grab/jazeera.php" width = "100 % "> </ iframe>
شريط العربية نت
<div width="600"> <script src="http://www.alarabiya.net/ara_v_ticker.html"> </ script> </ div>
كود وضع الفلاش
(يمكن التحكم فى الطول والعرض بتغيير قيم largeur, hauteur)
<object width="150" height="340">
<param value="MYFLASH.swf" name="movie"/>
<embed width="150" src="URL DE MYFLASH.swf" height="340">
</ Embed>
</ Object>
كود إضافة صفحة موقع داخل صفحة موقعك
<Div dir = style "rtl" = "text-align: right;" trbidi = "on">
<iframe height="500" src="رابط الموقع" width="600"> </ iframe> </ div>
</ Div>
سكربت طباعة الصفحة
<a href="javascript:window.print()"> اطبع هذه الصفحة </ a>
سكريبت آلة حاسبة
<SCRIPT>
fonction de calcul (obj)
{Obj.expr.value = eval (obj.expr.value)}
var un = '1 '
var deux = '2 '
var = trois '3 '
var = quatre '4 '
var cinq = '5 '
var six = '6 '
var sept = '7 '
var huit = '8 '
var neuf = '9 '
var zéro = '0 '
var, plus = '+'
var moins = '-'
var multiplient = '*'
var fracture = '/'
var décimal = '.'
fonction, entrez (obj, chaîne)
{Obj.expr.value + = chaîne}
fonction d'effacement (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"> <taille INPUT = 30
name = action expr = "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> <Un target = "_blank"
أتمنى انكم كتم قد استفدتم واستمتعتم بهذا الدرس
0 التعليقات لــ "أكواد html رائعة وجميلة ."